So far, we have used elements like <div> to group content. But imagine you are building a real website. You might have a header, a navigation menu, a main section, some articles, and a footer. You could put everything inside <div> elements, but HTML has special elements that tell us what each part of the page means. These are HTML semantic elements.
What Are Semantic Elements?
Semantic elements clearly describe their purpose.
For example:
<header>tells us that the content is a header.
And:
<footer>tells us that the content is a footer. This makes the HTML easier for people, browsers, and search engines to understand.
Common Semantic Elements
Here are the important ones you should know:
| Element | Used for |
|---|---|
<header> | Top section of a page or section |
<nav> | Navigation links |
<main> | Main content of the page |
<section> | A section of related content |
<article> | Independent content such as a blog post |
<aside> | Related or side content |
<footer> | Bottom section of a page or section |
You don’t need to memorize all of them at once. Let’s see how they work together.
Creating a Simple Webpage
Let’s create a small website for a coding club. Try it by yourself.
<!DOCTYPE html>
<html>
<head>
<title>Coding Club</title>
</head>
<body>
<header>
<h1>Code Club</h1>
<p>Learn. Code. Build.</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>Welcome to Code Club</h2>
<p>We help beginners learn programming.</p>
</section>
<section>
<h2>Our Courses</h2>
<article>
<h3>HTML</h3>
<p>Learn how to create webpages.</p>
</article>
<article>
<h3>JavaScript</h3>
<p>Learn how to make webpages interactive.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 Code Club</p>
</footer>
</body>
</html>
Understanding the Main Semantic Elements
Let’s understand the elements we just used.
<header>
The <header> usually contains introductory content.
It can contain things such as:
- Website name
- Logo
- Main heading
- Introduction
For example:
<header>
<h1>Code Club</h1>
<p>Learn coding easily.</p>
</header>
<nav>
<nav> is used for important navigation links.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
It helps identify the part of the page that contains navigation.
<main>
<main> contains the main content of the webpage. A page normally has one main content area.
<main>
<h1>Learn HTML</h1>
<p>HTML is used to create webpages.</p>
</main>
<section>
A <section> groups related content. For example, a webpage might have separate sections for About, Courses, and Contact.
<section>
<h2>About Us</h2>
<p>We teach programming to beginners.</p>
</section>
<article>
An <article> is used for content that can stand on its own. A blog post, news article, or tutorial post can be an article.
<article>
<h2>What is HTML?</h2>
<p>HTML is used to create the structure of webpages.</p>
</article>
Think of an article as one complete piece of content.
<aside>
<aside> contains information related to the main content but not part of the main flow.
For example, you could use it for:
- Related links
- Tips
- A sidebar
- Extra information
<aside>
<h3>Quick Tip</h3>
<p>Practice HTML by creating small webpages.</p>
</aside>
<footer>
The <footer> usually appears at the bottom of a webpage.
It can contain things such as:
- Copyright information
- Contact information
- Extra links
<footer>
<p>© 2026 Code Club</p>
</footer>
Why Not Use <div> for Everything?
You can use <div> to group content, but <div> doesn’t tell us what that content means.
Compare these:
<div>
<h2>Our Courses</h2>
<p>Learn HTML, CSS and JavaScript.</p>
</div>
and:
<section>
<h2>Our Courses</h2>
<p>Learn HTML, CSS and JavaScript.</p>
</section>
Both can display similar content. But <section> gives the content a clear meaning. That’s the main idea behind semantic HTML.
Quick Recap
- Semantic elements tell us what different parts of a webpage mean.
<header>is used for introductory content.<nav>is used for navigation links.<main>contains the main content.<section>groups related content.<article>,<aside>, and<footer>are used for specific types of content.
Frequently Asked Questions (FAQs)
Q1. What are HTML Semantic Elements?
HTML Semantic Elements are HTML elements that clearly describe the meaning and purpose of the content they contain, such as <header>, <nav>, <main>, <section>, and <footer>.
Q2. What is Semantic HTML?
Semantic HTML means using elements that describe what the content represents instead of using generic elements such as <div> for everything.
Q3. What are the common HTML Semantic Elements?
Common HTML Semantic Elements include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.
Q4. Why are HTML Semantic Elements important?
HTML Semantic Elements make webpage structure easier for developers, browsers, assistive technologies, and search engines to understand.
Q5. What is the difference between <div> and semantic elements in HTML?
<div> is a generic container and does not describe the meaning of its content. Semantic elements such as <section> and <article> provide information about the purpose of the content.
Q6. What is the <main> element used for in HTML?
The <main> element contains the primary content of a webpage. It represents the main topic or purpose of that page.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
