and are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

Besides the obvious reason that semantic HTML tags are easier to read and understand—for example, by web developers reviewing the code—there are two more specific reasons why you should always use semantic tags.

Accessibility

For sighted users, it’s easy to identify the various parts of a webpage. Headers, footers, and the main content are all immediately visually apparent.

However, it is not that easy for users who are blind or visually impaired and rely on screen readers.

The proper use of HTML semantic tags will allow these readers to understand your content better because their screen readers will communicate your content more accurately.

SEO

Semantic HTML tags are important for SEO (search engine optimization) because they indicate the role of the content within the tags.

That information gives search engine crawlers, like Googlebot, a better understanding of your content. This increases the chances that your content will be selected as a candidate for ranking on the search engine results page (SERP) for relevant keywords.

To put it simply, pages with correctly implemented semantic HTML have an advantage in SEO over those that don’t.

Semantic tags can define different parts of a webpage.

Let’s take a look at the most common semantic HTML elements, divided into two categories based on their usage:

HTML Semantic Tags for Structure

Many semantic HTML tags communicate the layout of a page.

These “structural” tags were introduced when HTML4 got upgraded to HTML5. That’s why they’re also commonly known as semantic HTML5 tags or semantic HTML5 elements.

Here’s a full list:

• 
  
  : The header tag defines content that should be considered the introductory information of a page or section
• 
  : The navigation tag is used for navigation links. It can be nested within the
  tag, but secondary navigation
• : This tag contains the main content (also called the body) of a page. There should be only one tag per page.
• 
  
  : The article tag defines content that could stand independently of the page or site it’s on. It does not necessarily mean a “blog post.” Think of it more as “an article of clothing”—a self-contained item that can be used in various contexts.
• 
  
  : Using
  is a way of grouping nearby content of a similar theme. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.
• 
  : An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information.
• 
  : You use

HTML Semantic Tags for Text

The semantic HTML tags for text are HTML tags that—besides the formatting—also convey the semantic function of the text they contain.

Here are some of the most common examples:

• 
  
  (heading): The H1 tag marks the top level heading. There’s usually only one H1 heading per page.
• 
  

  to

  (subheadings): The subheadings of various levels of importance. There can be 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.
• (ordered list): A list of items that are displayed in a particular order, starting with bullet points. One
• (list item) tag contains a single item in the list.
• (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers. One
• (list item) tag contains a single item of the list.
• /
  

  : A quotation of the text. Use

  for long, multi-line quotations and for shorter, inline quotations.

• (emphasis): Used for text that should be emphasized.
• (strong emphasis): Used for text that should be strongly emphasized.
• : A block of computer code.

Notes: We've only listed some of the most common semantic HTML tags. You can use many others—like

, ,

,