Making the Jump: Understanding the Benefits of HTML5 and Semantic Markup

If you haven’t noticed, the web is a constantly changing and fluid environment.

New ideas are altering the way we view websites. But how are these developments changing the way Google and other popular search engines view your website?

Much has been written about whether most developers should start incorporating the use of HTML5 into their client’s websites. Some, like myself, answer with a resounding “yes” while others seem to want to wait for HTML5 to be announced as an official supported web standard by the W3C (World Wide Web Consortium).

So What is the Answer?

Unfortunately, there is no answer and the benefits of HTML5 varies from project to project. For example, if most of a sites web traffic comes from browsers such as older browsers like Internet Explorer 7/8 then it might not be the best approach to use. However, if the majority of site traffic is a tech savvy audience that uses modern browsers like Chrome, Safari and Firefox you should be embracing these new technologies to not only enhance their browsing experiences but also set a pace for other late adopters to follow.

How Can I Tell What Browsers My Sites Visitors Use?

Google Analytics to the rescue! Thankfully you can get all of the data you need from the Audience > Technology > Browser & OS dataset in Analytics. See a below screenshot of the area I am referencing below:

So How Do I Get Started With HTML5?

Getting started is pretty simple.

If you’re already familiar with using HTML then it’s time to understand why the semantic markup that HTML5 offers is so appealing from an SEO standpoint.

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 webpage.

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

**Code courtesy of Remy Sharp’s HTML5 Shiv Project

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.

Long story short, it is impossible to cater to every environment on the web. So depending on your audience, it may be time to stop catering to the people who continue to use outdated technologies like IE6 and start rewarding the users who keep up with the times :D.

Summary

Being advocates of optimization, clean code, and cutting edge websites, we suggest using HTML5 markup whenever possible.

Why? To stay ahead of the curve and start implementing early to take full advantage of a hot new technology that we can refine long before it becomes the standard.

Understandably, people may be weary of using these new technologies for fear that their users browser environment will not play nicely with them. However, there are many tools available to help tame the various ways that older browsers can take advantage of HTML5 elements.