An Overview

In this blog, we'd understand what Semantic HTML is, what are its advantages, and why every developer should be aware of this.

What does Semantic mean?

Let's first start by understanding what Semantic means.

Semantic simply means something relating to meaning in language or logic.

What are Semantic elements in HTML?

Semantic elements clearly describe the meaning of a particular element to the browser and as well as the user. For example, the h1 tag would give the text it wraps around the role of a top-level heading on your page.

Semantics simply means using the right HTML tag for the right purpose. While creating a website, developers should try and use all the meaningful tags first instead of using the div tag everywhere. Let's try and understand this with an example as shown below:

We get the above output simply by using the right HTML tags such as the h1 tag, the p tag, the input tag, and the button tag. The code for the same is as follows:

Some of the most commonly used semantic elements in HTML are the 6 header tags, the button tag, the p tag for writing a paragraph, the input tag, the small tag for a relatively smaller text, the table tag, etc.

Things to avoid

A lot of people make the mistake of using the div tag everywhere and anywhere. Of course, it would still give you the same result with the help of some CSS. But why complicate things when you can simply use the correct element to get the job done.

Using the div tag everywhere is like cutting onions with scissors when you can simply use a knife to get the job done.

The div tag should only be used when there's not a pre-defined tag for that particular purpose. For example, when we want to display output in the view, we have to use the div tag because there's no output tag.

Besides that, using the right Semantic tags have a lot of advantages that we would take a look at below.

Advantages of Semantic elements

It helps the browser understand and maintain your code better, thus making it easier to read
It helps with SEO optimization and makes your web app appear on the 1st page
It makes your website more accessible even to people with disabilities

Some lesser-known HTML tags that are worth knowing

The Abbreviation tag: This can be used to highlight some abbreviations that are lesser know and the user would get to know their full forms just by hovering the mouse over the same. Let's understand this with an example.

As we can see, we've used the abbreviations CLI and GUI and passed their full forms as strings in the title attribute. This would appear in the view as follows:

There are many such tags namely: the definition tag, the citation tag, the address tag, etc. If you're interested in learning more about them, do check this out.