Why You Ought to Think about Semantic HTML For search engine optimization


The elevated use of language understanding in search engines like google and yahoo has prioritized writing content material that’s organized by subjects and subtopics and communicates the message in a method that lacks ambiguity. Semantic HTML makes it clear to search engines like google and yahoo precisely the place the content material you wish to be listed is on a webpage, which is why it ought to be thought-about for each search engine optimization and web site accessibility.

To be clear, Semantic HTML isn’t a rating issue. It’s simply one thing that makes it simpler for search engines like google and yahoo to establish the place the primary content material of a webpage is, which is an excellent factor.

 Search Engines Focus On The Most important Content material

Google’s Search High quality Rater Pointers makes a distinction between three sorts of content material on a webpage:

  1. Most important content material
  2. Supplementary content material
  3. Promoting content material

Most important Content material

Most important content material is what the major search engines wish to index and rank.

Supplementary Content material

Supplementary content material is helpful, like web site navigation but it surely’s not what the major search engines are enthusiastic about indexing.

Promoting Content material

Promoting content material can be not what search engines like google and yahoo go to a webpage to crawl.

Semantic HTML Helps Webpages Obtain Their Objective

The excellence between primary content material and the opposite two sorts of content material is that the Supplementary and Promoting content material don’t assist obtain the aim of the webpage.

Solely the Most important Content material helps a webpage obtain its objective and in keeping with the Search High quality Raters Pointers, these are those that obtain a better Web page High quality rating by the raters.

Whereas that’s in all probability  not a rating sign, creating primary content material that achieves the aim of the webpage remains to be a aim that each writer and search engine optimization ought to work towards.

The Raters Information states on the very starting of Half 1:

“A Web page High quality (PQ) ranking process consists of a URL and a grid to report your observations as you discover the touchdown web page and the web site related to the URL.

The aim of PQ ranking is to judge how properly the web page achieves its objective.”

The important thing to attaining the aim is within the Most important Content material. Semantic HTML is what helps the search engine crawler zero in on that primary content material.

Idea of Web page Construction – Semantic HTML

Rule quantity considered one of search engine optimization is to make webpages straightforward for search engines like google and yahoo to know.

Semantic HTML may be essentially the most basic degree of webpage content material upon which the construction of your entire webpage may be neatly organized into the three elements (primary content material, supplementary content material and promoting content material).

Once we speak about Semantic HTML, we’re not speaking in regards to the that means of phrases. Within the context of HTML, the phrase “semantic” is in regards to the that means of a webpage, damaged down into the element elements.

Identical to a physique is fabricated from a head, torso, legs and arms, a webpage can be a group of elements.

The standard construction of  a webpage seems to be like this:

  • Header (the highest half with the emblem)
  • Navigation
  • Most important Content material
  • Footer

Do you see the half that’s referred to as Most important Content material? That is the half that the major search engines are most enthusiastic about when indexing a webpage. It’s the half that the Search High quality Raters Pointers referred to.

When indexing a webpage, search engines like google and yahoo don’t care in regards to the navigation, footer, promoting, sidebars or the header sections. They care about indexing the primary content material.

Semantic HTML tells the major search engines precisely the place the primary content material exists in order that the indexer can seize it and rank it.

The <primary> HTML Factor

Telling a search engine what content material on a webpage to index is as straightforward as utilizing the <main> HTML element.

The <primary> aspect has a gap tag (<primary>) to mark the place the primary content material begins.

And it has a closing tag (</primary>) to mark the place the primary content material ends.

A webpage can solely have one <primary> part.

Within the part the place your primary content material begins, simply drop within the <primary> aspect. Then use the closing HTML </primary> aspect, to suggest the place the primary part of the content material ends.

This makes it tremendous straightforward for the major search engines to get to the primary content material and index it.

That’s nice proper? Effectively, it will get even higher.

<header> <nav> And <footer> Parts

There are a couple of extra semantic HTML components for dividing a web page into the element elements.


The <header> aspect can be utilized to indicate the realm on the prime of the web page the place the emblem and possibly a search bar go. It’s the part that’s sometimes above the navigation space. The <header> aspect may also be used to wrap round headings (H1, H2, and so forth.) however that’s not likely essential.


The <nav> aspect is what you wrap round your navigation space. For instance, if the navigation space is inside a <div></div> you may add the <nav> components after the <div>.


   <nav> primary navigation hyperlinks and stuff</nav>


Technically the <div> aspect isn’t essential if the <nav> aspect is in use. They each behave as containers, precisely the identical in all trendy browsers. The <nav> aspect is a container like a <div> however the <nav> is a container that has a semantic that means whereas the div has no semantic that means, it’s only a container.

A <nav> aspect may be inside a <div> aspect however a <div> aspect shouldn’t be inside a <nav> aspect as a result of solely navigational components like hyperlinks may be inside a <nav> aspect. It may be accomplished but it surely’s attainable that this may confuse a display reader .


The <footer> aspect, just like the <nav> aspect, is a container like a div with the one distinction being that the <footer> aspect has a semantic that means.

Semantic HTML For Supplementary Content material

Suppose you might have a webpage that has primary content material, but it surely additionally has sidebars, commercials and call-out packing containers that include additional info that’s peripherally associated to the primary content material.

Semantic HTML has a component referred to as the <aside> HTML element.

The <apart> aspect additionally has a gap and a closing tag that denotes the start and the top of the <apart> content material.

It seems to be like this:


And it’s used like this:

<apart> <p>Stuff that is off subject to the primary content material however inside the primary content material space.</p> </apart>

<apart><div>affiliate promoting</div></apart>

<apart>Sidebar with content material that isn't part of the primary content material</apart>

The <article> Semantic  HTML Factor

Semantic HTML permits a writer or search engine optimization to make it clear what a part of the content material is the precise article.  The <article> aspect may be nested throughout the <primary> aspect (however not the opposite method round). That mentioned, the only and most sensible use of the <article> aspect is on a content material class web page the place you might have web page titles and web page excerpts for various pages.

A gap <article> and shutting </article> aspect can wrap across the particular person title/excerpts as a result of a number of <article> components are allowed on a web page.

There Are Many Semantic HTML Parts

There are about 100 semantic components, however you don’t have to make use of all of them.

If you wish to be taught extra about Semantic components take a look at the Mozilla developer pages about Semantic HTML, it’s a helpful useful resource.

On the absolute all-time low, the least that can be utilized are the <primary> and the <apart> components.

Even higher, use the <header>, <nav> and <footer> components, too as a result of they’re helpful in making a overview of your entire webpage, like a format of the webpage.

Different helpful Semantic HTML components are <button>, <type> and <part>, which helps for accessibility causes.

Comfortable coding!

Featured Picture by Shutterstock/avilledorsa


accepting guest posts contact us