Semantic tags — header, nav, main, article, footer

Semantic tags describe the CONTENT, not just the look. Better for SEO and accessibility.

index.html v3.1

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="/">Home</a> |
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h2>First Post</h2>
    <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
    <p>This is the content of my first blog post.</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 My Blog</p>
</footer>

Live preview updates as you type

🧠 How it works

header — top of a page or section (logo, nav). nav — navigation links. main — the main content of the page (only one per page). article — a self-contained piece (a blog post, a news story, a forum comment). section — a thematic grouping of content. aside — sidebar content (related links, ads). footer — bottom of a page or section (copyright, links). time — a date (datetime attribute is machine-readable). Why use these instead of div? Screen readers use them to navigate. Search engines use them to understand the page.

✏️ Try these changes

Add <aside><h3>Related</h3><ul><li>Post 2</li></ul></aside> inside <main>
→ sidebar appears
Change <p>Published on <time...> to just <p>Published on January 15, 2024</p>
→ loses the machine-readable date
Add a second <article> below the first
→ two articles in the main section

← Previous lab

Tables — the right way (not for layout!)

Next lab →

Links and images — the web's basics