More HTML: How to Use Semantic HTML Container Tags

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

HTML provides semantic container tags that give meaning to your page structure. Using them improves accessibility and SEO.

Generic Containers

div

The generic container with no semantic meaning:

<div>
  ...
</div>

Use div when no semantic tag fits. Often styled with class or id.

section

Represents a thematic grouping of content, typically with a heading:

<section>
  <h2>Features</h2>
  <p>Our product offers...</p>
</section>

Use for distinct sections of a page. Don’t use as a generic container.

article

A self-contained piece of content that could stand alone:

<article>
  <h2>Blog Post Title</h2>
  <p>Content here...</p>
</article>

Good for:

Blog posts
News articles
Forum posts
Product cards

Page Structure Tags

Introductory content or navigation:

<header>
  <h1>Site Title</h1>
  <nav>...</nav>
</header>

Can be used for the page header or within an article.

main

The primary content of the page:

<body>
  <header>...</header>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

Only one <main> per page.

Footer content for the page or a section:

<footer>
  <p>&copy; 2024 My Company</p>
</footer>

nav

Navigation links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Use for major navigation blocks, not every group of links.

aside

Content tangentially related to surrounding content:

<article>
  <p>Main content here...</p>
  <aside>
    <p>Related tip or quote</p>
  </aside>
</article>

Good for:

Sidebars
Pull quotes
Related links
Advertising

Choosing the Right Tag

Content Type	Tag
Page header with logo/nav	`<header>`
Main page content	`<main>`
Blog post or news article	`<article>`
Group of related content	`<section>`
Navigation menu	`<nav>`
Sidebar or related content	`<aside>`
Page footer	`<footer>`
Generic wrapper (no meaning)	`<div>`

Example Page Structure

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>Article Title</h2>
        <p>Published on January 1, 2024</p>
      </header>

      <section>
        <h3>Introduction</h3>
        <p>Content...</p>
      </section>

      <section>
        <h3>Main Points</h3>
        <p>Content...</p>
      </section>

      <aside>
        <p>Related reading: ...</p>
      </aside>

      <footer>
        <p>Tags: HTML, Web Development</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>

Benefits of Semantic HTML

Accessibility - Screen readers understand page structure
SEO - Search engines better understand content
Maintainability - Code is self-documenting
Styling - Easier to target with CSS

Lessons in this unit:

0:	Introduction
1:	▶︎ How to Use Semantic HTML Container Tags
2:	How to Create Links and Navigation in HTML
3:	How to Use Open Graph Meta Tags
4:	How to Add Favicons to Your Website
5:	Introduction to Web Accessibility