HTML Semantic Elements
Up until now we have mostly used <div> when we needed a generic container. Semantic elements solve a specific problem they give structural meaning to sections of your page so browsers search engines and screen readers know exactly what role each part plays not just how it should be arranged. In this post we are rebuilding a typical webpage layout using proper semantic tags instead of generic divs. Lets get into it.
Quick Theory: Semantic vs Non-Semantic Tags
A non-semantic tag like <div> or <span> tells the browser nothing about what it contains its just a box. A semantic tag like <header> or <article> tells the browser exactly what kind of content is inside it. Both can look completely identical after CSS styling but semantic tags carry real meaning underneath. Lets build with them directly.
Practical: The <header> Element
<header>
<h1>Daily Tech News</h1>
<p>Your source for the latest in technology</p>
</header>Try this in your test file. <header> is meant for introductory content at the top of a page or a section typically a logo site title or tagline. Note this is different from the <head> tag we covered back in post 2 <head> holds metadata while <header> is a visible part of the page.
Practical: The <nav> Element
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
</ul>
</nav>Add this below your header and test it. <nav> wraps your main navigation links. This is genuinely useful for accessibility since screen readers can jump straight to the navigation section of a page instead of having to listen through everything else first.
Practical: The <main> Element
<main>
<h2>Todays Top Stories</h2>
<p>Here's what's making headlines today across the tech world.</p>
</main><main> wraps the primary content of your page the stuff thats unique to that specific page not shared across every page on your site (like the navigation or footer). A page should only ever have one <main> element.
Practical: The <article> Element
<article>
<h2>New Smartphone Released Today</h2>
<p>A major tech company unveiled its latest smartphone this morning, featuring an improved camera and longer battery life.</p>
</article>Try this <article> is meant for a self contained piece of content that could reasonably stand on its own like a blog post a news story or a forum comment. A good test if you could pull this content out and republish it somewhere else on its own and it would still make complete sense it belongs in an <article>.
Try This: Multiple Articles on One Page
<main>
<article>
<h2>New Smartphone Released Today</h2>
<p>A major tech company unveiled its latest smartphone this morning.</p>
</article>
<article>
<h2>Local Startup Raises $2 Million</h2>
<p>A local software startup announced a new funding round this week.</p>
</article>
</main>Build this and notice each news story is its own independent <article> both sitting inside the shared <main> element. This is exactly how a real news homepage is structured under the hood.
Practical: The <section> Element
<section>
<h2>Weather Update</h2>
<p>Sunny skies expected throughout the week with highs near 75°F.</p>
</section><section> groups related content together under a common theme but unlike <article> it does not need to make sense entirely on its own outside the page. Think of sections as chapters within a larger page rather than standalone pieces of content.
Try This: Sections Inside an Article
<article>
<h2>Complete Guide to Home Gardening</h2>
<section>
<h3>Choosing the Right Soil</h3>
<p>Different plants require different soil compositions for healthy growth.</p>
</section>
<section>
<h3>Watering Schedules</h3>
<p>Most vegetables need about an inch of water per week.</p>
</section>
</article>Try building this it shows how <section> can nest inside <article> to break a longer piece of content into logical parts similar to how chapters break up a book.
Practical: The <aside> Element
<aside>
<h3>Related Stories</h3>
<ul>
<li><a href="#">5 Tips for Better Battery Life</a></li>
<li><a href="#">How Smartphone Cameras Work</a></li>
</ul>
</aside>Try this <aside> is meant for content thats related but tangential to the main content like a sidebar related links or a pull quote. Its not the main point of the page but it adds useful supplementary context.
Practical: The <footer> Element
<footer>
<p>© 2026 Daily Tech News. All rights reserved.</p>
<p><a href="#">Privacy Policy</a> | <a href="#">Contact Us</a></p>
</footer><footer> holds closing content for a page or a section typically copyright notices contact links or secondary navigation. Just like <header> it can be used both at the bottom of an entire page and at the bottom of an individual <article> or <section>.
Practical: Building a Complete Semantic Page Layout
Lets put every piece together into one full, realistic page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily Tech News</title>
</head>
<body>
<header>
<h1>Daily Tech News</h1>
<p>Your source for the latest in technology</p>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Startups</a></li>
</ul>
</nav>
<main>
<article>
<h2>New Smartphone Released Today</h2>
<p>A major tech company unveiled its latest smartphone this morning featuring an improved camera and longer battery life.</p>
</article>
<article>
<h2>Local Startup Raises $2 Million</h2>
<p>A local software startup announced a new funding round this week aimed at expanding their engineering team.</p>
</article>
<aside>
<h3>Related Stories</h3>
<ul>
<li><a href="#">5 Tips for Better Battery Life</a></li>
<li><a href="#">How Smartphone Cameras Work</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Daily Tech News. All rights reserved.</p>
</footer>
</body>
</html>Build this exact page and open it in your browser. Even with zero CSS applied you will notice it already reads like a real news website structurally header up top navigation below it main stories in the middle related links off to the side and a footer at the bottom. Thats the actual layout of a huge number of real websites before any design work happens.
Quick Theory: Why This Matters for SEO and Accessibility
Search engines use semantic tags to better understand which part of your page is the actual main content worth ranking versus navigation or sidebar clutter. Screen readers use these same tags to let users jump directly to the section they care about skipping straight to main content instead of listening through the entire navigation menu first. Both of these benefits come essentially for free just by choosing the right tag instead of a generic <div>.
Practical: Semantic vs Non-Semantic Comparison
<!-- Non-semantic version -->
<div class="header">
<div class="title">My Blog</div>
</div>
<div class="nav">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
<!-- Semantic version -->
<header>
<h1>My Blog</h1>
</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Both versions can be styled to look absolutely identical using CSS. But the semantic version communicates real structure without relying on class names that a browser or screen reader has no way of actually understanding since class names are just arbitrary text as far as the browser is concerned.
Mistake to Avoid: Using <section> for Everything
<!-- Overused -->
<section>
<p>Just a random paragraph with no real grouping purpose.</p>
</section>Do not wrap every single piece of content in a <section> just out of habit. If a chunk of content does not represent a distinct thematically grouped part of the page a plain <div> is often the more honest choice.
Mistake to Avoid: Multiple <main> Elements
<!-- Don't do this -->
<main>...</main>
<main>...</main>A page should only ever have a single <main> element. If you find yourself wanting a second one, what you actually need is probably a <section> or <article> nested inside your existing <main>.
Your Turn: Practice Exercise
- Build a personal portfolio page using semantic tags throughout.
- Add a
<header>with your name and a short tagline. - Add a
<nav>with links to About Projects and Contact. - Inside
<main>add two<article>elements describing two projects you have worked on (real or imagined). - Add an
<aside>listing your top skills. - Add a
<footer>with a copyright line and a contact link.
Conclusion
Semantic elements do not change how your page looks by default but they change how much a browser search engine, or screen reader actually understands about your contents structure. If you built the examples in this post, you now know how to lay out a real webpage using <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> the same tags used across most professionally built websites today. In the next post we will look at HTML Audio and Video Tags where we will embed real media directly into a webpage.