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!