Beyond `<div>`s: The Power of Semantic HTML
In the early days of the web, pages were often built using a sea of `<div>` tags. You'd see code like `<div id="header">`, `<div class="main-content">`, and `<div id="footer">`. This is what's known as **"div-itis"** or **"div soup"**. While it worked visually, it provided no context to browsers, search engines, or assistive technologies.
**Semantic HTML** fixes this. It introduces specific tags that describe the *meaning* and *role* of the content they contain. Using `<header>` instead of `<div id="header">` tells the browser, "This is the introduction," not just "This is a generic box."
1. The Page Skeleton: `<header>`, `<main>`, and `<footer>`
These three tags form the high-level structure of almost every webpage.
<header>: Represents introductory content. This is usually the site logo, main heading, and primary navigation. You can have more than one `<header>` per page (e.g., one for the site, another for an `<article>`).<main>: This is the most critical tag. It defines the **unique, primary content** of the page. It *should not* contain content that is repeated across pages, like site navigation or footers. You should have **only one `<main>` tag** per document.<footer><article>`, it could contain author info or related links.
2. The Big Debate: `<article>` vs. <section>
This is the most common point of confusion for developers. Here's the simplest way to think about it:
✔️ `<article>` (Self-Contained)
Use an `<article>` for content that makes sense **on its own, in isolation**. If you could syndicate it in an RSS feed, it's an article.
Examples: Blog post, news story, forum post, user comment.
✔️ <section> (Grouping)
Use a <section> to **group thematically related content**. It's a "section" of a larger whole. It doesn't usually make sense on its own.
Examples: "About Us," "Contact Info," "Related Posts."
A homepage might have a <section> called "Latest News" which contains multiple `<article>` elements inside it.
3. Navigation and Sidenotes: `<nav>` and <aside>
<nav><footer>` usually doesn't need a `<nav>` tag.<aside>: For content that is **tangentially related** to the main content. It's a "sidenote." The most common example is a sidebar with related links, author bios, or advertisements.
Key Takeaway: Using semantic HTML is a triple win. It makes your site more accessible for screen reader users, boosts your SEO by helping search engines understand your content, and improves **maintainability** for you and your team.
