Semantic HTML

When I first started learning HTML the most common word I heard was semantic HTML but I didn't knew what does it means. So I googled watched some videos and now I know exactly what it means. I am going to tell you everything about semantic HTML in this blog.

# Semantic Element : A semantic element clearly describes its meaning to both the browser and the developer.

# Semantic HTML : An important principle in web design is the idea of using HTML elements to indicate what they actually are rather than how they may appear in the browser by default. Semantic HTML accurately describe the purpose of the element and the type of content that is inside them. It is considered the foundation of web accessibility.

HTML 5 have introduced many more semantic HTML tags this tags don't do anything on there own but they provide a nice way for screen reader or web authors to define various parts of the document.

Some semantic HTML tags are:

  • article tag:-Article tag is used to represent an article.
  • aside tag:-Defines content aside from the page content.
  • details tag:- In details tag we can define additional information which can be hided or viewed in the document.
  • figcaption tag:- Figcaption defines a caption for figure element.
  • footer tag:- Footer tag defines a section which is footer ,in which author information or copyright information is present.
  • header tag:- Header tag defines a section which contain logo, navigational links, heading and subheadings header is present on the top of document .
  • main tag:- It defines the main content of the document.
  • mark tag:- Mark tag is used to highlight text which holds some specific information for the document.
  • nav tag:- Nav defines a section which contains navigation links.
  • section tag:- Section tag is used to define section in the document.

There would be a question which must be in your mind that is why should we use semantic HTML?

Let me tell you we should use Semantic HTML because it makes code more readable and accessible and another fact is that website which use semantic HTML ranks better on google while users with screen readers get more information about structure of the site rather than using divs for every element.