The HTML5 Semantic Elements and What They Mean For SEO
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 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.
Other interesting articles about the status of HTML5 (Keep Reading!)