Recently we’ve built a number of websites using HTML5, which at the moment is one of the hottest new topics in the web development industry.
What is HTML5?
HTML5 is the latest version of the HyperText Markup Language. The original version was developed in the late 1980’s to create inter-linked documents which we now refer to as webpages.
HTML is used to describe a document’s structure, and a page generally consisted of a main heading, content with sub headings, bullet point lists and images (somewhat like you might expect in a Word Document).
Time has moved on and in 2012 most websites include an element of design to a greater or lesser extent, with columns, boxes, colours and background images. The advent of Cascading Style Sheets (CSS) and JavaScript has helped to transform webpages from standard looking documents into fully fledged online brochures and ecommerce systems.
OK, what are the advantages of HTML5?
There are a number of advantages that HTML5 brings to the table:
More descriptive semantics
This includes new tags such as <header>, <footer> and <nav>. This makes the markup easier to understand from a developer’s point of view, but might also provide clues to search engines and screen-readers about what content resides where on a page.
More intuitive development
For example “placeholder” tags on form elements can be used to overlay text describing what an input field does. “Enter your family name or surname here” is an example of placeholder text you might see on a form field requiring your surname. Whilst this has always been possible, such a feature would normally required JavaScript in order to function. Not only would this take longer to develop, but visitors with JavaScript disabled wouldn’t be able to see the placeholder text. With HTML5 providing this kind of functionality “out of the box” we can speed up the development process and provide a more reliable experience.
Better forms
HTML5 brings a set of new form elements including number pickers and email address inputs, with automatic validation cutting down on additional JavaScript code and server requests.
Richer media elements
This includes the video tag, so there is no longer a requirement for the proprietary Adobe Flash plugin. This means video content that would normally be displayed using a Flash player will work on Apple devices that don’t support Flash, or for visitors that don’t have the Flash plugin installed.
What are the disadvantages of HTML5?
Whilst that all sounds great, there are some disadvantages of using HTML5:
Browser support
The main disadvantage is browser support. Many of the new HTML5 tags can’t be styled correctly in older browsers without the use of a JavaScript “shim” (in short, a small script that corrects a browser’s shortcomings). This means visitors using an older browser along with JavaScript turned off won’t see a HTML5 page rendered correctly. This is the biggest disadvantage for us, because we like our websites to work in all browsers whether JavaScript is turned on or not. This includes Internet Explorer 6 – although we’re more committed than most when it comes to such things!
Kim Pallister, Intel’s director of content planning was quoted recently as saying: “You’re going to run into fragmented levels of performance and support and you’ll need to be prepared for that. The state of whether or not HTML5 is ready really depends on you sitting down and thinking ‘ready for what?’ Many developers would be happy if their apps ran on only Chrome and Firefox, given the combined market share of both browsers.”
The good news is, various other aspects of HTML5 usually degrade gracefully (for example, the new form tags). That said, you’ll probably notice that a lot of websites still use Adobe Flash to serve audio and video content, simply because the new media tags provided by HTML5 are not supported well enough yet.
Work in progress
The HTML5 specification is not finalised and as such the standard is not yet fully agreed. This means that developing in HTML5 can, for the time being, be a moving target.
Confusion over tags
Many developers will use the <header> tag for the header of a page. Whilst this is correct, it’s not the only place that this tag can be used. If a page features 3 articles, then potentially each article could have its own header. There are also <article>, <section> and <aside> tags and confusion can reign as to when to use them and where they should go.
So, should my site be developed in HTML5, or the older XHTML1.x ?
The answer to this depends on what your site is doing, what content it is serving and who your target audience is. As HTML5 matures and becomes better supported, and the use of older web browsers declines, you can expect to see more and more sites developed using the new markup.
In the meantime, despite all the hype surrounding HTML5, the older XHTML1.x really isn’t a bad option in terms of stability and reliability.