Semantic HTML: Header, Nav, Main, Article, and Footer
Learn semantic HTML and how to use header, nav, main, section, article, aside, and footer to build better structured and SEO-friendly websites.
RazakTerra- Reading time
- 1 min read
- Comments
- Discussion
On this page
Semantic HTML means using tags that describe the meaning of the content, not just how it looks. Instead of wrapping everything in <div>, you can use more meaningful tags that help browsers, search engines, and screen readers understand your page better.
Common Semantic Tags
<header> for introductory content or navigation
<header>
<h1>My Website</h1>
<p>Welcome to my personal site</p>
</header><nav> for main navigation links
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav><main> the main content of the page (should only be used once)
<main>
<h2>About Me</h2>
<p>This is the main content of the page.</p>
</main><article> for self-contained content like blog posts or news
<article>
<h2>My First Blog Post</h2>
<p>This is a complete article that can stand on its own.</p>
</article><section> for grouping related content
<section>
<h2>Skills</h2>
<p>HTML, CSS, and JavaScript</p>
</section><aside> for side content like sidebars or tips
<aside>
<p>Related tip: Learn semantic HTML early!</p>
</aside><footer> — for footer information
<footer>
<p>© 2026 My Website</p>
</footer>Simple Example
<body>
<header>
<h1>Alex's Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Learning HTML</h2>
<p>Semantic tags make your code clearer.</p>
</article>
</main>
<footer>
<p>© 2026 Alex</p>
</footer>
</body>Quick Tips
- Use semantic tags when they match the meaning of the content.
- Don’t use them just for styling, that’s what CSS is for.
- One
<main>per page is the best practice. - Semantic HTML improves both SEO and accessibility.
Written by
Razak
Writes about the web, slowly, and builds small tools on the side.
Keep reading
Read next
1 minBest Practices for Writing Clean and Valid HTML
A collection of HTML best practices including proper indentation, naming, W3C validation, and common beginner mistakes you should avoid.
Read article
2 minGetting to Know HTML Iframe: How to Embed YouTube and Google Maps
How to use the HTML <iframe> tag to embed content from other sites, like a YouTube video or a Google Map, inside your own page.
Read article
1 minHow to Create Forms in HTML for Beginners
A beginner's guide to HTML forms: how the <form> tag sends data for logins, sign-ups and contact messages, starting from the basics.
Read article
Discussion
Comments
Loading comments…