Why use HTML5 to code your website?

There are advantages for both website owners and developers though in this article we're focussing on the benefits to the website owner and some of the practicalities for the website developer.

Browser support for HTML5 can be a bit varied but as time goes on, HTML5 facilities will become the norm. Should you be developing a website for users that are known to have old browsers, then you will have to employ some of the workarounds that are available.

Some of the advantages of HTML5

Semantic elements

HTML5 has 'semantic' tags so that you can delineate headers, footers, navigation sections, the main body, articles, miscellaneous sections and so forth. This is useful for both SEO and accessibility reasons in that both search engines and screen readers can make a better analysis of the content. So HTML5 will help towards your search engine results ranking and make it easier for the visually impaired to use your website.

Video and audio support

Most mobile devices don't support Flash and Silverlight and it was always pretty hard work to make the object and embed tags work properly anyway. We now have the video and audio tags which make the job a whole load easier.

Practicalities

In no way is the following a complete guide, it's just a few pointers.

Doctype

All HTML pages should have a doctype at the very top of the page so that the browser knows what to expect. For HTML4 and XHTML pages, this line could get long and complicated, but for HTML5 it's easy:

<!doctype html>

and the <html> tags like:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">

can be replaced by the much simpler:

<html lang="en-gb">

Paired tags

All tags in HTML5 are paired eg you can no longer just have a leading <p> paragraph tag, it must have a corresponding </p> at its end.

For tags like <img> and <link> - the latter being in the <head> section - you can close the pair with a slash before the > eg

<img src="..." ... />
<link rel="stylesheet" href="..." />

but note that the <script> tag cannot be closed in this way.

'Legacy' browser support

Older - known as 'legacy' in the trade - browsers may have problems with HTML5. To get around this, you can include the following line in the <head> block of the web page:

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

though some web developers may prefer to keep a copy of this file on their web server so that they can control the caching.