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.



Loading Facebook Comments ...

10 Responses

  1. Tim Nash says:

    HTML 5 or XHTML 2 Both working groups seem to spend even more time arguing then the CSS 3 group. I am however looking forward to some browser support for HTML 5 that said we are still waiting for browser support for the last specifications..

  2. Ian Hickson says:

    @tim: You only think it’s more time because the CSS group argues on its secret list instead of in public. :-)

  3. Tim Nash says:

    @Ian sad but very true, I really would like to see HTML5 process speed up just a touch but even if it was ratified tomorrow it will be several years before we will be able to use it in the wild.

  4. Justin says:

    I had nightmares a whole week after first hearing about HTML5. People began migrating from HTML4 to XHTML not because HTML lacked features, but because it had countless design flaws. Slapping a few extra toys onto the same unorganized, cluttered, ugly standard isn’t going to help or change anything. You seem to have many conflicting ideas in your article. HTML5 may look a bit simpler than XHTML at first, but this fallacy becomes completely impossible when you take into account the fact that it’s forgiving. Markup will get ugly faster than you can believe when it’s not a requirement to close tags and use it in such a fashion that would be easily predictable. Not to mention HTML5 seems to be tailored to specific kinds of websites. Because of this, XHTML is clearly much more flexible in design and portability. This also raises questions about your views on mobile device support. When a parser has to guess what the author of the markup meant because it’s malformed, it requires far greater resources than if it’s following a defined standard that needs to be strictly adhered to work as intended. More processing power and memory consumption on a mobile device means slower render times and quicker battery drain. Not to mention SEO – which will become impossible when spiders start barfing nasty markup back up. Then there’s the fact that HTML never was or will be XML. Again, this only limits your use of the technology. If you’re really a stickler for having as few class attributes in your code as possible, learn how to use CSS properly. CSS2 is widely supported and has many advanced selectors that require no toying with the markup. CSS3 only improves upon this. All that said, I’m also quite curious why you would even use HTML5 for its new features when they can be easily scripted with another standard that’s already in wide use – ECMAScript (aka Javascript). I think in the end, the creation and/or use of HTML5 can be attributed only to laziness. It might indeed be a little faster to develop initially, but it will result in lower quality websites that become more difficult to maintain as time goes on and encourage people to half-ass their way through web design. XHTML is by no means perfect, no technology really is. But in my mind it’s obviously and greatly superior to HTML for a plethora of reasons. I think instead of trying to create another standard, which will cause much confusion, people need to work together on those we already have. I certainly take solace in the fact that if HTML5 ever becomes a finished standard, by the time it’s implemented XHTML will likely have total domination over the market.

  5. Ian Hickson says:

    Justin: HTML5 (the spec) defines two languages, one for text/html (which we call HTML) and one for application/xhtml+xml (which we call XHTML, and which is based on XML). You can use whichever one you prefer, the spec doesn’t prefer one or the other.

  6. Justin says:

    Ian: While that’s definitely true, I don’t think that really changes anything for the better. In fact, I dare say it makes the situation worse. The truth is, a new standard that encourages – or even allows – sloppy habits is still going to take us all backwards. Even worse, if HTML5 defines its own XHTML branch it’s only going to create more confusion for adopters of the XHTML and XHTML2 specifications in the future. I firmly believe HTML5 is a huge step in the opposite direction of progress.

  7. Shaun Anderson says:

    @ Ian & Justin – Thanks for taking the time out to have a worthy discussion on my blog :)

  8. Justin says:

    Ian: I wish that were always true. I think there’s a lot of other variables in a situation like this that may alter the outcome (such as time to market). But time will tell. Shaun: Don’t mention it. I think because I have opposing views on the subject I have a responsibility to voice them. People will make up their own decisions, but maybe I can help them see some of the follies that might pop up should the standard become widely used.

  9. Media Training says:

    Really interesting article! Being a website designer myself this does look like an exciting way forward for website design. Being able to break down content via these tags instead of DIVS will really clean up the content of the site and hopefully make Google like you! The only issue really is that we seem to being just mastering one technique and then another one comes along!

  10. Todd says:

    It’s about time another version is out. it’s may be hard to keep up this time but it has to be done. I see way to many web pages that have bad code it’s not funny.

Leave a Reply



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 2014

Trust Hobo with your SEO plan

SEO Audit