Semantic HTML

What is Semantic HTML?

Semantic HTML uses elements that clearly describe their meaning and purpose to both browsers and developers. Instead of using generic <div> and <span> for everything, semantic elements tell browsers, screen readers, and search engines exactly what type of content they contain.

Think of it like labeling boxes when moving: "Kitchen Supplies" is more helpful than "Box #3". Semantic HTML does the same for your webpage structure.

Non-Semantic vs Semantic Comparison

<div id="header">
  <div id="logo">Logo</div>
  <div id="nav">
    <div>Home</div>
    <div>About</div>
  </div>
</div>

<div id="content">
  <div class="post">
    <div class="title">Title</div>
    <div class="text">...</div>
  </div>
</div>

<div id="sidebar">...</div>
<div id="footer">...</div>

<header>
  <h1>Logo</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Title</h2>
    <p>...</p>
  </article>
</main>

<aside>...</aside>
<footer>...</footer>

Semantic Page Layout

Here's how semantic elements create a well-structured page:

<header>
  <h1>Site Name</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <section>
      <h3>Section Heading</h3>
      <p>Content...</p>
    </section>
  </article>

  <aside>
    <h3>Related Links</h3>
    <!-- Sidebar content -->
  </aside>
</main>

<footer>
  <p>© 2024 Company Name</p>
</footer>

Key Semantic Elements Explained

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>
  <h1>Page Title</h1>
  <!-- Main content here -->
</main>

<article>
  <h2>Blog Post Title</h2>
  <time datetime="2024-01-15">Jan 15, 2024</time>
  <p>Article content...</p>
</article>

<section>
  <h2>Our Services</h2>
  <p>Content about services...</p>
</section>

<aside>
  <h3>Related Articles</h3>
  <ul>...</ul>
</aside>

<footer>
  <p>© 2024 Company</p>
  <nav>...</nav>
</footer>

Special Semantic Elements

<figure> & <figcaption>

Self-contained content like images, diagrams, code snippets with optional captions.

<figure>
  <img src="chart.png" alt="Sales chart" />
  <figcaption>Q4 2024 Sales Performance</figcaption>
</figure>

<!-- Works for code too! -->
<figure>
  <pre><code>const x = 10;</code></pre>
  <figcaption>JavaScript variable declaration</figcaption>
</figure>

<details> & <summary>

Interactive accordion/collapsible content—no JavaScript required!

Click to expand

This content is hidden until you click the summary!

Another expandable section

You can have multiple details elements.

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed on click.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>Starts expanded</summary>
  <p>Content visible initially.</p>
</details>

<time>

Machine-readable dates and times for better SEO and accessibility.

Published: January 15, 2024

Meeting at: 2:30 PM

<!-- Date only -->
<time datetime="2024-12-25">Christmas Day</time>

<!-- Time only -->
<time datetime="14:30">2:30 PM</time>

<!-- Full datetime -->
<time datetime="2024-01-01T00:00:00Z">
  New Year 2024
</time>

<mark>

Highlighted or marked text (like a highlighter pen).

Search results for "HTML": HTML is the foundation of the web.

<p>Most important: <mark>This part</mark></p>