
Alright - here goes another series of blog posts - this time on HTML 5. We're going to try to explain it in plain english but sometimes we just have to veer off into geek-land with more in depth explanations that you - if you're not code-inclined - can pass off to your resident geek (or ask us to explain further!)
First up - a bit 'o background: HTML5 is a markup language for structuring and presenting content for the big triple W. HTML is basically a core technology of the Internet beginning with release version 2.0 and currently in version 4.01. HTML5 is the fifth revision of the HTML standard with the oldest version created in 1990 and standardized as HTML4 as of 1997. HTML5 is the still under development and will also replace XHTML1 and DOM Level 2 HTML (two more geeky standards). In this post we'll look at what's new in HTML5 and the pros and cons of using HTML5 to create websites and webpages.
Why do we need HTML5? Why not XHTML 2.0?
First of all let us understand that HTML5 is not a complete re-invention of the wheel replacing HTML4 (though the specifications ran into 900 pages, twice that of HTML4) but that it attempts to address several inadequacies of HTML4.
So the question is why not move to the next version of XHTML instead of the next version of HTML. The answer to that lies in the beautiful backward compatibility of HTML5 with HTML 4.0 and previous versions - which is not the case with XHTML.
Also earlier specifications i.e. those written for HTML4 and earlier versions were vague about badly written code. Error handling was not given proper priority and previous specifications left error handling to user agents (the browser you use). XHTML 2.0 tried to address this by using a draconian error handling method. The result was devastating. XHTML would stop rendering a page as soon as an error was detected. So realistically not a good solution!
HTML5 on the other hand has detailed algorithms to parse valid syntax (i.e. the structure of a piece of code that tells your website how to run) and how errors should be handled and become a more capable, mobile and web authoring tool.
So what's new in HTML5?
Support for the latest multimedia – The new tags help play video and audio without resorting to third party players or flash. Why is this good? Because the more third party plugins in a website the more stuff you have to update seperate to your core website and the more testing needs to be done (= $$$).
New semantical elements (i.e. some code that explains better to the search engines what part of the webpage actually does) and attributes, such as
- article
- aside
- figcaption
- figure
- footer
- header
- hgroup
- mark
- nav
- section
- timelike
These tags gives page better structure and meaning, and these are particularly helpful for blogs in particular (as well as other apps).
Built-in api's to assist in building applications ("API" stands for 'Application Programming Interface' which, to put rather simply, is a method of allowing connection with applications for the purpose of extending their capability to your specific requirements).
Local storage to help advanced browsers remember what we type even after the browser is closed (although for developers, note that this is now separate from the HTML5 specifications).
The canvas tag to actually draw on a canvas, using Javscript. Plain english: a picture that can be updated dynamically.
Some other new notable features include:
- A simplified DOCTYPE tag
- The figure tag which when combined with the figurecaption tag semantically associates captions with their image counterparts
- No need of using the type attribute while using Link and Script
- No need to wrap quotations within quotes
- Usage of the contenteditable attribute that lets a user edit the contents of an element
- hgroup attribute to group headings together
- required attribute that validates fields with an input that is mandatory
- Option to preload videos and display controls, sliders etc.,
Currently a lot of Javascript and third party plug-ins are being used by browsers for increased functionality (i.e. make them look ultra modern and give cool interactivity). HTML5 tries to address this by bringing much of this functionality to the browser and thereby reducing the need for third party plugins.
OK - so what are the benefits?
The biggest benefit of HTML5 is its backward compatibility with older HTML systems, the advantage of a now-and-future-ready code for websites and the ability to do away with a lot of third party plugins and add-ons. Many of these add-ons and plugins need to be constantly monitored for compatibility over the years requiring more extensive testing and security patching than a 'native' solution (like those found in HTML5). HTML5 also increases the interactions between Javascript and the browser.
The cons: HTML5 is only classed as "in development" so not all browsers are using HTML5 in its entirety (in fact many older browsers won't support most of its new features). For instance all browsers do not support the various audio formats and using the audio tag will only throw up a red flag if one were to use incompatible audio formats. So acceptability and adaptability are the major noticeable cons so this needs to be taken into consideration when planning a new website based on HTML5 - i.e. who do you want to support?
Stay tuned for the next post where we discuss HTML5 for mobile development.