Before you go, check out these stories!

Hackernoon logoOn The Use of Semantic Elements in HTML by@bx3

On The Use of Semantic Elements in HTML

Author profile picture

@bx3 Barak

Student - Full Stack Web Dev

Often, as a developer, I’ve come to question the need for all these new and fancy Semantic HTML Elements, and as was forced to use them for a while, I decided to dig a little bit into their reason of being. In this article, I hope to present to you what I’ve found out and my conclusions from it.


Before modern technology became an inseparable part of the human being, a Communication had a simple appearance, it consisted of Content and attached to it was a Mode of Delivery. For example, in spoken communication, the words were the Content but could only be accessed through sound as the Mode of Delivery; in written communication, be it a book or a letter, again the words were the content and attached to them was their mode of delivery, the written word.

And then… the world progressed, and we find ourselves with new technology that allows us to split Content from its Mode of Delivery. This is possible because one piece of Content can be accessed in so many different ways. Let take a simple .txt file, it can be accessed through a screen as written text, through TTS software as sound and even through morse code vibrations.


And then… the world progressed even further, because of the internet location has lost part of its effect on Communications. Information can go from a place to another without much effort.

What happens when we combine these two possibilities? We find ourselves able to reach with our Communications an immense number of people, regardless of the barriers which once stood between us.


Developers, the people who are responsible to transform a piece of information into a digital Communication, should take advantage of these opportunities. And here is where Semantic HTML comes into play.

By using semantic elements, a developer makes the content accessible to other Modes of Delivery, it can be better understood by indexers and web crawlers and can be easily reused without the need of adapting to each website by having a common standard.


For reference, here is a chart made by Html5Doctor on the correct use of the different elements.

If you would like to learn more on the subject, I would recommend an article by Mike Robinson, Let's Talk about Semantics; as well as the Wikipedia article on Semantic HTML for a brief history of the subject.


The Noonification banner

Subscribe to get your daily round-up of top tech stories!