Blog

HTML5 for Beginners. Use it now, its easy!

Ok, so there are a lot of articles out there on HTML5, especially since Google Wave arrived (because it’s the first major app to run on the language), but all the information that you need to know in order to start using it now is either too complicated, or spread out over various websites / articles / tutorials. Hopefully in this article we’ll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.

html5.0

Before I start I’d just like to say a big thank you to the Speak the Web guys who put a series of talks on in the north of England over the last two weeks. The gigs each had a speaker from Opera (amongst others) who enlightened many of us to the true potential of HTML5, and why we should start using it sooner rather than later.

As I’m sure you probably already know, Internet Explorer does not support HTML5. Surprise, surprise. Therefore the first thing that we need to do is:

1. Hack IE using Javascript

loveIE

Unfortunately this is unavoidable if you want to use HTML5 across all major browsers. The only alternative would be to build your site twice, and no one wants to do that!

There is a really good site called HTML5Doctor which provides the perfect fix. They kindly wrote a bit of Javascript, which if included in your <head> will force IE to ‘see’ the following HTML5 elements:

<article>, <aside>, <audio>, <bb>, <canvas>, <datagrid>, <datalist>, <details>, <dialog>, <eventsource>, <figure>, <footer>, <header>, <hgroup>, <mark>, <menu>, <meter>, <nav>, <output>, progress>, <section>, <time>, and last but not least <video>.

You can download it here.

Obviously using Javascript isn’t the ideal fix because if you disable it then the page still won’t work. The only thing you can do to cater for this is to make sure the page degrades gracefully when JS is turned off.

HTML5 also suffers from problems in Firefox 2 and Camino 1 because these two browsers use the Gecko rendering engine. These problems are much harder to fix, but fortunately the browsers only have a tiny share of the market, so if you don’t want to ignore them then the HTML5Doctor site explains how to code for this too.

Now that we’ve got all the major browsers (IE, Safari, Chrome, Firefox, Opera) to recognise the code, we can:

2. Start using it!

yey

One of the main benefits of HTML5 is that we are able to get rid of excess duplicate code. You no longer have to define everything by an ‘id’ or a ‘class’ because the default elements are already built in…

Amongst other elements, for your header you can simply use <header>, for your navigation use <nav>, for content areas use <section>, and for your footer, guess what, use <footer>. Also, within a <section> you can split up your content using <article>. This is good because browsers are able to weight the relevance of your content more accurately, thus helping with SEO, and it of course cuts down on coding time! You can still carry on using <div id=”header”> mind, this won’t stop working, it’s just that now there’s a better, more simple way of doing it.

There are another two major advances in HTML5 which will make life much more simple for developers. The first being:

3. The <video> tag

putEmUp

Now I’m not going to get into the whole “Flash is dead” debate because that’s another whole post, all I’ll say is this… In my opinion Flash will suffer from the <video> tag but it’s not going away any time soon, and one of the main reasons for this is security. With the HTML5 <video> tag there is no way of protecting your content, i.e. anyone will be able to download it. I’m personally all for ‘open’ content, and think that if someone is willing to put their video on the web, they shouldn’t mind if someone wants to save it. In fact, they should be glad that they want to save it! – because that means they like it and want to share it with people! But, once again, that is another debate for another time…

So, to use the <video> tag all you have to do is this:

<video src=video.ogv></video>

If you want to cater for people potentially not being able to see it then the easiest thing to do is this:

<video src=video.ogv>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>

There are all sorts of other things that you can do with video too such as: Customise controls, have native keyboard accessibility, and with a little hack or two you can even add subtitles, in different languages!

One annoying issue with video is that Apple have decided not to support the open source OGG format in Safari, instead opting for H264, so in order to cater for all browsers we need to include two sources, one to each filetype. The good thing is that the browser will automatically detect which one it needs to use and simply won’t display the other:

<video width=320 height=240 controls>
<source src=”video.ogv” type=”video/ogg”>
<source src=”video.mp4″ type=”video/mp4″>
<p>Your browser cannot view this content: <a href=”video.ogv”>Download video</a>
</video>

The second major advance that I’m really excited about is:

4. Form Validation!

nojquery

Unfortunately this isn’t yet supported by most browsers, in fact I’m quite certain that Opera is the only one at the moment. However I wanted to include it just because I think it’s going to be brilliant…

Instead of messing around with Javascript you’ll be able to validate forms by simply applying an input type, and telling it whether it is required or not:

<input type=”email” required>
<input type=”date”>
<input type=”url”>

You can also use autofocus like this:

