HTML Semantic Tags: When and How to Use Them

Semantic HTML tags describe their meaning — both to the browser and the developer. They improve accessibility, SEO, and code readability.

Why Use Semantic Tags?

Accessibility — Screen readers use semantic tags to navigate
SEO — Search engines understand your content structure
Maintainability — Your code is self-documenting
Future-proofing — Browsers optimize semantic elements

The Essential Semantic Tags

Page Structure

<body>
  <header>
    Site logo, navigation, search bar
  </header>

  <nav>
    Primary navigation links
  </nav>

  <main>
    <article>
      <section>
        Grouped content with a theme
      </section>
    </article>

    <aside>
      Sidebar, related links, ads
    </aside>
  </main>

  <footer>
    Copyright, contact, sitemap
  </footer>
</body>

Header

The introductory content of a page or section. Usually contains logos, navigation, search, and heading elements.

<header>
  <img src="logo.png" alt="Site logo">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Nav

Navigation links. Use for primary site navigation, not all link groups.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Main

The dominant content of the page. Use only once per page.

<main>
  <h1>Page Title</h1>
  <p>Primary content here.</p>
</main>

Article

A self-contained composition. Works for blog posts, news articles, forum posts, comments.

<article>
  <h2>Blog Post Title</h2>
  <p>Published on <time datetime="2024-01-15">January 15</time></p>
  <p>Article content...</p>
</article>

Section

A thematic grouping of content. Each section should have a heading.

<section>
  <h2>Our Services</h2>
  <p>Description of services...</p>
</section>

Aside

Content indirectly related to the main content. Sidebars, pull quotes, related links.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="/article-1">Article 1</a></li>
    <li><a href="/article-2">Article 2</a></li>
  </ul>
</aside>

Footer

Footer for its nearest sectioning element. Site-wide footer goes at the bottom of the page.

<footer>
  <p>&copy; 2024 Your Site</p>
  <address>123 Main St, City</address>
</footer>

Common Mistakes

Using <div> for everything — Replace generic divs with semantic tags where possible

<!-- Bad -->
<div class="header">
<div class="nav">

<!-- Good -->
<header>
<nav>

Multiple <main> elements — Only one per page

Nesting <article> inside <section> or vice versa without reason — Each has a specific meaning

Skipping heading hierarchy — Always use <h1> through <h6> in order, don’t skip levels

When to Use a Div

<div> is still useful for:

Styling containers with no semantic meaning
Wrapping elements for CSS layouts (Flexbox/Grid containers)
JavaScript hooks when no semantic element fits

<div class="gallery-grid">
  <img src="photo1.jpg" alt="Description">
  <img src="photo2.jpg" alt="Description">
</div>

More frontend guides: See our Flexbox guide and responsive design guide.