Semantic HTML
Use elements that describe the meaning of your content.
Syntax
<header>, <nav>, <main>, <footer>Semantic HTML means using elements that clearly describe their meaning to both the browser and the developer.
For example, a <nav> element clearly holds navigation links, while a plain <div> tells you nothing.
Why it matters
- Better accessibility for screen readers.
- Better SEO for search engines.
- Cleaner, more readable code.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer replaces generic <div> wrappers with <nav>, <main>, and <footer> so browsers and screen readers understand the page structure.
- An SEO engineer audits a site to ensure key content regions use semantic tags so search crawlers correctly weight each section.
- An accessibility tester uses browser dev tools to verify that semantic landmark elements are present for keyboard navigation.
More examples
Non-semantic vs semantic markup
Semantic tags communicate purpose to browsers, search engines, and assistive technologies; divs do not.
<!-- Non-semantic: meaningless divs -->
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Semantic: browser understands roles -->
<header>...</header>
<main>...</main>
<footer>...</footer>Page structure using semantic elements
A full page using header, nav, main, article, aside, and footer creates a machine-readable document outline.
<body>
<header><nav>...</nav></header>
<main>
<article>
<h1>Post Title</h1>
<p>Body text...</p>
</article>
<aside>Related links</aside>
</main>
<footer>Copyright 2025</footer>
</body>Section vs div for grouped content
<section> marks a thematically grouped content block; <div> is a generic container used only for styling.
<!-- Use section when the content has a heading and a distinct topic -->
<section>
<h2>Our Features</h2>
<p>We offer fast, accessible tools.</p>
</section>
<!-- Use div only for styling/layout with no semantic meaning -->
<div class="card-grid">
<div class="card">...</div>
</div>
Discussion