Many beginners build websites using only
<div> and <span> tags. While this perfectly "works," it creates a website that is hard for search engines to read and impossible for visually impaired users to navigate. ๐น 1. What is Semantic HTML?
A semantic element clearly describes its meaning to both the browser and the developer. Instead of just saying "this is a box," it says "this is a navigation menu" or "this is a footer."
โข Non-semantic:
<div>, <span> (Tells us nothing about the content).โข Semantic:
<header>, <nav>, <main>, <article>, <section>, <footer>.๐น 2. Why it Matters #1: SEO (Search Engines)
Googleโs "spiders" crawl your site to understand what itโs about. If everything is in a
<div>, Google struggles to find the most important info. If you use an <article> tag, Google knows exactly where your main content is, which can improve your search rankings.๐น 3. Why it Matters #2: Accessibility (a11y)
Millions of people use Screen Readers to browse the web. A screen reader can "jump" directly to a
<nav> or a <main> tag. If you only use <div>, the user has to listen to every single line of code to find what they need. ๐น 4. Common Semantic Tags to Use Now
โข
<header>: For the top intro/logo area.โข
<nav>: Specifically for navigation links.โข
<main>: The unique, primary content of the page (only use one per page!).โข
<section>: For grouping related content (like "Services" or "Contact").โข
<article>: For independent content that could stand alone (like a blog post).โข
<footer>: For the bottom area (copyright, social links).๐น 5. Semantic vs. Non-Semantic (The Comparison)
Bad Code (The "Div Soup"):
<div class="top-part">
<div class="menu">Links here...</div>
</div>
Good Code (Semantic):
<header>
<nav>Links here...</nav>
</header>
๐น 6. Buttons vs. Anchors (
<a>)This is the most common mistake!
โข Use
<a>: If you are taking the user to a new URL or a different page.โข Use
<button>: If you are performing an action (like submitting a form, opening a menu, or deleting an item).๐ Writing Semantic HTML doesn't change how the site looks, but it changes how the world experiences it!
๐ฏ What you should do
โ๏ธ Stop using
<div> for every layout containerโ๏ธ Use the correct tags to help Google rank your site
โ๏ธ Make your website usable for people with disabilities
โ๏ธ Choose between
<a> and <button> correctly