Semantic HTML - structure with meaning - HTML from Scratch

What is semantic HTML?

Semantic HTML means choosing tags that describe the meaning of the content, not just its appearance. A <div> says nothing about what it contains, but a <nav> clearly says "this is navigation" and an <article> says "this is independent content."

Let's compare two ways of writing the same thing:

<!-- Without semantics (divs only) -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="post-title">My article</div>
    <div class="post-body">Content here...</div>
  </div>
</div>

<!-- With semantics -->
<header>
  <nav aria-label="Main">
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>My article</h1>
    <p>Content here...</p>
  </article>
</main>

Both can look identical with CSS, but the semantic version communicates structure and purpose to browsers, screen readers, and search engines.

Why does it matter?

1. Accessibility

Screen readers (such as NVDA or VoiceOver) create a "map" of the page using semantic elements. A blind user can jump directly to <main>, navigate between <article> elements, or list all <nav> blocks on the page.

2. SEO

Google interprets semantic structure to understand the hierarchy and relevance of content. An <h1> inside an <article> carries more weight than text inside a generic <div>.

3. Maintainability

Reading <header> and <aside> is much clearer than reading <div class="header"> and <div class="sidebar">. The code documents itself.

Structural semantic elements

Represents introductory content. It can be the page header or a section header:

<!-- Page header -->
<header>
  <h1>Site name</h1>
  <nav>...</nav>
</header>

<!-- Article header -->
<article>
  <header>
    <h2>Post title</h2>
    <time datetime="2025-06-15">June 15, 2025</time>
  </header>
</article>

main

The main content of the page. There should be only one <main> per page and it should not be nested inside <article>, <aside>, <header>, <footer>, or <nav>:

<body>
  <header>...</header>
  <main>
    <!-- All main content goes here -->
  </main>
  <footer>...</footer>
</body>

article

Content that makes sense on its own, independent of the rest of the page. Examples: a blog post, a comment, a product, a news card:

<article>
  <h2>How to learn HTML</h2>
  <p>HTML is the base language of the web...</p>
</article>

section

Groups thematically related content. Unlike <article>, a <section> generally does not make sense outside its context:

<article>
  <h1>HTML Guide</h1>
  <section>
    <h2>Chapter 1: Introduction</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Chapter 2: Basic Elements</h2>
    <p>...</p>
  </section>
</article>

aside

Content tangentially related to the main content. Typically sidebars, pull quotes, or supplementary information blocks:

<aside aria-label="Fun facts">
  <h3>Did you know...</h3>
  <p>HTML was created by Tim Berners-Lee in 1991.</p>
</aside>

Page or section footer. Contains information such as copyright, legal links, or contact details:

<footer>
  <p>&copy; 2025 My Company</p>
  <nav aria-label="Legal links">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Text semantic elements

In addition to structural elements, HTML offers semantic elements for text:

Element	Meaning
`<time>`	Machine-readable date or time
`<address>`	Contact information
`<mark>`	Highlighted or relevant text
`<abbr>`	Abbreviation with expanded title
`<cite>`	Title of a cited work
`<blockquote>`	Extended quote from another source
`<details>`	Collapsible content
`<summary>`	Visible summary of the details

Example with time

<p>Published on <time datetime="2025-03-15T10:30:00">March 15, 2025</time></p>

The datetime attribute provides the machine-readable value, while the visible text can have any format.

Golden rules of semantic HTML

One <h1> per page and headings in hierarchical order
One <main> per page for the main content
Use <nav> only for important navigation blocks, not for just any group of links
Do not use semantic elements only for their visual style — a <blockquote> is not for indenting text, it is for actual quotes
When in doubt between <div> and a semantic element, ask yourself whether the content has a specific role

Practice

Refactor a div-based page: Take a page where everything is built with <div> elements and rewrite it using <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> as appropriate.
Create a blog page: Build the structure of a blog post using <article> with its <header> (title, <time> with datetime) and at least two <section> elements for different parts of the content.
Add text semantic elements: Include a <details> with <summary>, a <blockquote> with <cite>, and an <abbr> with its expanded title attribute in your page.

In the next lesson, we will learn the fundamentals of web accessibility with HTML.