HTML Semantic Elements

Before we dive in, let us quickly review two things you need to understand to follow this lesson easily.

What is an HTML Element?

An HTML element is made up of an opening tag, some content, and a closing tag.

<p>This is a paragraph.</p>

• <p> is the opening tag · it starts the element
• This is a paragraph. is the content · the actual text shown on the page
• </p> is the closing tag · it ends the element

The tag name (the letter or word inside < >) tells the browser what kind of content it is. <p> means paragraph. <h1> means a big top-level heading.

What is a <div>?

A <div> is a generic container. It groups things together but says nothing about what those things are. Think of it as a plain cardboard box with no label.

<div>
  <h2>Welcome to my website</h2>
  <p>Hello and thanks for visiting!</p>
</div>

The <div> here just wraps two elements. A browser has no idea if this is a header, a sidebar, or an article. It is just a box. That is the problem semantic elements solve.

What Does "Semantic" Mean?

The word semantic comes from Greek and means "having meaning" or "relating to meaning."

In everyday language:

• The word "dog" is semantic because it means something specific · a four-legged furry animal.
• A random squiggle has no semantics · it carries no meaning.

In HTML:

• <article> is semantic · it tells everyone "this is a self-contained article."
• <div> is not semantic · it means "some kind of container." That's all.

Why Does It Matter? Three Big Reasons

Reason 1 · Accessibility (helping people with disabilities)

Many people use screen readers · special software that reads web pages out loud for people who cannot see the screen. Screen readers understand semantic HTML. When they encounter a <nav> element, they announce "Navigation." When they find a <main> element, they can jump straight to the main content.

If everything is wrapped in <div>, a screen reader cannot distinguish navigation from an article from a footer. The user hears an undifferentiated wall of content.

Reason 2 · Search Engine Optimisation (SEO)

Search engines like Google read the HTML of your page to understand what it is about. When Google finds <article> tags, it knows those are important, self-contained pieces of content worth indexing. When it finds <nav>, it understands those are navigation links. Well-structured semantic HTML helps search engines rank your page better.

Reason 3 · Code Readability and Maintenance

Compare these two snippets. Both do the same visual thing:

<!-- Non-semantic version -->
<div id="header">
  <div id="nav">
    <div class="nav-link">Home</div>
  </div>
</div>
<div id="main">
  <div class="article">
    <div class="article-header">Title Here</div>
    <div class="article-body">Content here...</div>
  </div>
</div>
<div id="footer">Copyright 2025</div>

<!-- Semantic version -->
<header>
  <nav>
    <a href="#">Home</a>
  </nav>
</header>
<main>
  <article>
    <header><h1>Title Here</h1></header>
    <p>Content here...</p>
  </article>
</main>
<footer>Copyright 2025</footer>

The semantic version is shorter, clearer, and immediately understandable. You do not need id="header" because the element IS a header. Another developer reading your code six months later will understand the structure instantly.

Non-Semantic vs Semantic: A Visual Comparison

Think of a newspaper. It has clear, named sections:

Every one of these has a matching HTML semantic element. Let us learn them one by one.

Here is a bird's-eye view of how semantic elements typically fit together in a real page layout:

┌──────────────────────────────────────────────────────┐
│                      <header>                        │
│          (Logo, Site Title, Tagline)                 │
├──────────────────────────────────────────────────────┤
│                        <nav>                         │
│          (Main navigation links)                     │
├───────────────────────────────┬──────────────────────┤
│                               │                      │
│           <main>              │      <aside>         │
│                               │    (Sidebar:         │
│   ┌───────────────────────┐   │  Related Links,      │
│   │      <article>        │   │  Ads, Tips)          │
│   │  ┌─────────────────┐  │   │                      │
│   │  │   <header>      │  │   │                      │
│   │  └─────────────────┘  │   │                      │
│   │  ┌─────────────────┐  │   │                      │
│   │  │   <section>     │  │   │                      │
│   │  └─────────────────┘  │   │                      │
│   │  ┌─────────────────┐  │   │                      │
│   │  │   <figure>      │  │   │                      │
│   │  │  <figcaption>   │  │   │                      │
│   │  └─────────────────┘  │   │                      │
│   └───────────────────────┘   │                      │
│                               │                      │
├───────────────────────────────┴──────────────────────┤
│                      <footer>                        │
│          (Copyright, Contact, Links)                 │
└──────────────────────────────────────────────────────┘

1. <section> · Thematic Grouping of Content

What is it? A <section> groups related content together under a theme. According to the HTML standard, a section is "a thematic grouping of content, typically with a heading."

Real-world analogy: A chapter in a book. Chapter 1 covers one topic. Chapter 2 covers another. Each chapter is a section.

