Mabuhay! 🇵đź‡
I am about to discuss the importance of writing semantic HTML, over the years of working with React I have grown frustrated on certain areas:
One of which is HTML element structure or JSX if you want to be React specific.
The problem with new and upcoming developers is they neglect to focus on building a strong foundation with HTML, instead they decide to jump to HTML, CSS, JavaScript. While this is not a problem if you want to land a job immediately, however if you want to be separated as a great web developer you have to focus on the basics as well.
If I were to give a basketball analogy it's like what the late great Kobe Bryant said,
Without further ado below is my take why is semantic HTML important
What is Semantic HTML?
In programming Semantic refers to the meaning of a piece of code, Semantic HTML similarly has the same definition. It provies meaning to the HTML page rather than just presentation. This makes the website more comprehensible to the browsers and people (I'll discuss this in a bit) by better defining certain areas of the web pages.
If we were to go back to the old days before all of the fancy schmancy frameworks, below were the more prominent elements / components to use in building a website.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Now I am not going to discuss what are each element's usage are, we have ChatGPT for that, but I am going to emphasize that we have more than ten options to use other than our old trusty friend the <div> </div>
.
Common problem these days engineers are becoming lazy to think about how they would layout their page, and they end up using <div>
and it becomes an endless sea of it. Imagine having to debug a very long file and it contains a hundred lines of div, even if it's chunk down to different reusable components you'd still have to suffer from this problem especially if you're debugging the CSS part.
Here's an example of a non semantic HTML writing:
<div>
<div>This is the header</div>
<div>
<div>This is a navigation link</div>
<div>This is another navigation link</div>
</div>
<div>
<div>This is the main content</div>
</div>
<div>This is the footer</div>
</div>
and here it's alternative good practice semantic HTML writing:
<header>
<h1>This is the header</h1>
</header>
<nav>
<a href="#">This is a navigation link</a>
<a href="#">This is another navigation link</a>
</nav>
<main>
<p>This is the main content</p>
</main>
<footer>
<p>This is the footer</p>
</footer>
Now that we see the problem, how does it totally affect the overall website's performance?
I understand it takes time to figure out which element to use, and indeed it does. However I am confident to say it will save you a ton of time in the long run. Let's discuss why it's important.
Why is it important?
-
Cleaner Code and Easier to understand
- By using the proper elements, this gives the codebase a much more comprehensible look and feel. This helps both developers and computers understand what the purpose of each section is. Think of it like leaving breadcrumbs for the next developer—or even yourself—to follow. Code that reads like a well-written story is always easier to maintain and debug.
-
Better Accessbility
- Semantic HTML isn't just about making life easier for developers; it also improves the experience for users who rely on assistive technologies like screen readers. For example, a
<nav>
tag immediately signals to a screen reader that this is a navigation section, allowing users to jump to it directly. Similarly, using<header>
or<main>
properly creates a logical structure for the content, making it easier to navigate for everyone. Accessibility isn't just a nice-to-have anymore—it's a must if you care about reaching a wider audience and being inclusive.
- Semantic HTML isn't just about making life easier for developers; it also improves the experience for users who rely on assistive technologies like screen readers. For example, a
-
Improves SEO
- If you're working on websites, chances are you've heard about SEO (Search Engine Optimization). Semantic HTML plays a huge role in this. Search engines like Google use bots to crawl websites and understand their content. Using elements like , , , and gives context to your content and helps search engines know what your site is about. This can boost your rankings and make your website more discoverable.
In conclusion think of semantic HTML as writing a well-organized book: chapters, headings, and sections all serve a purpose. If you skip this step and just throw content into a <div>
, search engines might have a harder time figuring out what's important, and that's a missed opportunity.
Top comments (0)