Semantic HTML Explained - Smart Structural Tags
Imagine a book with no table of contents, no headings, and no chapters - just blocks of text.
That is what Google sees when it finds a page built only with <div> and no semantic elements.
Semantic elements tell the browser, Google, and screen readers: "This is the page header", "This is the main content", "This is the navigation".
What Is a Semantic Element?
A semantic element is a tag with a specific meaning that describes its content - not just how it looks, but what it is.
| Type | Examples | Does it describe content? |
|---|---|---|
| Non-semantic | <div>, <span> |
No - just empty containers |
| Semantic | <header>, <nav>, <article> |
Yes - clearly describes the role of the content |
Main Semantic Elements in HTML5
<header> - Page or Section Header
Usually contains the logo, main title, and navigation.
It can appear once as the page header, or inside each <article> or <section>.
<header>
<img src="/logo.png" alt="DevArabi logo">
<h1>DevArabi - Learn programming</h1>
<nav>...</nav>
</header>
<nav> - Navigation
Contains the main navigation links of the site. Google automatically understands this section as navigation, which helps it interpret your site structure.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
<main> - Main Content
Contains the unique, primary content of the page.
There must be only one per page - just like <h1>.
Repeated content (Header, Footer, Sidebar...) does not go here.
<main>
<h1>Learn HTML from scratch - Lesson 1</h1>
<p>Unique lesson content for this page...</p>
</main>
<section> - Thematic Section
Groups content that shares a common topic inside the page.
Each <section> should have a heading (<h2> or <h3>).
<section>
<h2>Latest Lessons</h2>
<p>A list of the newest lessons added this week...</p>
</section>
<section>
<h2>Most Viewed Lessons</h2>
<p>A list of the most popular lessons on DevArabi...</p>
</section>
<article> - Standalone Publishable Content
Used for content that stands on its own and can be read independently of the rest of the page. Example: blog post, product card, comment, social media post.
<article>
<header>
<h2>How to learn HTML in a week?</h2>
<p>Published: Feb 22, 2025 - By: DevArabi Team</p>
</header>
<p>Article content...</p>
<footer>
<p>Comments: 15 <a href="#comments">Read comments</a></p>
</footer>
</article>
<aside> - Related Side Content
Content related to the main topic but not essential. Example: "Related articles" box, ad, side note, extra info.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="css-intro.php">CSS Introduction</a></li>
<li><a href="js-intro.php">JavaScript Introduction</a></li>
</ul>
</aside>
<footer> - Page or Section Footer
Usually contains copyright, social links, site map, privacy policy.
It can be a footer for the whole page or for each <article>.
<footer>
<p>All rights reserved (c) 2025 DevArabi</p>
<a href="/privacy">Privacy Policy</a>
<a href="/contact">Contact Us</a>
</footer>
Reference Table - All Semantic Elements
| Tag | Purpose | How Many Times Per Page? |
|---|---|---|
<header> |
Page or section header | Once or more |
<nav> |
Main navigation links | Once or twice |
<main> |
Unique main page content | Only once |
<section> |
Related thematic section | As needed |
<article> |
Standalone publishable content | As needed (articles, cards...) |
<aside> |
Related side content | Once or more |
<footer> |
Page or section footer | Once or more |
Full Practical Example - Blog Page Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DevArabi Blog</title>
</head>
<body>
<!-- Page header -->
<header>
<img src="/logo.png" alt="DevArabi">
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses">Courses</a></li>
</ul>
</nav>
</header>
<!-- Main content -->
<main>
<!-- Articles section -->
<section>
<h2>Latest Articles</h2>
<!-- Standalone article -->
<article>
<h3>How to learn HTML quickly?</h3>
<p>First article content...</p>
</article>
<article>
<h3>Best web development tools 2025</h3>
<p>Second article content...</p>
</article>
</section>
</main>
<!-- Sidebar -->
<aside>
<h3>Suggested Articles</h3>
<ul>
<li><a href="#">Learn CSS</a></li>
</ul>
</aside>
<!-- Page footer -->
<footer>
<p>(c) 2025 DevArabi - All rights reserved</p>
</footer>
</body>
</html>
Why Use Semantic HTML? - Three Reasons
-
SEO and Google: Google understands your page structure better and gives more weight to content inside the right semantic elements. A page with
<article>and<nav>is indexed better than a page full of<div>. -
Accessibility: Screen reader users can jump between
<nav>,<main>, and<article>quickly. Without semantic elements, they must read the page linearly. -
Code maintainability: Another developer sees
<footer>and immediately knows it is the page footer. With<div id="footer">they need to read CSS to understand the context.
Frequently Asked Questions - FAQ
Do semantic elements change the page appearance?
No. <header>, <section>, and <article> are all block elements just like <div> - there is no default visual difference. The difference is semantic meaning and the benefits for SEO and accessibility.
When should I use <section> and when <article>?
If the content can be published on its own and has independent meaning (article, product card, comment) use <article>.
If the content is just a thematic section of the page and has no meaning outside it use <section>.
Can I put <header> inside <article>?
Yes. Both <header> and <footer> can be used inside <article> to indicate the header and footer of that specific article. A page can contain multiple <header> elements as long as each one is in the correct context.