Semantic HTML: Use Meaningful Elements

Learn semantic HTML with header, nav, main, article, section and footer elements, and understand why meaningful page structure matters.

What semantic HTML means

Semantic elements describe the purpose of their content. They help browsers, assistive technology and developers understand how a page is organized.

Use page landmarks

Elements such as <header>, <nav>, <main> and <footer> identify major regions. A page generally has one main content area.

<header>
  <a href="/">Site name</a>
</header>
<nav aria-label="Main navigation">
  <a href="/about/">About</a>
</nav>
<main>
  <article>
    <h1>Page title</h1>
    <p>The main content goes here.</p>
  </article>
</main>
<footer>Copyright information</footer>

Choose elements for their meaning

Use <article> for content that can stand on its own, and <section> for a grouped topic with a heading. Use a <div> when no semantic element fits.

Keep headings in a useful order

Start the page with a clear <h1>, then use <h2> for main sections and <h3> for subsections. Choose heading levels by content structure, not by their visual size.