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".  

What do you mean by semantic HTML tags? 

Semantic HTML tags are used to define the meaning of the content they contain.  

Tags like <header>, <article>, and <footer> are semantic HTML tags, they specify the role of the content present on them. While <div> and <span> 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.

Why should we use Semantic HTML tags?

The main reason to use Semantic HTML tags is, it becomes easier to read and understand. Search engines weigh keyword importance by their placement in the HTML hierarchy. It means keywords enclosed in a <h1> tag are given more importance than those enclosed in an <p>. By placing the most important keywords higher up in the hierarchy, we’re telling search what the page is about, hence improving the page. 

Accessibility: Semantic HTML elements help in describing their meaning in a way that’s readable by humans and machines. The exact and proper use of HTML semantic tags will allow the users to understand your content better. 

Maintenance: It is easier for developers as Semantic tags are completely separated from the presentation, giving liberty to change styles without making changes to data.    

Types of HTML Semantic tags 

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. 

Here’s a full list:  

<header>: The header tag defines content that should be considered the introductory information of a page or section. They range from <h1> to <h6>. 

<nav>: The navigation tag is used for navigation links. It can be nested within the <header>, <footer>, and <aside> tags. 

<main>: 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. 

<article>: 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. 

<section>: Using <section> is 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. 

<aside>: 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. 

<footer>: You use <footer> at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

HTML Semantic tags for text: 

Semantic HTML tags for text are HTML tags that convey the text they contain along with the formatting. 

Below are the examples: 

<h1> (heading): It indicates the top-level heading. There’s normally only one H1 heading per page. 

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

<p> (paragraph): A standalone paragraph of text. 

<a> (anchor): Used to mark up a hyperlink from one page to another. 

<ol> (ordered list): A list of items that are displayed in a particular order, starting with bullet points. One <li> (list item) tag contains a single item in the list. 

<ul> (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers. One <li> (list item) tag contains a single item of the list.  

<q> / <blockquote>: A quotation of the text. Use <blockquote> for long, multi-line quotations and <q> for shorter, inline quotations. 

<em> (emphasis): Used for a text that should be emphasized. 

<strong> (strong emphasis): Used for a text that should be strongly emphasized. 

<code>: A block of computer code.  

Semantic HTML best practices 

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

• Do not use <h1> to <h6> tag for text that is not a heading. 

• Do not use <blockquote> that is not a quotation. 

• Do not use <strong> or <em> 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.  

Advantages of Semantic HTML 

• 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.