Home › HTML Masterclass › Layout and Semantics
Module 6: Modern SemanticsIntermediate

24. Semantic HTML in Full (Semantic Elements)

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <details>

Real-life analogy

If you fill a book with only pages, with no index and no chapter names, it will be hard to understand. Semantic tags, like a book's chapters, header and footer, clearly tell you what each piece of content is.

Explanation

Semantic means 'meaningful'. HTML5 gave us meaningful tags:

<header>: The top part of the website (logo, title)
<nav>: The main navigation links and menu
<main>: The main unique content of the page
<section>: A separate part of a topic (Section)
<article>: A standalone blog post or news story
<aside>: A sidebar or related links
<footer>: Copyright and contact information
<details>: An FAQ accordion that opens on click without JS

Golden rules

  • Search engines (Google) look at semantic tags and give the website a higher rank on Google.
  • There should be only one <main> tag on a page.

Common mistake

Using just a <div> instead of <nav> for a navigation menu. Because of this, screen readers cannot tell blind users about the menu.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; margin: 0; padding: 15px; background: #f1f5f9;">
  <header style="background: #0f172a; color: white; padding: 10px; border-radius: 6px 6px 0 0;">
    <h3 style="margin: 0;">My Website (&lt;header&gt;)</h3>
    <nav style="margin-top: 4px;"><a href="#" style="color: #38bdf8;">Home</a> | <a href="#" style="color: #38bdf8;">Contact</a></nav>
  </header>
  <main style="background: white; padding: 12px; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1;">
    <article>
      <h4 style="color: #047857; margin: 0;">Blog Title (&lt;article&gt;)</h4>
      <p style="font-size: 13px;">Semantic tags improve SEO.</p>
    </article>
    <details style="background: #f8fafc; padding: 6px; border-radius: 4px; font-size: 12px;">
      <summary style="font-weight: bold; cursor: pointer; color: #0284c7;">FAQ: Is HTML easy?</summary>
      Yes, it is very easy!
    </details>
  </main>
  <footer style="background: #e2e8f0; text-align: center; padding: 6px; font-size: 11px; border-radius: 0 0 6px 6px;">
    © 2026 All rights reserved (&lt;footer&gt;)
  </footer>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which semantic tag is best for holding a website's main navigation menu and links?

  1. <menu>
  2. <links>
  3. <nav>
  4. <header>
Show answer

Answer: <nav>

The <nav> tag is made specifically for a group of navigation links.

← All 38 lessons