HTML5 Examples in the Wild

It’s always fun to speculate what the future holds for us, and this morning I’m going to take a look at an emerging trend that I believe will affect the way SEO’s work in the future, HTML5. We’ve already covered some of the early details of HTML5 and how it will affect SEO, at Builtvisible, but we’ve not yet had the chance to review and bookmark specific examples of HTML5 in the wild.

Why HTML5?

HTML 5 is “the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).” W3C Working Draft 10 June 2008. The new language is generally considered a step forward from the previous version, HTML 4.01. Basically, HTML 5 is being created to fix some problems and improve “interoperability” between different “user agents”. In plain English, this means a few things:

  • HTML5 will allow for better cross browser compatibility between mobile, desktop, netbook, pda, Ereader and whatever else can display a web page
  • HTML5 gives web developers new functionality to make for a more dynamic, improved user experience
  • The language should allow for some performance improvements in page load as the need for additional code in web pages is thinned down a little

All in all, HTML5 sounds like a good thing and there has been much more mainstream coverage of the language’s development of late. Wondering what’s under the bonnet of a HTML5 page? I found some live HTML5 examples for you to take a look at:

“Embedded” Video

HTML5 allows for embedded video content inside the <video> tag. Interestingly there’s some debate as to which codec should be used as standard, read more on that here. In the meantime, here’s an example of a HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image:

video html5

Note the <article> and <footer> elements in the source – we’ll get back to those later.

Youtube have built a HTML5 demo version of their site and use much the same markup to embed a video file in MP4:

youtube video embedded HTML5

Another awesome example of HTML5 video players is the new Sublime HTML5 video player which, I believe is still in beta but demos nicely in Google Chrome: http://jilion.com/sublime/video

Document structure

HTML5 gives us a more disciplined framework to define basic web page layout. We mentioned the <article> and <footer> elements earlier. Here’s how the specification intends a HTML5 page to be structured:

In this screenshot, we see the <header> element opened and closed, rather than something like my site, which would uses <div id="header"> to do the same thing:

header and nav example in HTML5

You can see the <article> element begins slightly below the <nav> element, all new elements introduced by HTML5. It’s worth noting at this point that a large scale implementation of these HTML5 elements would greatly reduce the typical inconsistency between different front end web developments, allowing for (potentially) better block analysis by the search engines, a different approach to on-page SEO and easier HTML / web page scraping with XPath.

Here’s a <footer> element out in the wild which, again is new to HTML5. You’ll also notice the rel=”tag” attribute:

footer

Rel=”tag” is a Microformat that you could read more about on Microformatique, John Allsop’s blog. John is author of Microformats: Empowering Your Markup for Web 2.0 – worthwhile reading if you’re looking to max out your Microformats knowledge!

This blog

Yep – SEOgadget is a HTML5 WordPress blog. We’ve not actually announced this as of the 22nd July 2010 while a few styling issues are sorted out, but take a look at the code for yourself!

Editable content

I enjoyed playing with this example of HTML5 driven editable content. On a HTML5 editable page,  the content contributor can add and edit text on the web page, without having to use an editor. Typically, a Wiki or Web page editing tool today would force the user to a new “edit” page, while often demanding basic knowledge of WikiMarkup or basic HTML. In this example, a visitor is able to edit text live on the page. This could have some impressive implications for public, collaborative web page editing:

editable content html5

RGraph / HTML5 Canvas Graphs

Using a combination of the HTML5 CANVAS tag and some clever JavaScript, RGraph allows the web developer to construct graphs on the fly inside the browser. Typically, this would have been carried out by the web server or an image would have to be embedded in the document. As RGraph constructs its graph in the browser, page load time is significantly improved and the charts can be interactive!

From the RGraph website:

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

Here’s an example, but I recommend you check out their site to examine the interactivity of the charts:

html5 chart rgraph

Browser GEO Location

geolocation in Firefox 3.5

HTML5 makes use of the Geo Location API allowing “scripted access to geographical location information associated with the hosting device”. Here’s a live example of just that:

GEO location

Try visiting FindMebyIp.com’s “IP Address” details page with your Firefox 3.5 browser. You’ll see the page grab your IP address, GEOLocation and Map location thanks to Browser GEO location.

If you’re interested in more HTML5 examples, I recommend you take a look at these sites – have fun!

5 Clever uses of the CANVAS tagCSS Ninja

HTML5 Canvas ExamplesPHPguru

HTML5 BoilerplatesHTML5 Doctor

Coding A HTML 5 Layout From ScratchSmashingmagazine.com

HTML5 and the Future of the WebSmashingmagazine.com

How HTML5 Will Change the Way You Use the WebLifehacker



Stay Updated: Sign Up for Webinar & New Blog Alerts

