Semantic HTML. The What & The Why?

Hey all. How's it going? Since this is my first blog, I wanted to write about one of the very first lessons I learned in my coding journey with neoG Camp. I even made a tweet about the same at that time but this is a good opportunity to convert that into my first blog.

.@neogcamp Level 0 HTML Learnings:

1. Don't use <h> tags for the size of the text.
2. Use Semantic tags hierarchy.
3. Don't overuse <div> tag.
4. There are many tags but just learn to use <h>, <a>, <p>, <div>, <ul>, <ol>, <hr> and <img> tags and you'll be fine. Otherwise Google.

— Chhikara ब्रः 🌟⚓ (@ChhikaraBRUH) August 23, 2021

---

What is Semantic HTML?

So let's dive into What is Semantic HTML. Let me present an analogy first. There are different sized and shaped spoons in your kitchen. Now one can use any spoon anywhere if they want to, but no sane person would use The Serving Spoon in place of a Tea Spoon. I mean you could obviously, but that's just not practical.

Now you would say "But what's that got to do with HTML?" Well, using <div> too often leads to a similar situation in the coding world. Now with the definition: "A semantic element clearly describes its meaning to both the browser and the developer." What that means is that you should use the respective <header>, <section>, <nav>, etc at their respective places instead of stuffing in <div> for everything along with different classes. Writing Semantic HTML is like using the correct spoon for the respective job.

Some of Non-Semantic Elements are <div> and <span> as they provide no information about their content to the browser or the developer.

On the other hand, some Semantic Elements are <form>, <article>, <header>, etc. These clearly define what their content will include.

---

Why use Semantic HTML tags?

Now we know what Semantic HTML looks like, let's focus on why to use it. So you should use Semantic HTML Elements for the following reasons:

- They help better structure the code we write.

Example 1:

<div id="header"></div>
<div class="section">
    <div class="article">
        <div class="label">
            <input id="text"/>
        </div>
    </div>
</div>
<div id="footer"></div>

Example 2:

<header></header>
<section>
    <article>
        <label for="text1">
            <input id="text1"/>
        </label>
    </article>
</section>
<footer></footer>

See the difference in Example 1 and Example 2. In this small block of code, you can see the difference in the readability of the code. Example 2 is much easier to read and hence understand.

- Improves your consistency in code

When you use <header> tag instead of <div> every time you need a header it will improve your consistency and hence better code.

- Better accessibility for everyone

It's easier for normal people to read and understand. But for bots/crawlers such as Google Indexing bot, using Semantic tags improve the readability & accessibility of your site for them to better index the content of your website. Another use case is for Blind people. The screen reader better understands the content written with Semantic elements. For ex. A screen reader can stress out on a word/sentence where the <em> tag has been used. This helps blind people to better understand the context and the meaning of what you want to convey.

---

Thank you for reading this far. I hope I was able to provide something of value to you. Please share the blog if you like it. Please connect with me on Twitter (@ChhikaraBRUH).

---

References:
W3Schools
Webflow