BeingXpert Learn & Build Future

16. HTML Semantic Elements

What you will learn

  • What “semantic” means in HTML
  • The main structural elements and what each is for
  • How to build a page layout skeleton
  • Why semantics help accessibility and search engines

What does semantic mean?

A semantic element tells the browser, and people using assistive technology, what its content means. A <div> says nothing about its content. A <nav> says “this is navigation”.

The main elements

Element Use it for
<header> Introductory content: a logo, a title, or a heading area
<nav> A group of main navigation links
<main> The central content of the page. Use only one per page
<section> A themed group of content, usually with a heading
<article> Content that makes sense on its own, such as a blog post
<aside> Related side content, such as a sidebar
<footer> Closing content: copyright, contact links
<figure> An image or diagram with a caption
<time> A date or time

A page skeleton

Example

<body>
  <header>
    <h1>My Learning Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why I Study HTML</h2>
      <p>Published <time datetime="2026-01-15">15 January 2026</time></p>
      <p>HTML is the foundation of every website.</p>
    </article>

    <aside>
      <h2>Related links</h2>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Learning Blog</p>
  </footer>
</body>

The layout this builds (an outline, not a real page)

<header> title and <nav> links
<main>

<article> heading, date, text
<aside> related links
<footer> copyright

Section or article?

  • If the content could be shared or reused on its own, such as a news story or a comment, use <article>.
  • If it is a themed part of a larger page, such as “Features” or “Pricing”, use <section> with a heading.
  • If it only exists to apply CSS styling, use a <div>.

The time element

The datetime attribute holds the date in a format computers understand (year-month-day), while the visible text can be written for people.

Why semantics matter

  • Accessibility: screen reader users can jump straight to the navigation or the main content.
  • Search engines: clear structure helps them understand your page.
  • Maintenance: <nav> is easier to read than the tenth nested <div>.

Semantic elements do not change how a page looks by default. You still use CSS for layout and colours.

Common mistakes

  • Using more than one <main> on a page.
  • Using <section> without a heading, or as a replacement for every <div>.
  • Putting every link in a <nav>. Use it only for main navigation blocks.
  • Choosing an element because of how it looks instead of what it means.

Exercise

Write a minimal page body with a header containing the heading Recipes, a main area with one article titled Pancakes, and a footer saying Thank you.

Show solution 
<body>
  <header>
    <h1>Recipes</h1>
  </header>
  <main>
    <article>
      <h2>Pancakes</h2>
    </article>
  </main>
  <footer>
    <p>Thank you</p>
  </footer>
</body>

Knowledge check

1. Which element holds the main navigation links?

<nav>

2. How many <main> elements should a page have?

One.

3. Which element suits a blog post that stands on its own?

<article>

Summary

  • Semantic elements describe the meaning of content.
  • Build pages from <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
  • Semantics help accessibility, search engines, and readability.
Scroll to Top