HTML5 Semantics

HTML5 Semantic Elements

Semantics in HTML refers to using tags that accurately describe the meaning and structure of the content, rather than just its appearance.

Semantic elements provide context for both browsers and developers.

What are Semantic Elements?

A semantic element clearly describes its purpose and the type of content it holds.

Examples:

• Non-semantic elements: <div> and <span>. These are generic containers. They tell us nothing about their content’s meaning.
• Semantic elements: <form>, <table>, <article>, <header>, <footer>, <nav>. These clearly define the type of content they contain.

Why Use Semantic Elements?

Using semantic HTML offers several key advantages:

• Accessibility: Screen readers and other assistive technologies use semantic elements (like <nav>, <main>, <article>) to help users navigate and understand the page structure.
• SEO: Search engines better understand the context and importance of content when structured with semantic tags, potentially improving rankings.
• Maintainability: Code becomes easier to read, understand, and maintain for developers (including your future self!).
• Clarity: Provides a clearer and more meaningful structure to your web pages.

Before HTML5, developers often used generic <div> elements with IDs or classes like <div id="header"> or <div class="nav">. HTML5 introduced specific tags for these common structures.

Key Semantic Elements in HTML5

Here are some of the most important semantic elements introduced or emphasized in HTML5:

<header>

Represents introductory content, typically a group of introductory or navigational aids. Can be used for the whole page or for a specific section/article.

Often contains headings (<h1>-<h6>), logos, search forms, author names.

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

<nav>

Defines a section containing navigation links, typically the main site navigation.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>

Represents the dominant content of the <body> of a document. The content inside <main> should be unique to the document, excluding content repeated across pages (like sidebars, navigation links, headers, footers). There should only be one <main> element per page.

<main>
  <h1>Main Article Title</h1>
  <p>This is the primary content of the page...</p>
</main>

<article>

Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., a forum post, a blog entry, a newspaper article, a user comment).

An <article> typically includes its own header (often with a heading).

<article>
  <h2>Blog Post Title</h2>
  <p>Published on <time datetime="2023-10-27">October 27, 2023</time></p>
  <p>Content of the blog post...</p>
</article>

<section>

Represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading.

Used to group related content thematically. Think of it like chapters in a book.

<section>
  <h2>Chapter 1: Introduction</h2>
  <p>Details about the introduction...</p>
</section>
<section>
  <h2>Chapter 2: Advanced Topics</h2>
  <p>Details about advanced topics...</p>
</section>

<article> vs. <section>

Use <article> when the content is self-contained and makes sense on its own (like a blog post). Use <section> to group related parts of a larger whole (like chapters or thematic parts of an article). You can nest sections inside articles and vice-versa, depending on the content structure.

<aside>

Represents content tangentially related to the content around it, often presented as a sidebar.

<article>
  <h1>Main Content</h1>
  <p>...</p>
</article>
<aside>
  <h2>Related Links</h2>
  <ul>...</ul>
</aside>

<footer>

Represents the footer for its nearest sectioning content or sectioning root element (like <body>, <article>, <section>). Typically contains information about the author, copyright data, links to related documents, etc.

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <p><a href="/privacy">Privacy Policy</a></p>
</footer>

<figure> and <figcaption>

<figure> represents self-contained content, often an image, illustration, diagram, code snippet, etc., that is referenced from the main content.

<figcaption> provides a caption or legend for the <figure> element.

<figure>
  <img src="diagram.png" alt="Workflow diagram">
  <figcaption>Fig. 1: Project Workflow Diagram</figcaption>
</figure>

Other Semantic Elements

• <time>: Represents a specific period in time or a date.
• <mark>: Represents text marked or highlighted for reference.
• <details> & <summary>: Create interactive widgets that hide/reveal content.

Structuring a Page Semantically

A typical page layout using semantic elements might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic Page Structure</title>
</head>
<body>

  <header> <!-- Page Header -->
    <h1>Site Name</h1>
    <nav> <!-- Main Navigation -->
      <ul>...</ul>
    </nav>
  </header>

  <main> <!-- Main Content Area -->
    <article>
      <header> <!-- Article Header -->
        <h2>Article Title</h2>
      </header>
      <section>
        <h3>Subsection 1</h3>
        <p>...</p>
      </section>
      <section>
        <h3>Subsection 2</h3>
        <figure>
          <img src="..." alt="...">
          <figcaption>...</figcaption>
        </figure>
        <p>...</p>
      </section>
      <footer> <!-- Article Footer -->
        <p>Author: ...</p>
      </footer>
    </article>

    <aside> <!-- Sidebar -->
      <h2>Related Info</h2>
      <p>...</p>
    </aside>
  </main>

  <footer> <!-- Page Footer -->
    <p>Copyright info...</p>
  </footer>

</body>
</html>

Browser support for these elements is universal in modern browsers. For very old browsers (like IE8 and below), a JavaScript shim (html5shiv) might be needed, but this is rarely a concern today.

Semantic Elements Reference Summary

Tag	Description
	Defines independent, self-contained content.
	Defines content aside from the main content (like a sidebar).
	Defines additional details the user can view or hide.
	Defines a caption for a element.
	Specifies self-contained content, like images, diagrams, code.
	Defines a footer for a document or section.
	Specifies a header for a document or section.
	Specifies the main content of a document.
	Defines marked/highlighted text.
	Defines navigation links.
	Defines a thematic grouping of content in a document.
	Defines a visible heading for a element.
	Defines a specific time or date.