What Is Semantic HTML?

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.

What Are Semantic HTML Tags?

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.

Why Do I Need to Use Semantic HTML Tags?

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. 

Types of HTML Semantic Tags

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

 HTML semantic tags for text

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: 

 <header>: The header tag defines content that should be considered the introductory
information of a page or section
  <nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag,
but secondary navigation <nav> tags are also commonly used elsewhere on the page.

 <main>: This tag contains the main content (also called the body) of a page. There should be
only one tag per page.

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

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

 <aside>: An aside element defines content that’s less important. It’s often used for sidebars—
areas that add complementary but nonessential information.

 <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

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:

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

 <h2> to <h6> (subheadings): The subheadings of various levels of importance. There can be

 <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 text that should be emphasized.

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

 <code>: A block of computer code.

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.

Semantic HTML Tips & Best Practices

Finally, let’s cover some HTML implementation tips based on common mistakes people make when
using semantic HTML tags. 

Don't Use Semantic HTML Tags for Styling

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:

 Using an <h1> to <h6> tag for text that is not a heading with the purpose of changing its font
size

 Using <blockquote> just to indent text that is not a quotation

 Using <strong> or <em> just to add bold or italics to text that doesn't need emphasis.

For styling purposes, always use CSS.

Nest the Heading Tags with Semantics in Mind

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: 

Don’t Just Copy Your Visual Layout

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: 

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.