The HTML5 Semantic Elements and What They Mean For SEO

Post written by Roy Dopaishi
On Thursday, February 23rd, 2017

Get a FREE estimate to upgrade your website’s SEO structure

Codeable.io provides over 500 senior WordPress Experts to help you with your customization needs.

Having a semantically coded site or landing page that adheres to all HTML5 guidelines could be the extra push your site needs to boost rankings. This is where having a general knowledge about HTML5 will come in handy.

HTML5 Overview

HTML5 is the latest version of Hypertext Markup Language that adds a handful of new HTML elements we can use to better define our page’s content for search engines.

What HTML5 Means For SEO

Standard HTML tags (e.g.title, h1, etc.) form the basis of on-page SEO. Search engines use these tags to better understand what a page is about. Optimizing these factors is a basic SEO practice to improve rankings in the search results. HTML5 has provided us with a couple of new semantic elements that we might want to consider when optimizing our page.

What’s a Semantic Element?

Semantic Elements refer to HTML elements that have a specific meaning. For example <h1> is a semantic element. It tells google bots that the content within the tag is the most significant header contained in the HTML document. <div> on the other hand, is a non-semantic element as it only indicates a division in the HTML document and provide no information on what goes before, after or within the tag.

New Semantic Tags in HTML5

The release of HTML5 has seen the introduction of several new semantic tags that provide even richer information to search engines. Here is an overview of several HTML5 elements and what they mean for WordPress on-page SEO:

  • <main>: The <main> tag encloses the dominant content of the blog including all article content and other related sections that extend the central theme of the page, such as the <article> tag and supporting <section> tags. 
  • <article>: The <article> tag makes it easy to mark new blog posts or article entries in an online publication. Search engines can put more weight on any content wrapped with this tag. It also helps to clean up the HTML code by reducing the use of <div> tags.
  • <section>: Blog posts are typically broken into different sections to make it easier for users to find what they are looking for. The <section> tag can be used to specify these subsections of your content, each with their own separate HTML heading. 
  • <header>: The <header> tag is similar to the <h1> tag in that it can be used to specify the header of a page. But it can also be used to indicate the header section of a page and can even contain navigation links and other relevant text.
  • <footer>: While not as useful as the <header> tag, the <footer> tag still offers SEO benefits as it can be used to specify content in the footer section of a website such as company information and other useful links. Each page can even have its own footer section.
  • <nav>: Navigation is undoubtedly one of the most important aspects of a site. The <nav> tag can be used to specify links on a page such in the main site navigation or for pagination.
  • <video>: The <video> tag is easily one of the most useful tags as it allows for cross-browser compatibility to display videos without having to use Flash. HTML5 also makes it possible to include additional information about the video such as captions and subtitles.
  • <aside>: An <aside> tag can be like a section tag, but one that focuses on secondary content such as  sidebar, or a post-article call to action might be a good place to use <aside> tags.

Is this really going to help my website?

We can’t be too sure. Even in 2017 there are very few published case studies or official acknowledgements by Google that having an semantically HTML5 correct website will move you up in the rankings, or create better exposure from public searches. But it is safe to acknowledge that the more semantical detail you provide to bots then the better search engines will be able to understand and index your content. Using HTML5 elements surely can’t hurt.

Can I hire an expert to perform an SEO audit or upgrade my theme to support HTML5? 

Yes! Yes you can. We’ve partnered with Codeable.io to provide top-quality SEO structural assistance. 

Other interesting articles about the status of HTML5 (Keep Reading!)

  • https://www.cnet.com/news/html5-is-done-but-two-groups-still-wrestle-over-webs-future/
  • https://www.cnet.com/news/w3c-buttons-down-html5-opens-up-html5-1/
  • https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
  • https://www.myriamjessier.com/blog/html5-accessibility-seo/
  • https://webmasters.googleblog.com/2010/03/microdata-support-for-rich-snippets.html
  • https://www.semrush.com/blog/semantic-html5-guide/

Get a FREE estimate to upgrade your website’s SEO structure

Codeable.io provides over 500 senior WordPress Experts to help you with your customization needs.

About the Author:
Roy's interests include blogging, search engine marketing, SEO, Web design, and E-commerce. He leads content marketing at Perth Web Design. Perth Web Design (PWD) was started in Autumn 2007, with the sole aim of providing high quality website design and internet marketing solutions to all sectors of the market at affordable rates. PWD offers a range of web solutions customized with one goal in mind; your success online.

Signup and get started with Inbound Now

Sign Up for Free

Download

[gravityform id="3" name="Popup Form" title="false" description="false" ajax="true"]