What is Semantic HTML?
Semantic HTML means using meaningful tags that describe the purpose of your content, not just how it looks. This makes your code cleaner, easier to understand, and more accessible for everyone — including screen readers and search engines.
Semantic HTML Elements
Document Structure
<!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>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
</header>
<section>
<h3>Introduction</h3>
<p>Article content goes here...</p>
</section>
<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">Related article 1</a></li>
<li><a href="#">Related article 2</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
Key Semantic Elements
Header — introductory section of a page or article
<header>
<h1>Site Title</h1>
<p>Site tagline</p>
</header>
Nav — navigation links
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
Main — main content area of the page
<main>
<h2>Page Content</h2>
<p>Main content goes here...</p>
</main>
Article — self-contained piece of content
<article>
<h2>Blog Post Title</h2>
<p>Blog post content...</p>
</article>
Section — thematic grouping of related content
<section>
<h2>About Our Company</h2>
<p>Company information...</p>
</section>
Aside — related or sidebar information
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
</ul>
</aside>
Footer — bottom section of a page or article
<footer>
<p>Copyright information</p>
<p>Contact details</p>
</footer>
Accessibility Best Practices
-
Use Proper Heading Hierarchy
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Minor Heading</h4>
-
Provide Alt Text for Images
<!-- Good -->
<img src="chart.png" alt="Sales increased by 25% in Q3">
<!-- Bad -->
<img src="chart.png" alt="chart">
-
Use Descriptive Link Text
<!-- Good -->
<a href="contact.html">Contact us for more information</a>
<!-- Bad -->
<a href="contact.html">Click here</a>
-
Add ARIA Labels When Needed
<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Form submitted successfully!</div>
-
Ensure Keyboard Navigation
<!-- Make sure all interactive elements are keyboard accessible -->
<button tabindex="0">Click me</button>
<a href="#" tabindex="0">Accessible link</a>
