HTML Semantic Elements
Semantic elements clearly describe their meaning to both the browser and the developer.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> — tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> — clearly define its content.
HTML5 Semantic Elements
<header> - Header of a page or section
<nav> - Navigation links
<main> - Main content
<article> - Independent content (blog post, news)
<section> - Thematic section
<aside> - Sidebar content
<footer> - Footer of a page or section
<figure> - Self-contained content (images, diagrams)
<figcaption> - Caption for <figure>
<time> - Machine-readable date/time
<mark> - Highlighted text
<summary> - Visible heading for <details>
<details> - Interactive disclosure widget
Page Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Page</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<section>
<h2>Introduction</h2>
<p>Article content here...</p>
</section>
<section>
<h2>Main Points</h2>
<p>More content...</p>
</section>
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Figure 1: Q4 Sales Results</figcaption>
</figure>
</article>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Article 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 NetGram Learn</p>
</footer>
</body>
</html>
Why Use Semantic HTML?
- Accessibility — Screen readers can navigate by landmark regions
- SEO — Search engines better understand page structure
- Readability — Code is easier to read and maintain
- Consistency — Standard structure across web pages
💡 Rule of thumb: If you'd use a
<div>, ask yourself if there's a semantic element that fits better.