Skip to content

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:

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

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.

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>

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>
→ Get my HTML Handbook

download all my books for free

  • javascript handbook
  • typescript handbook
  • css handbook
  • node.js handbook
  • astro handbook
  • html handbook
  • next.js pages router handbook
  • alpine.js handbook
  • htmx handbook
  • react handbook
  • sql handbook
  • git cheat sheet
  • laravel handbook
  • express handbook
  • swift handbook
  • go handbook
  • php handbook
  • python handbook
  • cli handbook
  • c handbook

subscribe to my newsletter to get them

Terms: by subscribing to the newsletter you agree the following terms and conditions and privacy policy. The aim of the newsletter is to keep you up to date about new tutorials, new book releases or courses organized by Flavio. If you wish to unsubscribe from the newsletter, you can click the unsubscribe link that's present at the bottom of each email, anytime. I will not communicate/spread/publish or otherwise give away your address. Your email address is the only personal information collected, and it's only collected for the primary purpose of keeping you informed through the newsletter. It's stored in a secure server based in the EU. You can contact Flavio by emailing flavio@flaviocopes.com. These terms and conditions are governed by the laws in force in Italy and you unconditionally submit to the jurisdiction of the courts of Italy.

Related posts about html: