🌐 HTML

Semantic HTML

Lesson 5 of 5 ~6 min

You could build an entire page with just <div> and <span> tags — and the browser would render it fine. But that would be bad HTML. Semantic HTML means using tags that describe the meaning of your content, not just its container shape.

Why semantics matter

→ Accessibility — Screen readers and assistive technologies use semantic tags to navigate the page. A <nav> tag tells screen readers "this is the navigation", while a <div> doesn't.
→ SEO — Search engines give more weight to content inside <h1>, <article>, and <main> tags. Semantic structure helps Google understand your page hierarchy.
→ Readability — Other developers (and your future self) can instantly understand the page structure when semantic tags are used.

The semantic tags

<header>    Site or section header (logo, title, nav)</header>
<nav>       Navigation links</nav>
<main>      The primary content of the page</main>
<article>   Self-contained content (blog post, news story)</article>
<section>   Thematic grouping of content</section>
<aside>     Sidebar or tangentially related content</aside>
<footer>    Site or section footer (links, copyright)</footer>

Div vs semantic tags

Here's the same page structure written two ways — the non-semantic version and the semantic version:

Editor

HTML

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

<main>
  <article>
    <h2>My First Post</h2>
    <p>Welcome to my blog. This is the start of something great.</p>
  </article>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">More Posts</a></li>
      <li><a href="#">Contact Me</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 My Blog</p>
</footer>

Output

Try it

Replace the <header> with <div>, the <nav> with <div>, and so on. The visual output won't change — but you lose all the meaning that makes your page accessible and SEO-friendly.

When to use what

→ Use <header> for the top of the page or the top of each <section>.
→ Use <nav> for the main navigation block — not every group of links.
→ Use <main> once per page for the primary content.
→ Use <article> for content that makes sense on its own (blog posts, comments, cards).
→ Use <section> to group related content under a shared heading.
→ Use <aside> for sidebars, callout boxes, or tangential content.
→ Use <footer> for the bottom of the page or section.
→ Use <div> and <span> only when no semantic tag fits — for styling or scripting hooks.

Quiz

Which tag should wrap the main navigation links?

Challenge

Take the page layout from the editor above and rewrite it using only semantic tags — replace every <div> with the most appropriate semantic element. Add a <section> inside the <main> that groups the article and sidebar together under an <h2>.

← Previous

Forms & Inputs

CSS Fundamentals