Semantic HTML — HTML & CSS Course

What you'll learn

You could build an entire site with nothing but <div>s — but you shouldn't. Semantic HTML uses elements that describe what their content means, which makes your pages more accessible, better for SEO, and far easier to maintain. Same look, dramatically better markup.

By the end you'll be able to:

Explain what makes HTML "semantic"
Structure a page with landmark elements
Choose between <article>, <section>, and <aside>
Know when a plain <div> or <span> is the right choice

What "semantic" means

A semantic element clearly describes its meaning to both the browser and the developer. <nav> says "this is navigation"; <div>says nothing at all. Compare these two structures — they can look identical, but only one tells the browser what each part is:

soup.html

<!-- Non-semantic "div soup" — the browser sees only boxes -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

semantic.html

<!-- Semantic — every element describes its role -->
<header>
  <nav>...</nav>
</header>

<main>
  <article>
    <h2>Post title</h2>
    <p>The article's content...</p>
  </article>
  <aside>Related links</aside>
</main>

<footer>
  <p>&copy; 2024 My Site</p>
</footer>

Key idea

Screen readers let users jump between landmarks — "skip to main content," "go to navigation." That only works if you use semantic elements. Search engines use them too, to understand your page. Semantics are accessibility and SEO you get almost for free.

Page landmarks

Four elements define the major regions of almost every page:

Element	Role
`<header>`	Introductory content — logo, site title, and often the nav
`<nav>`	A block of major navigation links
`<main>`	The page's primary, unique content — only one per page
`<footer>`	Closing content — copyright, links, contact

page-structure.html

Live preview

The landmark regions that structure a typical page.

Sectioning content

Inside <main>, three elements organise your content:

<article> — a self-contained piece that would make sense on its own: a blog post, a product card, a comment.
<section> — a thematic grouping of related content, usually with its own heading: a "Features" section, a chapter.
<aside> — content tangential to the main content: a sidebar, a callout, related links.

Note

A quick test: could this content stand alone in an RSS feed or be syndicated elsewhere? Then it's an <article>. Is it just a themed group of content within the page? That's a <section>. Every <section> and <article>should normally contain a heading.

div & span

Sometimes no semantic element fits — you just need a box to group things for styling or layout. That's exactly what <div> (block-level) and <span>(inline) are for: generic containers with no meaning. They're not "bad" — they're the right tool when the content has no semantic role. The mistake is using them instead of a semantic element that exists.

Recap & quick check

Key takeaways

Semantic elements describe what content means; <div>/<span> describe nothing.
Landmarks — <header>, <nav>, <main>, <footer> — define a page's major regions (one <main> per page).
<article> is self-contained; <section> is a themed group; <aside> is tangential content.
Semantics power accessibility (screen-reader landmarks) and SEO for free.
Use <div>/<span> only when no semantic element fits — for pure styling hooks.

Quick check

1. What is the main benefit of semantic HTML?

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

3. Which element best holds a self-contained blog post?

4. When is a <div> the right choice?

5. What does <aside> represent?

Your markup is meaningful and accessible. Next we tackle the most interactive part of HTML — forms and inputs.