#html
#tutorial
#intermediate
Day 7: Semantic HTML
Day 7: Meaningful Markup
In the old days, we built layouts using only <div> tags. It was a mess.
HTML5 introduced Semantic Elements: Tags that describe what they contain, not just how they look.
Why Semantics Matter?
- Accessibility: Screen readers can jump straight to the “Main Content” or “Navigation”.
- SEO: Google understands that content inside
<article>is more important than content inside<footer>. - Readability: It’s easier for you to maintain.
The Semantic Layout
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<p>This is the main content...</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>Key Elements
<header>: The top of a page or section. Usually contains logo and nav.<nav>: A block of navigation links.<main>: The primary content of the page. Use only one per page.<article>: Self-contained content (e.g., a blog post, a news card).<section>: A thematic grouping of content with a heading.<aside>: Indirectly related content (sidebars, ad blocks).<footer>: The bottom of a page or section. Copyright, contact info.
When to use <div>?
Use <div> only when there is no suitable semantic element (usually for styling purposes only).
Homework for Day 7:
- Look at your “My Recipes” page from Day 3.
- Refactor it using semantic tags.
- Wrap the title in
<header>. - Put the recipes inside
<main>. - Put each recipe in its own
<article>. - Add a copyright notice in a
<footer>.
Day 8: We look under the hood at Metadata & SEO!