Search Engine Optimization (SEO)  is important to any website.  Being able to show up in the top of search rankings heightens visitor traffic to your site and may have a significant impact on conversions–sales, subscriptions, and so on.   While content has an enormous impact on a site’s ranking, one of the factors you may not consider is how the code itself may affect it.  HTML5,  while not fully supported in all browsers, can be helpful in getting search engine’s “spiders” to rank your content as more relevant.

What’s going on now?

HTML is not a programming language.  It’s abbreviation gives it away as “hypertext markup language” which is a fancy way of saying that it tells your browser how to display the information–kind of like a graphic designer might layout a page, adding images and breaking text into paragraphs and headings.  What search engine spiders (a.k.a. bots or crawlers) do is feed that information, gathering relevant bits of text so that the search engine can feed that, plus some other factors, into an algorithm which ranks your website accordingly.

In HTML4 –the version  currently supported by all major browsers, though Internet Explorer is debatable sometimes (ha ha)— div tags are used to denote sections of the page–perhaps for styling reasons, or so the designer/developer can tell where he or she is.  This is an example (though not the full markup for the page) and I have added comments to mark the end of divs:

<div id=”header”>
<h1>Page Title</h1>
<div id=”nav”>
<a href=”http://blog.jpdesigntheory.com”>Link to somewhere</a>
</div><!–end nav–>
</div><!–end header–>
<div class=”article”>
<p>This is some important main content–perhaps a blog post, or just the main portion of the website</p>
</div><!–end article–>
<div id=”sidebar”>
<p>This is not a portion of the main text.</p>
</div><!–end sidebar–>
<div id=”footer”>(c) 2012
</div><!–end footer–>

Did that take you a minute to get through?  Imagine if I hadn’t commented–would you have been able to understand as quickly what was going on with the code?  Admittedly, a spider is designed specifically to glean information off of a webpage, but it might not most relevant content.  Also, in our example, our divs had relatively easy to understand names and was commented, which is not always the case and makes the interpreting job that much harder.

How does HTML5 change that?

With HTML5, the generic div is joined by a myriad other descriptive tags.  These tags are used for areas found on most websites–like headers and footers .  Here’s that same markup again in HTML5:

<header>
<h1>Page Title</h1>
<nav>
<a href=”http://blog.jpdesigntheory.com”>Link to somewhere</a>
</nav>
</header>
<article>
<p>This is some important main content–perhaps a blog post, or just the main portion of the website</p>
</article>
<aside>
<p>This is not a portion of the main text.*</p>
</aside>
<footer>(c) 2012</footer>

*Note the change from id=”sidebar” to <aside>. <aside> merely denotes an area that is not part of the main content, which could be a sidebar.

See how much easier that is to follow? The same is true for search engine spiders. They are able to identify exactly what is important and what might be lesser content on the page.

Because neither version of our example has any styling information, both would display (in an HTML5 supporting browser) as:

It has no impact on mere mortals not viewing the site’s source code, but can make life easier for developers and spiders alike.

It should be said that HTML5 is not yet supported in all browsers, so I wouldn’t recommend dropping HTML4 immediately. However, as browsers update to support these new tags, it is beneficial for business owners, site creators, and SEO ninjas alike to be aware that content might be king, but code is still the poet laureate.

2024 Digital Marketing Guide

Make 2024 a big year for your business and increase your brand awareness with this exclusive guide. 

SUBSCRIBE NOW!

You have Successfully Subscribed!