HTML · Quick Reference

Lesson 22 — Semantic HTML Cheat Sheet

HTML

In one line: A semantic element clearly describes its meaning to both the browser and the developer. <nav> means navigation. <article> means a self-contained piece of content. &l...

Key Ideas

1What "Semantic" Means. A semantic element clearly describes its meaning to both the browser and the developer. <nav> means navigation. <article> means a self-contained piece of c...

2The Semantic Element Landscape. HTML5 introduced a set of elements that map directly to common page regions and content types:

3A Typical Page Layout. Here's how semantic elements typically map to the regions of a real web page:

4When to Use div and span. <div> and <span> are still needed — but only when no semantic element fits. Use them as styling hooks and layout containers when there is no meaningful ele...

Code Examples

<div class="header">
  <div class="logo">...</div>
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<header>
  <div class="logo">...</div>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site Name"></a>
    <nav>
      <ul>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">B...