I still remember doing some web layout using tables. Life was rough back then. But since CSS framework such as Bootstrap became so popular, div tags were widely used for styling element. Everything was wrapped inside a div. Then HTML 5 made an entrance. Now we have semantic elements, tags that clearly describes its meaning to both the browser and the developer.

I'd put the emphasis on the 'meaning' part.

Sure we can always just use div and it will rendered just fine in the browser. But what about code readability? Can machine read it too as those elements were intended to behave? It's a common thing when developers were to have difference perception on their naming convention. So why wouldn't we use a good standard for web elements?

[We can learn about the basic element here](https://www.w3schools.com/html/html5_semantic_elements.asp). It's really not that hard.

### Practical Use

An example: we write our navigation links using the `<ul><li>` tags, which is correct, since it is a list of links. But for the styling purpose, we wrapped it inside a div tag. Our human eyes can easily perceive these links as a navigation list. But machines are dumb. They wouldn't find the difference of these links with another `<a>` tags on our page.

How about we wrapped the navigation list inside a proper `<nav>` tag? Machine will immediately recognize it. And so does a screen reader. Thus, it will be a great help for the web accessibility too.


![carbon1.png](https://files.peakd.com/file/peakd-hive/gibic/XvoTbiP2-carbon-1.png)

Same story goes to the `<main>` tag, as we could easily guess, this tag will wrapped the most important part of our web page. The main course. A good practice for web page is to provide the 'skip to main' navigation link when a person hit the tab key on their keyboard. Without providing the proper `<main>` tag, this nice accessibility feature would be hard to achieve.

Seeing so many tags and thinking what tag to use for specific meaning could be overwhelming sometimes. What is `<article>`, what is `<section>` ? Should we use section inside article, or vice-versa? (short answer, we can do both). Not to mention, there are roughly 100 semantic elements available.

When you got too tired of these semantic things, try to keep things simple. Don't go overthinking about the tag elements. Just enjoy the process, but make sure to make your works meaningful.
***

Further reads:

- [Semantic HTML5 Elements Explained](https://www.freecodecamp.org/news/semantic-html5-elements/)
- [Let’s Talk about Semantics](http://html5doctor.com/lets-talk-about-semantics/)