The word semantic means meaning. So, Semantic Elements in HTML are tags that clearly describe their meaning to both browser and developer.
Example:
- <header> means the top part of a page.
- <footer> means the bottom part.
- <article> means a standalone piece of content.
Before HTML5, developers used only <div> for layout, which had no meaning. HTML5 introduced semantic tags to make web pages more structured and search-engine friendly.
List of Common HTML Semantic Elements
| Semantic Element | Purpose |
|---|---|
| <header> | Defines the top section or introduction of a page or section |
| <nav> | Defines navigation links (menu or site navigation) |
| <section> | Groups related content together |
| <article> | Represents an independent block of content (like a blog post or news item) |
| <aside> | Represents secondary content (like a sidebar or related links) |
| <main> | Defines the main content area unique to the page |
| <figure> | Groups media content such as images or diagrams |
| <figcaption> | Provides a caption for a figure element |
| <footer> | Defines the bottom part of a page or section |
| <details> | Defines expandable/collapsible content |
| <summary> | Provides a heading for the details element |
Example of HTML Page Using Semantic Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML semantic elements like header, section, article, aside, and footer with examples and SEO benefits.">
<meta name="keywords" content="HTML semantic elements, header tag, footer tag, article tag, section tag, semantic HTML tutorial">
<meta name="author" content="Web Tutorials">
<title>HTML Semantic Elements Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Semantic HTML Page</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>About Semantic Elements</h2>
<p>Semantic elements describe their meaning to browsers and developers, making the structure clear and SEO-friendly.</p>
</section>
<article>
<h2>What Is an Article?</h2>
<p>The <code><article></code> tag represents independent content, such as a blog post, comment, or news article.</p>
</article>
<aside>
<h3>Did You Know?</h3>
<p>Using semantic HTML helps Google understand your site content better, improving your search visibility!</p>
</aside>
<figure>
<img src="semantic-example.png" alt="Semantic HTML Example" width="100%">
<figcaption>Figure 1: Example of HTML Semantic Layout</figcaption>
</figure>
</main>
<footer>
<p>© 2025 WebTutorials. All rights reserved.</p>
</footer>
</body>
</html>CSS Styling
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f7f9fc;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px 0;
}
nav a {
color: #fff;
margin: 0 8px;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
section, article, aside {
background: #fff;
margin: 10px;
padding: 15px;
border-radius: 6px;
flex: 1 1 45%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
figure {
margin: 20px auto;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
}
footer {
font-size: 14px;
}