</>
Skip to content
HTML lessons (29/60)

HTML — Semantics

What & Why: Understanding Semantics in HTML

HTML is more than just a way to put text on a page.
Semantic elements describe what the content is, not just how it looks.
Using the right tags helps search engines, screen readers, and future‑proof browsers understand your page.

  • Accessibility – Assistive devices read the structure.
  • SEO – Search engines index content better.
  • Maintainability – Code is easier to read and edit.

Basic Semantic Tags

TagTypical UseCommon Attributes
<header>Page or section headerid, class
<nav>Navigation linksaria-label
<main>Main contentid, class
<article>Self‑contained contentid, class
<section>Thematic groupingid, class
<aside>Sidebar or related infoid, class
<footer>Footer of page or sectionid, class

Example: A Simple Blog Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
  </header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>First Post</h2>
      <p>Welcome to my blog!</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2026 My Blog</p>
  </footer>
</body>
</html>

What the browser displays

The page shows a large header with “My Blog”, a navigation bar below it, the main article with a title and paragraph, and a footer at the bottom.

Good to know: The <header> and <footer> tags can appear inside <article> or <section> to give sub‑sections their own header and footer.

Advanced Semantic Elements

<figure> & <figcaption>

Use these when you have media that needs a caption.

<figure>
  <img src="mountain.jpg" alt="Snowy mountain">
  <figcaption>A scenic view of the Alps.</figcaption>
</figure>

<mark> – Highlighting Text

<p>The <mark>highlighted</mark> word stands out.</p>

<time> – Date and Time

<p>Published on <time datetime="2026-08-23">August 23, 2026</time>.</p>

<details> & <summary> – Collapsible Content

<details>
  <summary>More Info</summary>
  <p>This section can be expanded or collapsed by the user.</p>
</details>

What the browser displays

The image appears with a caption below it. The word “highlighted” is shaded. The date is shown in plain text. The “More Info” title is clickable; clicking it reveals the paragraph.

Common mistake: Using a <button> to hide/show content instead of <details> and <summary>. The native elements are keyboard‑friendly and accessible out of the box.

Comparing <details> Attributes

AttributeValueEffect
openpresentContent is shown by default
openabsentContent is hidden by default
disabledpresentPrevents interaction, no toggle
disabledabsentAllows toggling
<details open>
  <summary>Open by default</summary>
  <p>This text is visible when the page loads.</p>
</details>

<details disabled>
  <summary>Disabled</summary>
  <p>You cannot open this section.</p>
</details>

What the browser displays

The first section is expanded automatically. The second section shows the summary but cannot be opened.

Common Mistakes Checklist

  • ❌ Using <div> for everything instead of semantic tags.
  • ❌ Forgetting the <nav> aria‑label for navigation.
  • ❌ Placing multiple <h1> tags on the same page.
  • ❌ Using <table> for layout rather than data.
  • ❌ Ignoring the alt attribute on <img> tags.

Mini Practice

  1. Create a page with a <header>, <nav>, <main>, and <footer>. Add at least two <article> elements inside <main>.
  2. Inside each article, include a <figure> with an image and a <figcaption>. Use a placeholder image URL.
  3. Add a <details> element that explains the purpose of semantic tags. Make it collapsed by default.
  4. Use a <time> tag to show the current date in ISO format (YYYY-MM-DD). Add a datetime attribute.
  5. Validate your HTML using the W3C validator and fix any errors that appear.

Related Topics

ComputercodeEntitiesSymbolsEmojis

Frequently Asked Questions about Semantics

What is Semantics in HTML?

Semantics is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Semantics?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Semantics.

Why is Semantics important in HTML?

Semantics is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.