CODINGNOW
← Back to the Build Your Homepage series
πŸ“„
EPISODE 06
header Β· nav Β· main Β· article Β· section Β· aside Β· footer

Semantic HTML

Replace generic <div> soup with semantic elements that describe meaning. Better SEO, better accessibility, easier styling.

semanticaccessibilitySEOlandmarks
Duration
⏱ About 1 hour
Level
πŸ“Š Beginner
Prerequisite
🎯 html-01
OUTCOME
Restructure a page using semantic landmarks that screen readers can navigate

What you'll learn

  • 1Use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
  • 2Pick <article> vs <section> correctly
  • 3Improve SEO and accessibility without changing visual design
  • 4Validate a semantic structure with a screen reader

1. The Page Landmarks

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

  <main>
    <article>
      <h2>Post Title</h2>
      <p>Post body...</p>
    </article>
    <aside>
      <h3>Related</h3>
      <ul><li><a href="...">Other post</a></li></ul>
    </aside>
  </main>

  <footer>
    <p>Β© 2024 Coding Now</p>
  </footer>
</body>

2. article vs section vs div

  • <article> β€” self-contained content that could stand alone (blog post, news item, product card)
  • <section> β€” a thematic grouping of content within an article or page
  • <div> β€” last resort, only when no semantic option fits

3. Why It Matters

  • Screen readers expose landmarks for fast navigation
  • Search engines weight headings + structure
  • Code stays readable as a project grows
πŸ’‘

If you can read your HTML without CSS and still understand the page, your semantics are probably right.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub β†—