Semantic HTML: A basic introduction

Structure with Meaning

Semantic HTML conveys what content is rather than how it looks.

It makes pages more accessible, improves SEO, and helps developers (including your future self) understand the intent behind code.

Why semantic HTML matters

  • Accessibility: screen readers can jump between landmarks and headings.
  • SEO: search engines use structure to determine importance.
  • Maintainability: clean structure = easier styling and collaboration.

Core semantic elements

<header>
Introductory content for a page, article, or section.
<main>
The central content of a document (only one per page).
<article>
Self-contained content that could stand alone.
<section>
A thematic grouping with its own heading.
<aside>
Supplementary content (pull quotes, related links, promos).
<nav>
Major navigation blocks (label with aria-label if multiple).
<figure> <figcaption>
Media with an optional caption.
<footer>
Concluding content for a section or page.

Good vs. bad markup

Cross icon Non-semantic 
    
        <div id="top">
          <div class="nav">...</div>
          <div class="title">Welcome</div>
        </div>
Tick icon Semantic 
    
        <header>
          <nav aria-label="Primary">...</nav>
          <h1>Welcome</h1>
        </header>

ARIA roles and semantics

Native elements already carry implicit roles. Only add ARIA to label landmarks or when building custom widgets.

Semantic HTML checklist

  • One <h1> per page.
  • Logical heading levels (h2 → h3 → h4 → h5 → h6).
  • Only one <main>.
  • Label multiple <nav>/<aside> with aria-label.
  • Use <section> when you would naturally give the content a heading.
  • Wrap figures with <figure> and add <figcaption> when helpful.

Resources