Semantic HTML

Give meaning to your web structure for better SEO, accessibility, and maintainability.

`Page Structure`

HTML5 introduced specific tags to define page layout clearly instead of using div for everything.

<header> : Introductory content or navigation links.
<nav> : Major block of navigation links.
<main> : The unique central content of the page.
<footer> : Author info, copyright, or contact details.

Page Layout Structure

Using header, nav, main, article, aside and footer to structure a page.

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#articles">Articles</a>
    <a href="#about">About</a>
  </nav>
</header>

<main>
  <article id="articles">
    <h2>What is Semantic HTML?</h2>
    <p>Semantic tags describe the meaning of content, not just its appearance.</p>
  </article>

  <aside id="about">
    <h3>About</h3>
    <p>A blog about web development.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2025 My Blog</p>
</footer>

`Defining Content Blocks`

These tags break your main content into logical pieces that search engines and screen readers understand.

<section> : A thematic grouping of content with a heading.
<article> : Self-contained content that could stand alone (blog post, news story).
<aside> : Content related to but not part of the main flow, like a sidebar.

Sections Inside Main

Use section to group related content into separate thematic blocks.

<main>
  <section>
    <h2>HTML Basics</h2>
    <p>HTML provides the structure of a webpage.</p>
  </section>

  <section>
    <h2>CSS Basics</h2>
    <p>CSS controls the visual style of a webpage.</p>
  </section>
</main>

`Media & Interaction`

Semantic tags also cover media grouping and native interactive widgets.

<figure> : Groups an image or diagram with its caption.
<figcaption> : The caption for a figure element.
<details> : A native expand/collapse widget.
<summary> : The always-visible heading inside details.

Figure and Figcaption

Wrapping an image with figure and adding a caption using figcaption.

<figure>
  <img src="https://picsum.photos/seed/picsum/200/300" alt="Sample Image" width="150" height="100">
  <figcaption>Fig.1 - A sample image with a caption.</figcaption>
</figure>

Details and Summary

Creating native expand/collapse widgets with no JavaScript required.

<details>
  <summary>What is semantic HTML?</summary>
  <p>Semantic HTML uses tags that describe the meaning of content, making pages more accessible and SEO friendly.</p>
</details>

<details>
  <summary>Why avoid using div for everything?</summary>
  <p>A div has no meaning. Tags like article, nav, and section tell browsers
  and screen readers what the content is about.</p>
</details>

Knowledge Check

1. Which element should contain the primary, non-repeated content of a page?

2. What is the benefit of using semantic tags over generic <div> tags?

3. Which tag is used to create a sidebar or content indirectly related to the main text?

4. Which element provides a visible heading for the <details> element?

Previous Next