When to use <section>:

• Chapters of a long article
• Introduction, Body, and Conclusion parts of an essay
• Different topics on a single page (e.g., "About Us", "Our Services", "Contact")
• News categories (Sports, Finance, Technology)

Simple Example:

<section>
  <h2>Introduction to Photosynthesis</h2>
  <p>Photosynthesis is the process by which plants make food using sunlight.</p>
</section>

Expected output on the page:

Introduction to Photosynthesis
Photosynthesis is the process by which plants make food using sunlight.

Two sections example (like on a real page):

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization
  working on issues regarding the conservation, research and restoration of
  the environment, formerly named the World Wildlife Fund. WWF was founded
  in 1961.</p>
</section>

<section>
  <h1>WWF's Panda Symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of
  WWF originated from a panda named Chi Chi that was transferred from the
  Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

Expected output on the page:

WWF
The World Wide Fund for Nature (WWF) is an international organization working
on issues regarding the conservation, research and restoration of the environment,
formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF's Panda Symbol
The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo
to the London Zoo in the same year of the establishment of WWF.

Thinking Prompt: What would happen to readability if we put both of these sections in plain <div> containers instead? The content would look the same visually · but the meaning would be lost to browsers and screen readers.

2. <article> · Independent, Self-Contained Content

What is it? An <article> contains content that could stand alone and still make perfect sense, even if you removed it from the rest of the page. It is independent.

Real-world analogy: A newspaper article. You can clip a single article from a newspaper and read it anywhere. It makes sense on its own. You do not need the rest of the paper.

When to use <article>:

• Blog posts
• News stories
• Forum posts
• Product cards in a shop
• User comments
• Any piece of content that could be shared or syndicated independently

Simple Example · One blog post:

<article>
  <h2>How to Grow Tomatoes at Home</h2>
  <p>Growing tomatoes is easier than you think. All you need is a sunny spot,
  good soil, and regular watering. Here are the basic steps...</p>
</article>

Expected output:

How to Grow Tomatoes at Home
Growing tomatoes is easier than you think. All you need is a sunny spot, good
soil, and regular watering. Here are the basic steps...

Multiple articles example · Browser comparison page:

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008.
  Chrome is the world's most popular web browser today!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is an open-source web browser developed by Mozilla.
  Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
  Microsoft Edge replaced Internet Explorer.</p>
</article>

Expected output:

Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is
the world's most popular web browser today!

Mozilla Firefox
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has
been the second most popular web browser since January, 2018.

Microsoft Edge
Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.

Styled articles example with CSS:

You can style <article> with CSS to make each one look like a card. Here is the full code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .all-browsers {
      margin: 0;
      padding: 5px;
      background-color: lightgray;
    }

    .all-browsers > h1,
    .browser {
      margin: 10px;
      padding: 5px;
    }

    .browser {
      background: white;
    }

    .browser > h2, p {
      margin: 4px;
      font-size: 90%;
    }
  </style>
</head>
<body>

  <article class="all-browsers">
    <h1>Most Popular Browsers</h1>

    <article class="browser">
      <h2>Google Chrome</h2>
      <p>Google Chrome is a web browser developed by Google, released in 2008.
      Chrome is the world's most popular web browser today!</p>
    </article>

    <article class="browser">
      <h2>Mozilla Firefox</h2>
      <p>Mozilla Firefox is an open-source web browser developed by Mozilla.
      Firefox has been the second most popular web browser since January, 2018.</p>
    </article>

    <article class="browser">
      <h2>Microsoft Edge</h2>
      <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
      Microsoft Edge replaced Internet Explorer.</p>
    </article>
  </article>

</body>
</html>

What you will see in the browser: A light gray card labelled "Most Popular Browsers" containing three white inner cards · one for each browser.

Important Note: Notice that <article> elements can be nested inside each other. The outer <article> represents the whole comparison page. The inner <article> elements each represent one independent browser entry. This is perfectly valid.

Can <article> and <section> Be Nested Inside Each Other?

Yes! And this often confuses beginners. Let us clarify:

• A <section> can contain multiple <article> elements (e.g., a "News" section with multiple news articles)
• An <article> can contain <section> elements (e.g., a long blog post divided into sections: Introduction, Body, Conclusion)

There is no strict rule about which one goes "outside." The choice depends on whether the content is independent (use <article>) or just thematically grouped (use <section>).

3. <header> · Introductory Content

What is it? A <header> represents introductory content or a group of navigational links. It typically appears at the top of a page or at the top of a section/article.

Real-world analogy: The cover page of a book or the top of a letter. It introduces what follows.

