Why Semantic HTML Matters
Semantic HTML uses elements that clearly describe their meaning to both the browser and the developer. Instead of using generic <div> tags for everything, semantic elements like <header>, <nav>, and <article> provide context about your content.
This approach improves accessibility for screen readers, enhances SEO, and makes your code more maintainable.
Represents introductory content, typically containing headings, logos, or navigation.
<header>
<h1>Website Title</h1>
<nav>...</nav>
</header>
Best Practice:
Use one <header> per section or page. Can appear multiple times in a document.
Defines a section of navigation links. Not all links need to be in <nav>.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Best Practice:
Reserve for major navigation blocks. Skip for minor links like "terms of service".
Contains the dominant content of the document. Should be unique per page.
<main>
<article>
<h2>Article Title</h2>
<p>Content here...</p>
</article>
</main>
Best Practice:
Only one <main> per page. Don't include repeated content like headers or footers.
Represents self-contained composition that can be independently distributed.
<article>
<header>
<h2>Blog Post Title</h2>
<time datetime="2026-02-05">Feb 5, 2026</time>
</header>
<p>Post content...</p>
</article>
Best Practice:
Use for blog posts, news stories, product cards, or user comments.
Generic section of a document with thematic grouping of content.
<section>
<h2>Features</h2>
<p>Our product features...</p>
<!-- Feature items -->
</section>
Best Practice:
Always include a heading. Don't use just for styling—use <div> instead.
Contains content indirectly related to the main content (sidebars, pull quotes).
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Related Topic 1</a></li>
</ul>
</aside>
Best Practice:
Perfect for sidebars, advertising, or supplementary information.
Complete Page Structure Example
Here's how semantic elements work together to create a well-structured webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Page</title>
</head>
<body>
<header>
<h1>Site Title</h1>
<nav><!-- Main navigation --></nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Related info...</p>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>