More HTML: How to Use Semantic HTML Container Tags

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

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 it for distinct sections of a page. Don’t use it 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