What goes inside <header>:

• Site logo and brand name
• One or more headings (<h1> through <h6>)
• Navigation links (<nav>)
• Author information
• Publication date

Key rule: You can have multiple <header> elements on one page · one for the overall page, and one inside each <article> to introduce that article. However, you cannot place a <header> inside a <footer>, an <address>, or another <header>.

Simple page header example:

<header>
  <h1>My Cooking Blog</h1>
  <p>Recipes, tips, and stories from my kitchen</p>
</header>

Expected output:

My Cooking Blog
Recipes, tips, and stories from my kitchen

Article header example:

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Expected output:

What Does WWF Do?
WWF's mission:
WWF's mission is to stop the degradation of our planet's natural environment, and
build a future in which humans live in harmony with nature.

Thinking Prompt: Notice the <header> is inside an <article> here. This is the article's own header · introducing just that article. The same element can be used at page level AND inside content blocks.

4. <footer> · Closing Content

What is it? A <footer> defines the end section of a document, page, or content block. It typically contains supporting information that comes after the main content.

Real-world analogy: The last page of a book · copyright information, "About the Author," references, and index.

What goes inside <footer>:

• Author name
• Copyright notice
• Contact information
• Links to privacy policy, terms of use
• Back-to-top links
• Related documents
• Sitemap links

Key rule: Like <header>, you can have multiple <footer> elements on one page.

Simple footer example:

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Expected output:

Author: Hege Refsnes
hege@example.com   (clickable email link)

Full page footer example:

<footer>
  <p>&copy; 2025 TechBlog Inc. All rights reserved.</p>
  <p>
    <a href="/privacy">Privacy Policy</a> |
    <a href="/terms">Terms of Use</a> |
    <a href="/contact">Contact Us</a>
  </p>
</footer>

Expected output:

© 2025 TechBlog Inc. All rights reserved.
Privacy Policy | Terms of Use | Contact Us   (all clickable links)

5. <nav> · Navigation Links

What is it? A <nav> element defines a block of navigation links · links that help users move around your website.

Real-world analogy: The index at the front of a textbook or the menu bar at the top of a restaurant menu.

Important rule: NOT every group of links on your page belongs inside <nav>. The <nav> element is intended only for major blocks of navigation links · like your main menu, a sidebar navigation, or a table of contents. Links inside <footer> (like "Privacy Policy") are usually NOT put in <nav>.

Browsers and screen readers use <nav> to help users jump directly to the navigation or skip past it. This is a major accessibility benefit.

Simple navigation example:

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Expected output (links displayed in a row):

HTML | CSS | JavaScript | jQuery

(Each word is a clickable link)

Navigation list example (common real-world pattern):

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

Expected output:

• Home
• About
• Blog
• Contact
(Each item is a clickable link)

6. <aside> · Secondary / Sidebar Content

What is it? An <aside> contains content that is related to the surrounding content but not the main point. It is content you could remove without breaking the main story, but it adds extra value.

Real-world analogy: The sidebar in a newspaper article · extra facts, a quote, a related photo, or a "Did You Know?" box beside the main story.

When to use <aside>:

• Biography of the author alongside an article
• Glossary definitions for terms in the main text
• Advertisements that relate to the page topic
• Related links or "You might also like" boxes
• Statistics or quick facts that supplement the main content

Simple aside example:

<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
  <h4>Epcot Center</h4>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting
  attractions, international pavilions, award-winning fireworks and seasonal
  special events.</p>
</aside>

Expected output:

My family and I visited The Epcot center this summer. The weather was nice, and
Epcot was amazing! I had a great summer together with my family!

Epcot Center
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.

Styled aside example (floated as a sidebar):

<!DOCTYPE html>
<html>
<head>
  <style>
    aside {
      width: 30%;
      padding-left: 15px;
      margin-left: 15px;
      float: right;
      font-style: italic;
      background-color: lightgray;
    }
  </style>
</head>
<body>

  <p>My family and I visited The Epcot center this summer. The weather was
  nice, and Epcot was amazing! I had a great summer together with my family!</p>

  <aside>
    <p>The Epcot center is a theme park at Walt Disney World Resort featuring
    exciting attractions, international pavilions, award-winning fireworks and
    seasonal special events.</p>
  </aside>

  <p>My family and I visited The Epcot center this summer. The weather was
  nice, and Epcot was amazing! I had a great summer together with my family!</p>
  <p>My family and I visited The Epcot center this summer. The weather was
  nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

What you will see in the browser: The <aside> appears as a grey box floating on the right side of the page. The main paragraphs wrap around it on the left · exactly like a newspaper sidebar.