21 thoughts on “HTML5 Examples in the Wild

  1. Nice. Looking forward to better cross client compatability.

  2. Richard, thanks for sharing your trend insights. I so agree that HTML5 will affect SEO in the future, so developers and SEOs better start today.

    Editable content? That opens up a whole new horizon!

    What a fantastic synopsis and explanation! Thanks!

  3. Oops – I just found a broken link – pointing at CSS Ninja. All fixed now, sorry for the 404! Shame on me…

  4. Dave Davis says:

    Absolute fantastic overview Richard. I’m really looking forward to native Geo Location and graph support.

    What’s most interesting is the document structure tags. I believe this will be a huge stepping stone to What Tim Berners Lee calls “Linked Data”. A kind of xml for the little people.

  5. Elenana says:

    Nice! There is another article highlights the capabilities and constraints of this new JavaScript API which is based on wireless geolocation and compare it with the server-side IP geolocation:
    http://www.ip2location.com/html5geolocationapi.aspx

  6. Thanks Dave – glad you share my enthusiasm. Geo location will really help with local search!

  7. Nice. Especcially cross-browser and cross-platform can boost mobile clients! Looking forward to it!

  8. Very nice and logical. I must say oldschool html looks like some ancient thing.

    Do you think it’s useful to design new sites in html5 already?

    SEO-wise I mean. Thanks in advance

  9. karinet says:

    hi,

    Its a nice article, its a advance things.

    The HTML5 is support only for CS5,

    but not supported for Macromedia Dreamweaver 8 and CS4?

  10. MrMikeBong says:

    Are you kidding me? can HTML 5 create this: http://www.2advanced.com – Not a chance. You are basically saying you are content going back to using paint, horrible graphics and mediocre animation – which every single one of those examples display. It’s as if they just discovered animation.

    Take creative thinking and any possible concept which can be brought to life easily with Flash and resort to antique capabilities and BS coding? Missing the boat again with how far back HTML5 really is! and for what? Better question – for Who? Apple. Unbelievably a joke.

    I can make any thing fly, drag, rotate, expand, fade and compute – on any type of canvas I can dream up – that can be displayed on ANY browser with Flash. Oh sorry – accept for your nifty touch-screen Apple devices because you think they are cute.

    What developers really need is someone who is educated and understands that everything is already possible with Flash. Why the heck would I want my website to look like some antique animated garbage from 5-8 years ago.

    This isn’t cool man, these are crap animations and crap display.

    And then some moron will respond that flash is a video player again.

    Don’t drink the Apple-flavored punch!

    Cool? You have got to be joking me.

    Sincerely,

    A Fact.

  11. huren says:

    I’m really sure the basic html, as we know it rigth now, will never change. It’s basic and simple, just as it should be!

  12. dreamincolor says:

    Don´t forget this 12 Incredible HTML5 Experiments

    Check this out: http://www.dreamincoloronline.com/12-incredible-html5-experiments/

  13. Jinglebells says:

    @MrMikeBong the site you linked me to took far too long to load and was mediocre at best. I gave up waiting for the intro animation and hit back.

    HTML5 is so important because most of the public don’t give a rats-ass about watching your carefully crafted animation, they just want the details. If you can haul the processing into the browser via HTML5 rather than in a plugin the page will load instantly.

    No, you won’t have the full control of rotate and shade etc, but you forget websites aren’t for you or your clients to masturbate over, they are for regular people who are pressed for time.

    The sooner Flash ‘developers’ realise this the better.

  14. HTML5 is a very promising technology, but it is far from ready

  15. peter says:

    Great post, thanks.
    I’ve also found some great html5 showcases at http://html5example.net/category/HTML5%20Showcases/
    try them!

  16. Peter Odekerken says:

    lighten up please!

  17. huurwoningen says:

    Interesting to see that the genius HTML-code is getting even better!

  18. Mona says:

    Cool article… Before starting with HTML5 have a look at http://websmine.com/design/html5/avoid-some-common-html5-mistakes/ to avoid some minor mistakes.
    All the best

  19. Mick says:

    Guys – I’ve got to say… I don’t get HTML5.

    I don’t get what’s the hype – apart from the major software vendors pushing it.

    For those of you who can remember – we had *huge* promises around DHTML (HTML4). Data Islands, dynamic elements etc…this was sooo cool in the day.

    What resulted was 400 lines of javascript with:
    if IE4 then…. if IE4.01 then…. if FF3 then ….

    ugly ugly ugly.

    Do we really think that HTML5 is the promised land that will work seamlessly across browsers – tell em he’s dreaming.

    I don’t see why there’s a debate *between* HTML5 vs Flash/Silverlight.

    One thing that flash/Silverlight has been able to bring to the browsing world (for the first time in 10 years) is to escape the ‘standard’ set of UI controls etc. that have plagued UI input for years.

    Sure some cases we just want quick and dirty screens to display info – generally products will have a ‘Save as HTML’ and we don’t care that it’s a 20Kb or our hand crafted 16KB file.

    We’re still back to page by page driven applications – Flash/Silverlight gave us ‘applications’ down at the user.

    Along with all this ‘coolness’ comes maintainability and management.

    I’ll sit and watch while people come up with worthy HTML5 sites because they can.

    I just don’t get it ATM.

  20. Whatisall says:

    HTML is the encoding scheme used to create and format a web document.

  21. N Thakur says:

    Absolute fantastic overview Richard. I’m really looking forward to native Geo Location and graph support.
    Thanks!

Comments are closed.