Semantic HTML

This chapter explores semantic HTML elements, such as <section>, <article>, <nav>, and <footer>, which define the purpose of content. Learn how these elements improve SEO, accessibility, and code structure with examples and colorful previews.

Why Use Semantic HTML?

Semantic elements provide meaning to content, unlike non-semantic <div> or <span>. They help search engines understand page structure, improve accessibility for screen readers, and make code easier to maintain. For example, <nav> indicates navigation, and <article> denotes standalone content.

Major Semantic HTML Elements

Here are the key semantic HTML elements and their purposes:

• <header>: Represents introductory content, like a logo or title.
• <nav>: Contains navigation links.
• <main>: Holds the primary content of a page.
• <section>: Groups related content, like a chapter or topic.
• <article>: Represents standalone content, like a blog post.
• <aside>: Contains supplementary content, like sidebars.
• <footer>: Holds footer content, like copyright or contact info.
• <figure> and <figcaption>: Used for images or diagrams with captions.
• <time>: Marks dates or times for better machine readability.
• <mark>: Highlights text for emphasis.
• <details> and <summary>: Creates expandable/collapsible content.

Using Semantic Elements

This example shows a webpage layout using semantic elements, with each section colored differently in the preview for clarity.

<header>
  <h1>My Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
<main>
  <section>
    <article>
      <h2>Blog Post</h2>
      <p>This is a <mark>standalone</mark> article published on <time datetime="2025-09-16">September 16, 2025</time>.</p>
    </article>
  </section>
  <aside>
    <p>Related links or ads here.</p>
  </aside>
</main>
<footer>
  <p>© 2025 My Website</p>
</footer>
  

Preview:

---

Additional Semantic Elements

Explore other semantic elements like <figure>, <figcaption>, <details>, and <summary> for specialized use cases.

<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>This is an example image caption.</figcaption>
</figure>
<details>
  <summary>Click to expand</summary>
  <p>This is hidden content that can be toggled.</p>
</details>
  

Preview:

Best Practices for Semantic HTML

• Use <section> for thematic grouping and <article> for standalone content.
• Place navigation links in <nav> for clarity.
• Use <footer> for copyright or contact information.
• Add aria-label to <nav> for better accessibility.
• Test with SEO tools like Google Lighthouse to ensure crawlability.

Common Mistakes to Avoid

• Using <div> instead of semantic elements, harming SEO.
• Nesting multiple <main> elements on a single page.
• Omitting <figcaption> for images in <figure>.

---

Try It Yourself

Create a webpage layout using semantic elements like <header>, <nav>, <main>, and <footer>.

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <ul>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main>
  <section>
    <article>
      <h2>Latest Post</h2>
      <p>This is our <mark>newest</mark> article!</p>
    </article>
  </section>
</main>
<footer>
  <p>Contact: info@myblog.com</p>
</footer>
  

Preview:

Using semantic HTML elements like <header>, <nav>, <main>, and <footer> creates meaningful, accessible, and SEO-friendly pages. Practice to build well-structured websites!