What is Semantic HTML?

HTML elements are not just about how a page looks. They are about what the content means.

What “semantic” means

Semantic means “relating to meaning.” Semantic HTML is HTML that communicates the purpose of content, not just its visual appearance.

Compare these two approaches:

Non-semantic — structure without meaning:

<div class="header">
  <div class="title">My Blog</div>
</div>
<div class="content">
  <div class="post">
    <div class="post-title">First Post</div>
    <div class="post-body">Hello, world!</div>
  </div>
</div>
<div class="footer">Copyright 2025</div>

A browser can render this. But nothing in the markup says what any of it is. The class names are hints for humans reading the code — the browser and assistive technologies see only anonymous boxes.

Semantic — structure with meaning:

<header>
  <h1>My Blog</h1>
</header>
<main>
  <article>
    <h2>First Post</h2>
    <p>Hello, world!</p>
  </article>
</main>
<footer>Copyright 2025</footer>

Now <header>, <main>, <article>, and <footer> each communicate a purpose. No class names needed to convey that intent.

Why semantic HTML matters

Accessibility

Screen readers use semantic elements to help users navigate. A user can jump directly to <main> to skip the header, or navigate between <article> elements on a page. With a <div> soup, there are no landmarks to jump to.

Search engines

Search engines like Google use semantic structure to understand content hierarchy. An <h1> inside <article> inside <main> signals “this is the main topic.” A <div> inside a <div> inside a <div> does not.

Maintainability

When you or a teammate reads the code six months later, semantic HTML tells the story without requiring you to decode class names or comments.

Structure vs appearance

A common beginner confusion: semantic elements do look different by default in a browser. <h1> is big, <p> has spacing, <strong> is bold. But that default styling is not the point — it is a side effect.

The point is meaning. CSS can make <h1> look tiny or <p> look enormous. The semantic purpose does not change.

Exercise

Open index.html in VS Code.

Look at your current <body>. It contains headings, paragraphs, links, and an image — but they are all sitting directly inside <body> with no containers.

Write down, in plain words (not code), answers to these three questions:

Which part of your page is the main topic/introduction?
Are there distinct sections with separate subtopics?
Is there anything that could be a “header” (site name, navigation) or “footer” (copyright, contact)?

You do not need to change the file yet. This is preparation for the next lesson. Keep your notes — you will use them to restructure the page as you work through this module.

Recap

Semantic HTML uses elements that describe the meaning of content, not just its appearance.
It benefits accessibility (screen readers can navigate landmarks), SEO (search engines understand structure), and maintainability (code is self-documenting).
The goal is meaning first. CSS handles appearance.