Thinking Prompt: What if you put the aside content in a plain <div>? Visually it might look the same with the CSS, but a screen reader would not know it is supplemental content · it would read it as if it were part of the main story.

7. <figure> and <figcaption> · Illustrated Content

What is <figure>? The <figure> element wraps self-contained content that is referenced from the main text, such as:

• Photographs
• Diagrams
• Illustrations
• Code listings
• Charts and graphs

What is <figcaption>? The <figcaption> element goes inside <figure> and provides a visible caption or description for the figure. It can be placed at the very start or very end of the <figure> element.

Real-world analogy: In a science textbook, figures have numbered captions: "Figure 3: The water cycle showing evaporation, condensation, and precipitation." The <figure> is the image + caption block, and <figcaption> is the caption text.

Simple figure example:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

Expected output:

[An image of Trulli stone houses is displayed]
Fig1. - Trulli, Puglia, Italy.

(The caption appears below the image)

Caption at the top example:

<figure>
  <figcaption>The Human Heart — anterior view</figcaption>
  <img src="heart.jpg" alt="Human heart diagram">
</figure>

Expected output:

The Human Heart — anterior view
[Heart diagram image displayed below]

Why use <figure> instead of just <img>?

• It groups image and caption together as one semantic unit
• Screen readers understand that the caption describes the image
• If the figure is removed or moved (e.g., on mobile), it stays intact as a unit
• It is the proper HTML5 way to display captioned images

8. <main> · The Main Content of the Page

What is it? The <main> element contains the dominant, unique content of the page · the content that is specific to this page and not repeated across your website (unlike headers, footers, and navigation which are shared).

Real-world analogy: The main body text of a book page · not the page numbers, chapter headings, or margins, just the actual story content.

Rules:

• There should be only ONE <main> element per page
• It should NOT contain <header>, <footer>, <nav>, or <aside> elements
• It wraps the core, unique content of the current page

<main>
  <h1>Today's Top Stories</h1>

  <article>
    <h2>New Study Shows Exercise Improves Memory</h2>
    <p>Researchers at Harvard found that 30 minutes of daily exercise...</p>
  </article>

  <article>
    <h2>Tech Giant Launches New Phone</h2>
    <p>The new model includes an improved camera and longer battery life...</p>
  </article>
</main>

9. <mark> · Highlighted Text

What is it? The <mark> element highlights text · typically shown in yellow by browsers, like a yellow highlighter pen on paper.

Real-world analogy: Highlighting a sentence in a textbook to draw attention to it.

When to use <mark>:

• Showing search results (highlighting the matched search term)
• Drawing attention to important definitions
• Pointing out key passages in a document

Simple example:

<p>Do not forget to <mark>buy milk</mark> on the way home.</p>

Expected output:

Do not forget to [buy milk] on the way home.

(The words "buy milk" appear with a yellow background highlight)

Search result example:

<p>The results for your search for <mark>HTML5</mark> are shown below.</p>

Expected output:

The results for your search for [HTML5] are shown below.
(HTML5 is highlighted in yellow)

10. <time> · Date and Time

What is it? The <time> element represents a specific time or date in a machine-readable format. This helps search engines, calendar apps, and assistive technologies understand date/time information.

Real-world analogy: Writing a date on a letter · both the human-friendly format ("Monday, April 15th") and the machine-readable format ("2025-04-15") communicate the same date.

The datetime attribute: This attribute holds the machine-readable version of the date/time. Browsers show the text inside the <time> tags (human-friendly), while software reads the datetime attribute.

Simple time example:

<p>The concert is on <time datetime="2025-07-14">July 14th</time>.</p>

Expected output:

The concert is on July 14th.

(Visually looks normal, but the machine knows "2025-07-14")

More examples:

<!-- Just a date -->
<time datetime="2025-12-25">Christmas Day</time>

<!-- Date and time -->
<time datetime="2025-12-25T09:00">Christmas morning at 9 AM</time>

<!-- Time only -->
<time datetime="19:30">7:30 in the evening</time>

11. <details> and <summary> · Expandable Content

What is <details>? The <details> element creates a disclosure widget · content that is hidden by default and can be expanded or collapsed by the user with a click. No JavaScript needed!

What is <summary>? The <summary> element goes inside <details> and provides the visible clickable label that the user sees even when the content is collapsed.

Real-world analogy: An FAQ section where you see the question and click to reveal the answer.

Simple example:

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the standard language
  for creating web pages and web applications.</p>
</details>

Expected output (before clicking):

▶ What is HTML?

Expected output (after clicking the triangle):

▼ What is HTML?
HTML stands for HyperText Markup Language. It is the standard language
for creating web pages and web applications.