A semantic tag is a tag that clearly describes its purpose or the type of content inside it. If the tag name already tells you what kind of content it holds, that’s semantic.
Examples:
| Semantic Tag | What it means |
<h1> | This is a main heading |
<p> | This is a paragraph |
<img> | This is an image |
<table> | This is tabular data |
These are all semantic because the tag name itself tells you what kind of thing it is.
So… What’s Non-Semantic?
<div> and <span> are non-semantic.
They don’t describe what the content is—they just help group or style it.
You have to guess what’s inside unless you read the content or comments.
Real Semantic Layout Tags
Let’s say we’re building the Scarlett Johansson page again.
Here’s how we’d do it with semantic layout tags:
<header>
<h1>Scarlett Johansson</h1>
</header>
<nav>
<ul>
<li><a href="#early-life">Early life</a></li>
<li><a href="#career">Career</a></li>
</ul>
</nav>
<main>
<section id="early-life">
<h2>Early life</h2>
<p>Scarlett was born in New York...</p>
</section>
<section id="career">
<h2>Career</h2>
<p>She began acting as a child...</p>
</section>
</main>
<aside>
<img src="scarlett.jpg" width="200" />
<p><strong>Born:</strong> November 22, 1984</p>
<p><strong>Occupation:</strong> Actress, Singer</p>
</aside>
<footer>
<p>Last updated: 2025</p>
</footer>Here’s What Each Tag Means:
<header>— Top of the page, usually holds the title or site logo<nav>— Navigation links or table of contents<main>— The core content of the page (should only appear once)<section>— A thematic group of content (like “Career”, “Awards”)<aside>— Extra info like sidebars, quotes, or the info box<footer>— Bottom of the page (copyright, contact, etc.)
Why Use Semantic Tags?
- Makes your code easier to read
- Helps search engines understand your content better
- Helps screen readers (accessibility for blind users)
- Gives your layout clear structure without needing extra comments
Final Thought
You could build a whole site with just <div>s. But using semantic tags shows you know what each part of the page actually means.
It’s like writing with labels instead of just boxes.
And now that you understand both—<div> for grouping, and semantic tags for meaning—you can build clean, accessible, professional-quality web pages.