Semantic Tags ?

The word semantic means meaningful so semantic tags are those html tags which convey the meanings and purpose of why it is used in html markup. It is extremely helpful for browsers and developers and they can easily interpret about specific contents based on which semantic tag is used to wrap them.

It is very useful, especially for SEO purposes.
In the past we always used a div tag for headers or footers or literally anything as we did not have a dedicated tags for specific purposes. But now we have a dedicated tags for headers as well as footers.

Some of the most popular and widely used tags are::

• <header> tag : It is used to describe or wrap the header of a webpage, like the navbar and logos, on top of a webpage.
• <footer> tag : It is used to wrap the footer of a webpage, like copyright informations, website author and its address and some navigational links, on bottom of a webpage.
• <nav> tag : It is used to describe or wrap the navbar either on header, or footer or literally anywhere on a webpage.
• <main> tag : It is used to describe or wrap the main content of a webpage.
• <article> tag : It is used to wrap an independent and self-contained content on a webpage, like news articles, feeds, blog posts etc.
• <section> tag : It is used to wrap a section of content. On a webpage when the content is too big, then its divided into related contents together and each related content is caled section on a webpage.
• <aside> tag : It is used to wrap or create sidebars on a webpage.

Some of other less commonly used semantic tags are::

• <time> tag : It is used to wrap time or date time
• <mark> tag : It is used to wrap highlighted text
• <figure> and <figcaption> tag : It is used to wrap an image and its caption together

To read some more semantic tags from official documentations, click below::