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.
Related Tools
HTML Layout Generator
Visual drag & drop HTML layout builder. Create semantic page structures with header, nav, main, sidebar, and footer.
Schema Generator
Generate JSON-LD structured data for rich search results. Article, Product, FAQ, and more.
Meta Tags Generator
Generate complete HTML meta tags for SEO, social sharing, and browser behavior.
Continue Learning
HTML Basics: A Complete Beginner's Guide
Learn the fundamentals of HTML including elements, attributes, and document structure.
intermediateWeb Accessibility: Building Inclusive Websites
Learn to create accessible websites that work for everyone.
intermediateHTML SEO Best Practices: Optimize Your Markup for Search Engines
Learn how to structure HTML for better search engine visibility. Cover meta tags, structured data, semantic markup, and technical SEO.