What are Semantic HTML elements, and Why use them?

Before we initiate a discussion on semantic and non-semantic elements of HTML(HyperText Markup Language), it is mandatory to look into why such classifications and why the need to focus on these new trends rising in the most influential website design language!

What’s the need for such HTML tag classification?

After HTML arrived, designers started to use the tags innovatively yet cleverly, and suddenly <table> the tag was not just used for creating tables, it was also being used to place an element or part of the website at a certain position.

Therefore, making the tags lose their actual attached meanings. Within no time, ‘non-semantic tags’ were being added to semantic ones, which posed an issue to the language authenticity and readability.

Hence, semantic elements and non-semantic elements were distinguished and more semantic tags got added to the language for better readability, not just to programmers, but also for everyone.

What are semantic elements?

Semantic HTML clearly describes their usage and conveys accurate meaning in both human and machine comprehensible ways. For eg., elements like <header>, <title> and <article> are all considered semantic tags. These HTML tags precisely emphasize the element’s meaning and content type that is inside them or must be added to them.

Few of the recent additions to semantic tag lists due to the misuse of non-semantic tags with semantic tags are:

• <article>: Similar to <section> but with a more specific purpose.

• <aside>: It is added to content to be put aside of the regular flow of the flowing content.

• <mark>: For marking/highlighting a part of the content.

• <figcaption>: To add figure captions and format them as per the need.

• <time>: To add time as a human readable form.

All the above tags can be replaced by the non-semantic tags and by the usage of formatting tags or attributes associated with the tags, but it is more convenient to use these tags.

Why use Semantic tags?

Apart from these tags providing specific purpose and an easy-to-use approach to adding attributes for desired results, they help you in a lot of other unidentified ways.

Let’s show you two pieces of code, one with semantic elements and the other one serving the same purpose and output but without the semantic HTML elements:

One with Semantic elements:

<header>Products</header>
<section>
<p>Product Categories</p>
<figure>
<img>
<figcaption></figcaption>
</figure>
<article>Cosmetics</article>
<article>Grocery</article>
<article>Stationery</article>
</section>
<footer>Company</footer>

Similar code with non-semantic elements:

<div id=’header’>Products</div>
<div class=’section’>
<p>Product Categories</p>
<div class=’figure’><img></div>
<div class=’article’>Cosmetics</div>
<div class=’article’>Grocery</div>
<div class=’article’>Stationery</div>
</section>
<footer>Company</footer>

Clearly, the second code is highly unsystematic and the first one is rather straightforward, easy-to-understand, and read, not just by the one who developed it, but by everyone. Now, here we list the mysterious advantages of using semantic tags:

Easy-Accessibility:

Surprisingly, even machines find reading the code with semantic tags easy. Therefore, Search Engines look for these tags to identify the elements present in your content and hence assign your ranks according to these as well, however, those are also affected by other factors too.

Apart from Search Engines, these tags also aid assistive technologies(screen readers for specially-abled sections) in easy identification of various sections present on the screen and convey to the user accordingly.

Consistency:

We use pre-defined languages so that they can be easily understood by all and follow similar conventions worldwide. Using semantic tagging allows having consistency across different programmers and allows all to comprehend and edit the code in similar ways.

Use semantic tags to enhance the readability of your code, accessibility of your website, and make your website consistent with the industry-accepted standards of making it follow the best practices.