Semantic HTML, also known as semantic markup, refers to the use of HTML tags that convey the meaning—or semantics—of the content contained within them.
By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page.
(As opposed to non-semantic HTML, which uses tags that don’t directly convey meaning.)
Note: HTML is a language that is used to structure a website. This guide assumes a basic understanding of HTML. If you’re a total beginner, looking at an HTML introduction guide will be helpful.
Semantic HTML tags are tags that define the meaning of the content they contain.
For example, tags like <header>, <article>, and <footer> are semantic HTML tags. They clearly indicate the role of the content they contain.
On the other hand, tags like<div> and <span> 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.
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.
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:
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 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:
Note: We’ve only listed some of the most common semantic HTML tags. You can use many others—like <summary>, <time>, <address>, <video>, etc.—to make the content of your website easier to understand. To discover more HTML semantic elements, check out the list of all HTML tags by W3Schools.
Finally, let’s cover some HTML implementation tips based on common mistakes people make when using semantic HTML tags.
Although web browsers apply styling to many semantic tags (e.g., the text within an <a> tag is usually blue and underlined), it doesn’t mean HTML tags are supposed to be used to style your text.
In other words, just as you wouldn’t use an <a> tag for a “non-link” text just to make it blue and underlined, you should not use other semantic tags for purely stylistic purposes.
Here are some typical examples of using semantic tags incorrectly:
For styling purposes, always use CSS.
Always order header elements by importance.
For example, all the H3 headings that follow a certain H2 heading should be subtopics of that H2.
This way, the structure of headings creates a logical hierarchy of the topics within your piece of content and helps both readers and search engines better understand and navigate the text.
Tip: Use Semrush’s Site Audit tool to identify issues with H1 headings, other HTML, and on-page SEO errors your site might suffer from.
The same advice—nesting tags by their meaning—applies to all the other semantic HTML tags.
Which brings us to the next piece of advice:
Your HTML implementation shouldn’t be a mere duplicate of the visual layout. Instead, it should follow the semantic structure of the page.
Let’s take a look at this example:
The usage of HTML tags on the left side is incorrect because it indicates that the page contains four different topics, rather than one topic and three subtopics, as shown on the right.
On the right-hand side, we have a properly constructed page using semantic HTML. Although there are four separate sections in the visual layout of the page, the HTML tags are nested according to the semantics of the content.
So one of them is a lot of SEOs right now, and a lot of…
Here is a recap of what happened in the search forums today, through the eyes…
Navigating the world of Instagram posting involves many considerations, but one crucial aspect is timing…
I am deeply sad to report that Mark Irvine passed away unexpectedly last night. Mark…
Google AdSense has removed reference to your privacy policy as a place to withdraw consent.…
One of the big worries for Google investors was the cost of running AI to…
This website uses cookies.
Leave a Comment