Semantic HTML: Writing Meaningful Markup
Learn how to use semantic HTML elements to create accessible, SEO-friendly websites.
What is Semantic HTML?
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 tell search engines and assistive technologies what each part of your page represents.
Why Semantic HTML Matters
Using semantic HTML provides several benefits:
- Improved Accessibility: Screen readers can navigate your page more effectively
- Better SEO: Search engines understand your content structure
- Easier Maintenance: Code is more readable and self-documenting
- Future-Proofing: Semantic markup is more likely to work with future technologies
Key Semantic Elements
Document Structure Elements
<header>: Introductory content or navigation links
<header>
<h1>Site Title</h1>
<nav><!-- Navigation --></nav>
</header>
<nav>: Navigation links
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>: The main content of the document
<main>
<article><!-- Primary content --></article>
</main>
<footer>: Footer content
<footer>
<p>© 2026 Your Company</p>
</footer>
Content Sectioning
<article>: Self-contained content that could stand alone
<article>
<h2>Blog Post Title</h2>
<p>Article content...</p>
</article>
<section>: Thematic grouping of content
<section>
<h2>Features</h2>
<p>Content about features...</p>
</section>
<aside>: Content tangentially related to surrounding content
<aside>
<h3>Related Articles</h3>
<ul><!-- Related links --></ul>
</aside>
Complete Page Structure Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<time datetime="2026-01-15">January 15, 2026</time>
</header>
<p>Article content goes here...</p>
<footer>
<p>Written by Author Name</p>
</footer>
</article>
<aside>
<h3>About the Author</h3>
<p>Bio information...</p>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>
Text-Level Semantic Elements
<time datetime="2026-01-15">January 15, 2026</time>
<address>123 Main Street, City</address>
<cite>Book Title</cite>
<code>console.log('Hello');</code>
<mark>Highlighted text</mark>
<abbr title="HyperText Markup Language">HTML</abbr>
Best Practices
- Use only one
<main>element per page - Don't use semantic elements just for styling
- Nest elements logically (articles within sections, etc.)
- Use
<div>only when no semantic element fits - Include ARIA roles only when necessary
Tools and Resources
Use our HTML Layout Generator to create semantic page structures quickly. For structured data, check out our Schema Generator.