HTML container tags
Discover how to use container tags in HTML and find out which one to choose
Container tags
HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.
We have:
article
section
div
and it can be confusing to understand the difference between them.
Let’s see when to use each one of them.
article
The article tag identifies a thing that can be independent from other things in a page.
For example a list of blog posts in the homepage.
Or a list of links.
<div>
<article>
<h2>A blog post</h2>
<a ...>Read more</a>
</article>
<article>
<h2>Another blog post</h2>
<a ...>Read more</a>
</article>
</div>
We’re not limited to lists: an article can be the main element in a page.
<article>
<h2>A blog post</h2>
<p>Here is the content...</p>
</article>
Inside an article
tag we should have a title (h1
-h6
) and
section
Represents a section of a document. Each section has a heading tag (h1
-h6
), then the section body.
Example:
<section>
<h2>A section of the page</h2>
<p>...</p>
<img ... />
</section>
It’s useful to break a long article into different sections.
Shouldn’t be used as a generic container element. div
is made for this.
div
div
is the generic container element:
<div>
...
</div>
You often add a class
or id
attribute to this element, to allow it to be styled using CSS.
We use div
in any place where we need a container but the existing tags are not suited.
Tags related to page
nav
This tag is used to create the markup that defines the page navigation. Into this we typically add an ul
or ol
list:
<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>
aside
The aside
tag is used to add a piece of content that is related to the main content.
A box where to add a quote, for example. Or a sidebar.
Example:
<div>
<p>some text..</p>
<aside>
<p>A quote..</p>
</aside>
<p>other text...</p>
</div>
Using aside
is a signal that the things it contains are not part of the regular flow of the section it lives into.
header
The header
tag represents a part of the page that is the introduction. It can for example contain one or more heading tag (h1
-h6
), the tagline for the article, an image.
<article>
<header>
<h1>Article title</h1>
</header>
...
</article>
main
The main
tag represents the main part of a page:
<body>
....
<main>
<p>....</p>
</main>
</body>
footer
The footer
tag is used to determine the footer of an article, or the footer of the page:
<article>
....
<footer>
<p>Footer notes..</p>
</footer>
</article>
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025