HTML5 Semantic Elements

Semantic HTML uses elements that clearly describe their meaning and content. Semantic elements improve accessibility, SEO, and code readability by providing meaningful structure.

What Are Semantic Elements?

Semantic elements clearly describe their purpose to both browsers and developers.

Non-semantic elements like <div> and <span> tell nothing about their content.

Semantic elements like <header>, <nav>, <article>, and <footer> describe their role.

HTML5 introduced many semantic elements to replace generic <div> usage.

Using semantic HTML improves accessibility for screen readers and SEO for search engines.

<!-- Non-semantic (old way) -->
<div id="header">Website Header</div>
<div id="nav">Navigation</div>
<div class="article">Article content</div>
<div id="footer">Footer</div>

<!-- Semantic (HTML5 way) -->
<header>Website Header</header>
<nav>Navigation</nav>
<article>Article content</article>
<footer>Footer</footer>

Document Structure Elements

<header>: Introductory content or navigation aids (page or section header).

<nav>: Navigation links (main menu, table of contents, breadcrumbs).

<main>: Main content of the document (should be unique, only one per page).

<footer>: Footer content (copyright, contact info, related links).

<aside>: Content tangentially related to main content (sidebars, pullquotes).

<section>: Thematic grouping of content, typically with a heading.

<!DOCTYPE html>
<html>
<head>
  <title>Semantic Page</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
    
    <aside>
      <h3>Related Links</h3>
      <ul><li>Link 1</li></ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

Content Grouping Elements

<article>: Self-contained, independently distributable content (blog post, news article, comment).

<section>: Thematic grouping within a document or article.

<figure> and <figcaption>: Self-contained content like images, diagrams, code with caption.

<details> and <summary>: Disclosure widget that shows/hides content.

<mark>: Highlighted or marked text for reference.

<time>: Represents a specific time or date.

<!-- Article with sections -->
<article>
  <h1>Understanding HTML5</h1>
  <section>
    <h2>Introduction</h2>
    <p>HTML5 introduced many new features...</p>
  </section>
  <section>
    <h2>Semantic Elements</h2>
    <p>Semantic elements provide meaning...</p>
  </section>
</article>

<!-- Figure with caption -->
<figure>
  <img src="diagram.png" alt="System architecture">
  <figcaption>Figure 1: System Architecture Overview</figcaption>
</figure>

<!-- Details disclosure -->
<details>
  <summary>Click to expand</summary>
  <p>Hidden content appears here when expanded.</p>
</details>

<!-- Marked text and time -->
<p>The event is on <time datetime="2025-12-31">December 31, 2025</time>.</p>
<p>Search results for <mark>semantic HTML</mark>.</p>

Text-Level Semantics

<strong>: Important text (typically bold, indicates importance).

<em>: Emphasized text (typically italic, indicates stress emphasis).

<code>: Computer code snippet.

<kbd>: User keyboard input.

<samp>: Sample output from a program.

<var>: Mathematical or programming variable.

<abbr>: Abbreviation or acronym.

<cite>: Title of a creative work.

<!-- Text-level semantic elements -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>Make <em>sure</em> to save your work regularly.</p>

<!-- Code-related semantics -->
<p>Use the <code>console.log()</code> function to debug.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>The program outputs: <samp>Hello, World!</samp></p>
<p>Calculate <var>x</var> + <var>y</var> = <var>result</var></p>

<!-- Other semantics -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is awesome.</p>
<p>As stated in <cite>The Art of Web Design</cite>...</p>

Benefits of Semantic HTML

Accessibility: Screen readers use semantic elements to help users navigate.

SEO: Search engines better understand page structure and content importance.

Maintainability: Code is easier to read and understand for developers.

Styling: Easier to target specific content types with CSS.

Future-proof: Semantic HTML adapts better to new devices and technologies.

Default styles: Browsers apply meaningful default styles to semantic elements.

<!-- Good for screen readers -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Search engines understand structure -->
<article itemscope itemtype="https://schema.org/BlogPosting">
  <header>
    <h1 itemprop="headline">Article Title</h1>
    <time itemprop="datePublished" datetime="2025-01-15">January 15, 2025</time>
  </header>
  <div itemprop="articleBody">
    <p>Article content...</p>
  </div>
</article>

<!-- Easy to style -->
<style>
article header h1 { color: navy; }
article time { color: gray; }
aside { background: #f5f5f5; }
</style>