HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website.

HTML5 has been on the radar for a while. As new browsers (including  the new Firefox 4) start to support  a wider range of HTML5 features, it's use among developers is sharply on the rise. To meet demand we now offer a regular public HTML5 & CSS3 Training course, which builds on the knowledge gained in our existing HTML& CSS Training Course.

We also provide a range of other Web Design courses including our Web Design Week and more advanced programming courses such as JavaScript, AJAX and jQuery.

We still get asked a lot of questions about the different versions of HTML - especially the differences between HTML4 and HTML5. Throw XHTML in to the mix and it can be a confusing picture for the uninitiated!

So - here's our quick summary of the three main types of HTML in use today...

What are the differences between HTML4, HTML5 and XHTML?

OK - the VERY basics first - HTML stands for HyperText Markup Language, and is the language web browsers use to interpret what gets displayed when you look up a site. Sorry - you probably knew that already!

HTML4

First developed by Tim Berners-Lee in 1990 (ancient history in web-terms!) HTML4 is the oldest version of HTML still in use.

HTML4 has a very loose syntax - for example closing tags are often optional. As an example - paragraphs in HTML4 are automatically ended when a new paragraph is started. (you don't have to close a paragraph with a tag in HTML4)

This loose syntax was great for amateur developers and made HTML very easy to adopt - however loose syntax isn't great if you want to achieve a specific result across browsers, as it makes it harder for browsers to accurately guess at what you mean (all browsers interpret HTML slightly differently, which with the number of different browsers in use today makes HTML4 unreliable)

To counter this problem, XHTML was introduced - and whilst we still refer to HTML as plain old "HTML" - the majority of sites developed today ACTUALLY use XHTML.

TIP - At the top of the code on most web-pages is a DOCTYPE definition, which tells the browser which version of HTML that page is written in. If you right click your mouse somewhere on this page and select "View Source" or "View Page Source", you'll see this at the top:

XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That tells your browser that this page is written in XHTML and to use that doctype definition (dtd) to interpret the code.

Many older sites still use the  HTML4 Doctype - try viewing the source code on this old site and you'll see:

HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

So, back to the plot - What, is XHTML then...

XHTML

XHTML stands for eXtensible Hypertext Markup Language. It’s actually a specific dialect of XML which is a generalised markup language. The main difference between XHTML and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other. These restrictions are sensible and you probably won’t run up against them.

The browser will make no assumptions and will allow you your mistakes. Aside from this, all the tags are the same as for HTML4. This is why XHTML is now the language used by most professional web developers.

HTML5

HTML5 is a new specification which is still under development (although becoming more popular by the day). HTML5 provides some important new functionality which reflects the way that we use the web today (especially the explosion in use of the mobile web) - as HTML5 becomes more widely used developers will be able to do a lot of exciting new things with websites!

At the time of writing, it’s supported by the latest versions of Chrome, Firefox and Safari, and to some degree by Internet Explorer.

HTML5 is still a fairly loose term and refers to a number of related technologies. It takes the best features of HTML4 and adds a number of extra tags. A summary of all of the tags can be found here: http://www.w3schools.com/html5/html5_reference.asp

We don't have space to explain ALL of HTML5's new features here - but some of the high-profile ones are:

• Video - HTML5 allows developers to embed video directly in to a web page without using a plugin. With HTML4 the best way to embed video was using Flash - however with HTML5 that's not necessary - this makes it very attractive for developers who want their users to be able to see their content on iPhones and iPads - as Apple has famously blocked Flash on all of its mobile devices.
• Geolocation - An important feature which will be used in many mobile web-apps, the geolocation feature enables the site to locate the user, either by GPS (in mobile phones, iPads etc...), by IP Address (for desktops) and also via Wi-Fi and Bluetooth
• Canvas - This new feature for images allows you to manipulate graphics and photos - it uses JavaScript to allow you to draw graphics on a web page. Essentially this is another Flash alternative - explained in more detail (and better than I have just done so!) here

Working examples of these new features (and a whole load more) can be found here: http://html5demos.com/. Don't forget, you'll need a browser that supports HTML5 to view these.

Interesting Aside: The DOCTYPE for HTML5 is much simpler than for HTML4 / XHTML. If you visit a site that uses HTML5 (like Apple for instance), right click and select "View Source" or "View Page Source" - you'll see this at the top:

That's it! - Compare that the the XHTML doctype definition above - much simpler!