Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the semantics/meaning of the content contained within them. Semantic HTML provides more information that helps to convey the roles and importance of different parts of the web page. It makes the HTML more comprehensible by defining webpages’ different sections and layouts.   Semantic HTML helps search engines, screen readers and other user devices understand the web content’s context. For example, you can use a header tag, instead of using div id="header". 

Semantic HTML tags are used to define the meaning of the content they contain. Tags like,, andare semantic HTML tags, they specify the role of the content present on them. While

and are typical examples of non-semantic HTML elements. They work only as content holders but do not indicate what type of content they contain or what role that particular content plays on the page.

Semantic tags can explain different parts of a webpage. The two most important and common categories are: HTML semantic tags for structure HTML semantic tags for text HTML Semantic tags for structure: They carry the layout of a page. They are also known as HTML5 elements.

The header tag defines content that should be considered the introductory information of a page or section. They range from

to

The navigation tag is used for navigation links. It can be nested within the,, andtags. : The main tag contains the main body of a page. There should be only one tag per page and not repeated across multiple web pages. : The article tag defines content that could stand independently of the page or site it’s on. The article element is used to identify a block of content suitable for reuse and syndication in other settings, such as a blog post or technical article. : Usingis a way of grouping nearby content of a similar theme. It is used to mark off sections of a document such as chapters or major sections of a post. : An aside element defines less important content. It’s often used for sidebars—areas that add complementary but nonessential information. It could contain a glossary definition of a term in a blog post or advertisement. : You useat the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

to

(subheadings): The subheadings of various levels of importance. There are mostly multiple headings of the same level on a single page.  

(paragraph): A standalone paragraph of text.  (anchor): Used to mark up a hyperlink from one page to another. 

• Do not use Semantic tags for styling, always use CSS.  • Do not use

To

tag for text that is not a heading. 

 • Do not use

that is not a quotation. 

 • Do not use or just to add bold or italics to text that doesn’t need emphasis.  

• Always order header elements according to their importance. This will help search engines and readers to better understand and navigate the text.  

• Don’t just copy your visual layout. Instead, it should always follow the semantic structure of the page.

• Semantic HTML tags help search engines understand the importance and context of web pages.  

• By providing a clear understanding of your context, helps in ranking your pages.   

• The pages made with Semantic elements make it easier to read.  

• It provides greater accessibility and a better user experience.  

• The browser can interpret the code better with the help of Semantic HTML.