Semantic HTML
Meaningful elements, accessibility, SEO, and document structure.
Overview
Semantic HTML uses elements that describe their meaning, improving accessibility and SEO.
Key Concepts
- Semantic Elements β
<header>,<nav>,<main>,<article>,<section>,<footer> - Accessibility β Screen readers understand page structure
- SEO β Search engines parse content better
- Document Outline β Clear heading hierarchy
- ARIA β Additional accessibility attributes
Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<section>
<h2>Section 1</h2>
<p>Content here...</p>
</section>
<section>
<h2>Section 2</h2>
<p>More content...</p>
</section>
</article>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
Practice
Convert a div-based page to semantic HTML and test with a screen reader.