<input type=”email” required autofocus>

How simple is that!

5. To Conclude…

Even though we are far from full support, and the final HTML5 spec isn’t even finished yet, we can begin to use (most of) the things that are outlined above, and I really think that we should… The more people start using, the quicker the web will advance and the more pressure will be put on people like Microsoft to give in to web standards and support something properly for a change.

To follow on from this article next week we’ll be writing about why we think web designers / developers should stop designing for dated browsers and fully embrace new technologies such as CSS3 and HTML5. How can we move forward if we’re stuck in the past? …We should be making amazing things first and supporting old technologies second, not the other way around.

By Chris Skelton

  • Pingback: HTML5 for Beginners. Use it now, its easy! « Freelance Web Designer from Hyderabad, India.

  • smaug

    All the versions of Firefox use Gecko. Firefox 2 is just old, very old, so
    it uses an old version of Gecko.

  • http://fred.com Fred

    Sounds dull to me.

    Basically, they’re creating a bunch of tags for problems people have already solved. No websites today are struggling to create headers, footers, nav bars, articles or sections and search engines seem to be doing a pretty decent job of finding stuff.

    So – what problem is this solving and where’s the innovation?

    Did it take a bunch of smart people a long time to come up with something as dull and boring as;

    it just seems to add nothing to what’s already there.

    Then when you talk about form validation – there are _tonnes_ of frameworks out there that already automate this so it’s hardly revolutionary to reinvent that wheel in the browser rather than in some client-side or server-side framework.

    Then video. Why is it a hack to add subtitles? Surely they can do more than just play a video? The plug-in approach like Flash or Silverlight offers you a whole bunch more than that so it sounds like from day 1 you’re “hacking” to do something far less than those frameworks already achieve for free.

    By the way – you’re wrong about IE. IE8 does implement some of HTML5. It doesn’t implement all of it or even a lot of it but it does implement some of it.

    Then again, HTML5 isn’t finished so I’m not surprised the IE people haven’t implemented it if it’s likely to change.

    So – anyone with an existing site is unlikely to pay a lot of money to switch it to HTML5 unless ( like some big Tech companies ) they have an axe to grind.

    And anyone with a new site is going to be reluctant to just throw HTML5 at it in case a huge chunk of their user base gets a poor experience from it. So, they’ll code with what already works because the “benefit” of HTML 5 seems to be about some new tags that do nothing new and there’s little end-user benefit in that.

  • http://www.whatcreative.co.uk What!?

    Hi ‘Fred’,

    I appreciate what you’re saying, but I think you’re missing the point slightly. The way I see it, and the way that the people involved in putting it together are describing it, isn’t something revolutionary, it’s not something completely new or something that can’t be done by other means, it’s simply an extension to the language – a way to make things easier and quicker for developers and web designers. A ‘pimped up’ version of HTML that can do a lot more than the current language.

    The form validation isn’t claiming to be something new, again, it’s just making life easier without having to use other plugins or languages to do something that it makes sense to be able to do in HTML. The video subtitles only have to be hacked at the moment, they are working on that and I’m pretty certain that when the spec is finished there will be a proper way of implementing it. And once again, it’s not supposed to do everything that Flash or Silverlight can do, it’s just supposed to make things easier for both the coder, and the user – because they don’t have to mess around downloading plugins.

    Finally, people with current website written in HTML 4.01 don’t have to worry about upgrading because nothing is going to stop working, you’ll still be able to code in the same way you can now, you’ll just have the option of using the more logical HTML5.

  • Anon

    Fred is right. Will this save me time when developing a website? No. If you want to extend functionality of the basics of HTML5, such as validation you have to go back to using a JS framework anyway. What if I want to limit the characters to letters only, or what if I want it to check the database to see if a username is available as I type, what if I want to check two textboxes have the same value in?

    With the whole tag thing, I really don’t see the benefit to a developer, it doesn’t make it “easier” to develop the site just because I can use fancy tags now. What if I use id=”" and class=”" to store important info for AJAX apps to work etc.

    The whole video thing is OK I guess, but lets face it, look at the stats on flash. Over 99% of people have Flash installed at least version 7 or above I believe. Which is fine for video.

    HTML 5 may be good for VERY basic designers who can’t figure out how to use a JS framework. For almost everyone else at present, it’s pretty useless.

  • http://www.musings.it Federica Sibella

    Hi everybody,
    interesting debate here: I agree with Anon, “old” developers could do their job perfectly even without HTML5, while beginners would have some major benefit from the new tags, because they seem more straightforward.

    My point is: HTML till now has been quite open-minded, let me explain, if you want to call your for navigation “purple-cow” you could do it (and you still can with HTML5 using the old way, of course); now with tag everybody will be invited to use , this may be an improvement and a better solution for SEO purposes and for code organization, but in some way, the developer will loose a little bit of his freedom. [Sorry for my English, far from perfect :-)]

  • Chris

    Hi,

    I think HTML 5 is the way forward its adding extra features to standard HTML not replacing it, how can this be bad? Yes will still need to use javascript but when creating simple forms it will be so easy to use the standard validation, and other times will require a fully customised javascript validation.

    As to Anons points on 99% people having flash. Many people do but also the web is full of lots of different flash players and video formats, many are buggy and have issues. One standard video format is surely a massive advantage and time saver.

    Chris

  • Rahul J

    Agree with OP. HTML5 is a good step breaking from its image of being just a dumb tagged language. Another feature I heard was WebSockets, which IMO looked cool.
    It’s uncluttering things up, it’s removing over dependency of items like flash & jQuery (for trivial things ofcourse. cmon why should i need to learn n load up jquery for basic things like form validations?) which should have been there as a bundle in the first place. Sounds good to me!

  • http://www.markmccorkell.com Mark McCorkell

    Thanks for the article – that’s the first HTML5 article I’ve read that made sense, and wasn’t over complicated. From what I have read so far HTML5 looks great, and I really like the form validation component.

    Drew Wilson’s “Full-Size” was being considered for being added to the HTML5 spec, but it wasn’t to be added in the end. Would have been even more awesome of that was included. If you are unfamiliar with Full-Size, it is a sleek inline image viewer that would work via a default image link in the browser – http://www.addfullsize.com/

  • http://twitter.com/corestudiosnet Core Studios

    It’s not only innovation that makes something good. HTML5 is going to make our lives easier since the code will be more organized and well-structured. Maybe 99% uses Flash but I think this will change in one or two years. Think logical – HTML5 brings us only benefits up to this point.

    I’m thinking about using it in my brand’s new website.

    Cheers

  • http://woeye.net Lars Hoss

    Sure, you can write something like . But from a semantic point of view it is still a div. One of many. HTML5 helps to write us better semantic HTML. Sure, we have micro-formats. But these are a meta language on top of HTML essentially. It somehow saddens me that in 2010 we still have to discuss about the advantages of semantic HTML.

  • http://www.jonathanstowell.com Jon

    I think you have to think about standards. Think about the incompatibility between different technologies. Standards produce a law that companies need to adhere to, in this case the companies who produce browsers.

    Obviously there are points in this article where some things work in some browsers, nothing works in IE. When HTML5 is official Microsoft will have to release a compatible browser. I feel HTML5 is a great step forward towards solving these incompatibilities, and is working towards solving the niggling differences in behaviour we sometimes experience using javascript with several different vendor browsers.

    Javascript will always have its place in developing rich internet apps. However Google are not stupid and have lead the way when it has come to AJAX using it to good effect on their products. If they have decided to use HTML5 on Wave then their must be a reason for that, it must be the way forward.

  • Ryan

    I see the validity of HTML5. More or less from an SEO standpoint. If the browser can sort out the miscellaneous from the useful good text on a site, then I’m all for it. Esp, since I recently upgraded to Safari 5 and saw the reader capabilities to remove ads and give you a nice reading experience. I see the SEO impact the same way, you can get through the clutter and get to the meat of it and call it a day. I could keep going through the motions with div’s and id’s but it’s time for a change and I’m welcoming that change. I don’t use IE6 because something better came out, although we might not have known it off the bat.

  • Jeremy Anderson

    A lot of people seem to have the wrong idea about the new tags such as header, nav, section, and the other “layout” type tags. Everyone seems to be referring to them as if they are css “#id” tags but they are more like “.classes” Your content can have a header, or a sidebar, your content can have a footer, too. Anyone who questions how amazing html5 is or says it sounds “dull,” simply has not done enough research on the subject. I’m thrilled to the gills about html5! Look into HTML5 for designer from Jeremy Keith, read an excerpt from the book, Fred, before you start opining so dourly. Thanks for the good article.

  • http://padasalgi.webng.com Raghavendra

    Hi everybody,
    Many web hosting server do not support HTML5 as yet and I do not know if this could be done in near future.Hence it is uncertain for personal web sites to switch over to HTML 5. It is natural for any body to change for the new and better.Well I am not an expert what ever I have felt it is here. If I am wrong please forget this.