Semantic HTML

What is semantic HTML?

Semantic HTML means using tags that describe the meaning of the content, not just its appearance. Instead of wrapping everything in generic <div> tags, you use elements like <header>, <nav>, <main>, and <footer>.

Both of these render the same way visually:

<!-- Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Semantic -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

But the semantic version tells browsers, search engines, and screen readers what each section actually is.

Why it matters

1. Accessibility — Screen readers use semantic tags to help visually impaired users navigate. A <nav> tells them "this is navigation," while a <div> tells them nothing.
2. SEO — Search engines understand your page better when you use the right tags.
3. Maintainability — Your code is easier to read when tags are descriptive.

Key semantic elements

A real-world example

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>How I Learned to Code</h2>
    <p>It all started when...</p>
  </article>

  <aside>
    <h3>Popular Posts</h3>
    <ul>
      <li><a href="/post-1">Post 1</a></li>
      <li><a href="/post-2">Post 2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2026 My Blog</p>
</footer>

Landmark roles and document outline

Semantic elements map to landmark regions that assistive technology can jump between (similar to skipping chapters in a book):

• One <main> per page for primary content — don't wrap the whole site in <main>.
• <header> and <footer> can appear inside <article> or <section>, not only at the page root.
• <nav> should wrap navigation link groups, not every list of links on the page.

Heading levels (h1–h6) create a logical outline. Use a single <h1> for the page topic, then <h2> for major sections, <h3> for subsections, and so on. Don't pick heading tags because they look big — style size with CSS instead.

When to use article, section, and div

• <article> — standalone content that could be syndicated or reused: blog post, product card, forum comment.
• <section> — thematic grouping with its own heading inside a larger document.
• <div> — no semantic meaning; use for layout hooks when no semantic element applies.

If a <section> has no heading, it's probably a <div> in disguise.

Text-level semantics

Beyond structure, HTML has inline elements that carry meaning:

<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is maintained by the WHATWG.</p>
<p>Published on <time datetime="2026-06-01">June 1, 2026</time>.</p>
<p><strong>Warning:</strong> do not skip semantic tags for styling alone.</p>

<strong> indicates importance; <em> indicates emphasis. <code>, <kbd>, and <mark> describe code snippets, keyboard input, and highlighted text respectively.

SEO and maintainability in practice

Search engines use headings and landmarks to understand page hierarchy. Semantic markup won't fix thin content, but it helps crawlers and developers alike. When your teammate reads <nav> instead of <div class="nav">, they instantly know what that region is for — that saves time on every future change.

Migrating from div soup

Refactoring an older page does not require rewriting everything at once. Start with the page shell: wrap the primary content in <main>, move site navigation into <nav>, and replace repeated header/footer wrappers with <header> and <footer>. Then tackle individual articles or product cards with <article>. Each swap removes a meaningless class name and gives assistive technology a real landmark to announce.

Avoid nesting semantic elements in ways that confuse their meaning — for example, do not put <main> inside <article> on a blog index where the article is the listing item, not the whole page. When in doubt, read the element's definition in the HTML spec and ask whether your content truly matches that role.