HTML5 SEO Differences Between HTML5 v HTML4 Versions (Example)


W3C

What is the difference between html4 and html5?

I’m continuing to study up a bit on the new version of HTML from the W3C – HTML5. Here’s some research what a page written in HTML 4 will look like rewritten in the new HTML5.

The most obvious question to ask is;

what are the main differences between HTML5 & HTML4?

For example, visualise a simple blog front page with a header at the top, a footer at the bottom, a couple of entries, a navigation section, and a sidebar, as shown in the following code;

A Typical Web Page In HTML 4

<html>  <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="/blog/">Hobo Web</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-102">
<h2><a href="/test-page/">
Test Page 1</a></h2>        <div class="entry">
<p>Article Text here</p>
</div>
</div>
<div class="post" id="post-101">
<h2><a href="/test2/">
Test 2</a></h2>
<div class="entry">
<p>Article 2 Text here</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>
</body>
</html>

…..here’s the same page, with differences clear, in the W3C’s new incarnation.

An Example of a Typical Page in HTML 5;

<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<header>
<h1><a href="http://blog/">Hobo Web</a></h1>
</header>
<section>
<article>
<h2><a href="/test-page/">
Test Page 1</a></h2>        <p>Article Text here</p>
</article>
<article>
<h2><a href="/test2/">
Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>
</html>

Looks exciting (although I am hardly an expert) – a real chance to clean up your website designs.

Learn More About HTML5

2008-01-22: The W3C published an early draft of HTML 5, a major revision of the markup language for the Web. The HTML Working Group is creating HTML 5 to be the open, royalty-free specification for rich Web content and Web applications.

“HTML is of course a very important standard,” said Tim Berners-Lee, author of the first version of HTML and W3C Director. “I am glad to see that the community of developers, including browser vendors, is working together to create the best possible path for the Web.”

Discover other new features, read the press release, and learn more about the future of HTML.

HTML 5 Notes

HTML 5 introduces new elements to HTML for the first time since the 1990’s. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

HTML 5 defines the fifth major revision of the core language of the World Wide Web – HTML – from the W3C (World Wide Web Consortium). Also called Web Applications 1.0 – there are still no no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table.

HTML 5 adds new elements to specifically identify each of these common constructs:

  • section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
  • header: The page header shown on the page; not the same as the head element
  • footer: The page footer where the fine print goes; the signature in an e-mail message
  • nav: A collection of links to other pages
  • article: An independent entry in a blog, magazine, compendium, and so forth

So, that’s the differences between html4 and html5. You might like our recent article discussing whether or not there is an optimal keyword density. :)

HTML5 SEO Advice From Google Employee

Interesting SEO advice for HTML5 web developers – advice from John Mu of Google in Google webmaster forum:

In general, our crawlers are used to not being able to parse all HTML markup – be it from broken HTML, embedded XML content or from the new HTML5 tags. Our general strategy is to wait to see how content is marked up on the web in practice and to adapt to that. If we find that more and more content uses HTML5 markup, that this markup can give us additional information, and that it doesn’t cause problems if webmasters incorrectly use it (which is always a problem in the beginning), then over time we’ll attempt to work that into our algorithms. With that in mind, I definitely wouldn’t want to stand in the way of your implementing parts of your site with HTML5, but I also wouldn’t expect to see special treatment of your content due to the HTML5 markup at the moment. HTML5 is still very much a work in progress, so it’s great to see bleeding-edge sites making use of the new possibilities :)

In general, we work hard to understand as much of the web as possible, but I have a feeling that HTML5 markup is not yet as widely in use (and in use correctly) that it would make sense for us to use it as a means of understanding content better. As HTML5 gains in popularity and as we recognize specific markup elements that provide value to our indexing system, this is likely to change, but at the moment I would not assume that you would have an advantage by using HTML5 instead of older variants.Returning different content to search engine crawlers as you would to similar users would be considered cloaking and against our Webmaster Guidelines. I would not recommend treating search engine crawlers different than you would similar users.

Personally, I would recommend using HTML5 where you think that it already makes sense, perhaps reverting to HTML4 if you can determine that the browser won’t support the elements of HTML5 that you use properly. While this will not result in an advantage for your content in our search results, it generally wouldn’t be disadvantageous either.

As I always expected. Designing your website in HTML5 at this time will not give your site a boost in Google rankings, simply because it’s not widely adopted yet (in a relative sense). I certainly stick with HTML4/XHTML for SEO projects at the moment, but I am toying with the idea of making the Hobo site entirely in HTML5. *Good stuff via SER.





Learn how you can get more sales from your website

Subscribe for free and let us share with you:

  • how to submit your site to Google, Yahoo & Bing
  • how to optimise your site to get more traffic from Google
  • how to target the most valuable keywords for your business
  • how to make your site rank better in free Google listings
  • how to rank high & avoid Google penalties in 2015

Trust Hobo with your SEO plan

SEO Audit