Why Semantic HTML is important?

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>.