Hey there!
If you’ve been writing HTML for a while, you may have found yourself using a lot of <div> tags. While that works, your code can get messy and hard to understand. That’s where HTML5 semantic elements come in. They make your markup cleaner, more meaningful, and more accessible.
In this post, we’ll break down four of the most useful HTML5 semantic tags: <header>, <main>, <article>, and <footer>. You’ll learn what they do, when to use them, and how they work together in real-world layouts.
Let’s dive in!
Why Use Semantic Elements?
Semantic HTML tells the browser—and developers—what each part of your page means.
Instead of:
<div class="header">...</div>
You can write:
<header>...</header>
Benefits of semantic elements:
- Improved readability: Other developers (and you in the future) will thank you.
- Accessibility: Screen readers and assistive technologies can better navigate your page.
- SEO: Search engines understand your content structure more clearly.
1. <header> – The Top of the Page or Section
What is a <header>?
The <header> element represents introductory content—like a logo, page title, or navigation links. It can be used at the top of the page or within a section or article.
Think of it as the welcome mat for any part of your page.
Basic Example
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
Nested Header Example (inside an article)
<article>
<header>
<h2>10 HTML Tips</h2>
<p>Published on May 15, 2025 by Irshad</p>
</header>
<p>Here's how you can improve your HTML skills...</p>
</article>
You can use multiple <header> elements on a page—just not inside <footer> or <address>.
2. <main> – The Main Content of the Page
What is <main>?
The <main> element represents the central content of your webpage—the stuff that’s unique to the page, excluding things like sidebars, nav bars, or footers.
Use it only once per page.
Example
<main>
<h2>Latest Posts</h2>
<article>
<h3>Learning HTML5</h3>
<p>Semantic tags make HTML cleaner and more meaningful...</p>
</article>
</main>
Keep in mind: <main> should not be a descendant of <header>, <footer>, <article>, or <aside>.
3. <article> – Independent Pieces of Content
What is an <article>?
The <article> element is used for independent, self-contained content that can be distributed or reused on its own—like blog posts, news articles, or user comments.
Example: Blog Layout
<main>
<article>
<header>
<h2>How to Use Semantic HTML</h2>
<p>By Jane Doe, May 10, 2025</p>
</header>
<p>Semantic HTML improves accessibility and SEO...</p>
<footer>
<p>Tags: HTML5, Semantics</p>
</footer>
</article>
</main>
Each <article> can contain its own <header> and <footer>, which is great for structuring posts, comments, or product cards.
4. <footer> – Wrapping Things Up
What is a <footer>?
The <footer> element represents the closing or summary content of a section or the entire page. It often contains:
- Copyright
- Contact info
- Related links
- Navigation
Page Footer Example
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Use</a>
</nav>
</footer>
Article Footer Example
<article>
<p>This is a blog post.</p>
<footer>
<p>Filed under: HTML, Web Dev</p>
</footer>
</article>
Like <header>, you can have multiple <footer> elements—just not inside another <footer>.
Putting It All Together: Full Semantic Page Layout
Let’s build a basic layout using all four elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Semantic Site</title>
</head>
<body>
<header>
<h1>My Semantic Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<header>
<h2>Understanding Semantic HTML</h2>
<p>Posted by Irshad on May 16, 2025</p>
</header>
<p>Using HTML5 semantic elements improves your site’s structure...</p>
<footer>
<p>Category: HTML5</p>
</footer>
</article>
<article>
<header>
<h2>Why `<main>` Matters</h2>
<p>Posted by Irshad on May 14, 2025</p>
</header>
<p>The `<main>` tag helps browsers and screen readers understand your content...</p>
<footer>
<p>Category: Accessibility</p>
</footer>
</article>
</main>
<footer>
<p>© 2025 My Semantic Blog</p>
</footer>
</body>
</html>
This layout clearly separates:
- The site-wide header and navigation
- The main content area with multiple self-contained articles
- A global footer
Conclusion: Why This Matters
Using semantic elements like <header>, <main>, <article>, and <footer> is more than just writing pretty code—it’s about making your pages accessible, SEO-friendly, and easier to maintain.
What You Learned:
- What each element means and where to use it
- How to structure a clean, semantic page
- How semantic elements help screen readers and search engines
Next Steps?
Want to level up even more? Try adding other semantic elements like <section>, <aside>, and <nav> to your pages. Or, ask me how to make your layout responsive with CSS Grid or Flexbox!
Happy coding
One thought on “9. HTML5 Semantic Elements: header, main, article, and footer”