Welcome to Day 6 of the 7 Days HTML Tutorial!
Today is all about writing cleaner, more meaningful HTML using semantic tags — and structuring your page like a pro!
By the end of this lesson, you’ll be able to:
- Understand what semantic HTML is and why it matters
- Use common semantic tags like
<header>,<main>,<section>, and<footer> - Create a basic layout of a complete webpage using these tags
Let’s jump right in!
Table of Contents
What is Semantic HTML?
Semantic HTML means using tags that describe the meaning of their content.
For example:
| Non-Semantic Tag | Semantic Tag |
|---|---|
<div> | <header> |
<div> | <footer> |
<div> | <section> |
<div> | <article> |
Semantic tags improve:
- Readability (for humans)
- Accessibility (for screen readers)
- SEO (search engines understand your structure)
Common Semantic Tags
<header>
Used for the top part of a page or a section. Usually contains a logo, site title, or navigation.
<header>
<h1>My Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header><main>
Represents the main content of the page (excluding sidebar, nav, etc.)
<main>
<h2>Welcome!</h2>
<p>This is the core content of the site.</p>
</main><section>
Groups related content inside main.
<section>
<h3>Latest Posts</h3>
<p>Here are the latest updates...</p>
</section><article>
Used for self-contained content like blog posts or news articles.
<article>
<h2>HTML Tutorial</h2>
<p>HTML stands for HyperText Markup Language...</p>
</article>
<aside>
Used for sidebars, widgets, or extra info not part of the main content.
<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">HTML Basics</a></li>
<li><a href="#">CSS Guide</a></li>
</ul>
</aside><footer>
Defines the bottom area of a page or section.
<footer>
<p>© 2025 MyWebsite. All rights reserved.</p>
</footer>Layout Example: Full Page Structure
Here’s a basic web page using semantic tags:
<!DOCTYPE html>
<html>
<head>
<title>My Semantic Page</title>
</head>
<body>
<header>
<h1>Welcome to My Site</h1>
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We provide web development tutorials.</p>
</section>
<article>
<h2>Latest Tutorial</h2>
<p>Today you’ll learn about Semantic HTML...</p>
</article>
<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="#">HTML Forms</a></li>
<li><a href="#">CSS Styling</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 MyWebsite | Follow us on social media</p>
</footer>
</body>
</html>Save this as layout.html and open it in your browser. Observe how neat and clean the structure is.
Why Not Just Use <div> for Everything?
You can, but you shouldn’t.
Semantic tags:
- Tell you and others what content means
- Help search engines and screen readers understand your layout
- Make your code easier to maintain and style with CSS
Practice Task
Create a new webpage with the following:
- A header with a site title and navigation links
- A main section with:
- A section introducing yourself
- An article about your favorite hobby
- An aside with 2 useful links
- A footer with your copyright
What’s Next?
On Day 7, we’ll wrap it all up with how to combine everything into a full web page, and you’ll build your first mini project using all the tags you’ve learned so far!
One more day to go! You’re almost there 
Want to test your learning so far?
Check out the 7 Days HTML Challenge with Solutions to practice and validate your understanding with hands-on tasks!