Benefits and Advantages of HTML5 Semantic Markup for SEO

Why Should Developers Be Excited About Semantic Markup?

Semantic Markup is best defined as using special HTML tags that describe what kind of content it contains. In very simple terms: it offers you very clean code – something all SEOs and developers love.

To illustrate the advantages that HTML5 offers, consider how <h1> and <p> elements are used to differentiate separate kinds of text on a page. These <h1> & <h2> tags are critical to on-page SEO. They are on the top of the HTML markup food chain and theoretically should describe the current pages topic.

HTML5 takes semantics a step further with new HTML tags for larger portions of websites. Take a look at some of them below:

<header></header>
<nav></nav>
<menu></menu>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

Most likely you can guess what some of the above tags should be used for on a web page.

If not, here is a very brief breakdown:

The <header> Element

The header element is used to contain the header elements of any block of related content. For example, the global header for a website that contains a sites logo and or navigation would be a basic example of where to use this tag.The <footer> Element

This element is used in the same way as the header element but for common footer elements of a block of related content. An example of this would be the utility links on the footer of a site.

The <nav> Element

This one is fairly simple but it can also be abused. This is intended to define major navigation areas on a page, and in most cases, will be groups of links. Be aware that just because several links might be in proximity of each other does not qualify the use of the <nav> element.

The <menu> Element

This element is similar to the <nav> element but is a more relaxed fashion. This element might be used to group together links that act as a sub-navigation. Another user would be for social media icons that link out to a site’s social media pages.

The <article> Element

This element is used for self-contained compositions of a webpage. For example, a list of your site’s blog posts each would be contained by an <article> tag. This can also be used for other types of content as well. Just keep in mind its self-contained use.

The <section> Element

The <section> element is commonly misused. Most people would think of using the section tag as a container block level element to contain a portion of the site. This is incorrect. The true way to use the section element is to think of it in terms of grouping specific portions of content. Inside a section you may have multiple headings to further narrow the focus of the section and there may be multiple sections inside a particular piece of content. Whew! If you find yourself confused by this (I know I was originally) then don’t worry. You can check out this article by Bruce Lawson for a more in-depth view of the section element : Prognosis of the HTML5 Section Element.

The <aside> Element

This is another frequently misused element. Most people think of this element as a sidebar container. A better way of understanding of how to use the <aside> element is by reserving it for tangentially related content outside of an article. One way you may use it is when you have a sidebar element that contains features a block of advertisement above a blogroll panel. The blogroll is tangentially related to the blog article but the advertisement block is not related to the article tangentially. Therefore, using an <aside> tag for an entire sidebar doesn’t accurately describe its contents.

So What’s the Big Deal for SEO?

This is not only easy for us to understand but also much easier for a Google Bot to crawl and index due to its clean markup. Traditional methods for defining header and footer containers consisted of <div> tags with unique id’s to target them with CSS for styling. While that is an effective way of doing things it is far messier than using specific tags for each area of content.

Look at the example below of how many current websites use <div> tags to create a basic two-column layout with a header and footer:

<div id=”header”>
<ul id=”nav”>
</ul><!-- End #nav -->
</div><!-- End #header -->
<div id=”content”>
<div id="blogpost">
<h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p>
</div><!-- End #blogpost -->
</div><!-- End #content -->
<div id=”sidebar”>
<div id="blogroll">
<p>My blogroll Content.</p>
</div><!-- End #blogroll -->
</div><!-- End #sidebar -->
<div id=”footer”>
<p>My Footer Content.</p>
</div><!-- End #footer --> 

And below is the same layout using HTML5 markup:

<header> <nav></nav> </header>
<div id=”content”>
<article id="blogpost">
<section> <h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p>
</section> </article><!-- End #blogpost --> </div><!-- End #content -->
<div id=”sidebar”> <aside id="blogroll"> <p>My blogroll Content.</p> </aside>
<!-- End #blogroll --> </div><!-- End #sidebar --> <footer> <p>My Footer Content.</p> </footer>

While the markup might not seem shorter it definitely is more semantic. The <div> elements in the first example have no semantic meaning outside their given ID attributes. Whereas, the second example uses the new semantic markup HTML5 elements to better describe the content and the overall layout of the page. This will be much easily understood by a Google Bot or a screen reader due to its logical markup.

And of Course…. The Drawbacks

Unfortunately, do to the lack of standardization between browsers currently these tags can be interpreted differently or entirely ignored all together. This most commonly happens in older versions of Internet Explorer. Luckily, there are methods to “teach” the browser what these new tags are in order to style them appropriately using CSS. Simply embed this script in the <head> section of your markup to enable the use of the new tags for older browsers:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Without getting too technical, when the above jQuery script runs it creates new elements inside the Internet Explorer Document Object Model(DOM) so that it understands the new markup. Bottom line is that it works and that is all that matters to most people. The only qualm some people have regarding the above patch is that it is JavaScript dependent. However, the percentage of users who browse with JavaScript disabled has been on the decline for several years and is a very small portion of the overall users on the web.