Wait a minute, what’s HTML?
Firstly I think we should explain what HTML is: HTML stands for Hypertext Markup Language and is the language which web designers use to build the basic structure of a web page.
Web designers use this in conjunction with CSS (Cascading Style Sheets) – this language tells the HTML elements what to look like and where to be, creating the web pages that you see on the internet.
HTML5, as the name would suggest, is the fifth revision of the HTML mark-up language. The name has also become an umbrella term for the latest CSS and other modern code used in conjunction with the fifth version of HTML.
How did we get to HTML5 then?
HTML 4, the predecessor to HTML5, was first released in 1997. Since then it has been added to and molded to fit the web as it has evolved over the years.
Plugins and add-ons such as Flash, Silverlight and Java were created to add media and video support to the web. However downloading and installing plugins is resource heavy and in the case of portable devices, battery draining. They can also be slow to load and can interrupt the web browsing experience. A new version of the markup language was needed to accommodate the ever evolving web.
What that new language would be was in contention for a few years as two separate groups followed different paths that would eventually merge together.
The World Wide Web Consortium (W3C) is an international community that works to develop web standards. In 2004 the W3C voted against continuing work on HTML, instead wanting to concentrate on other languages that would hopefully supplant HTML as the primary structural language of the web. They decided their new preferred markup language would be XHTML.
Later that year a consortium was founded called the Web Hypertext Application Technology Working Group (WHATWG ), its members included a few famous names – notably Apple, the Mozilla Foundation and Opera. Their goal was to take up the development of HTML while the W3C focused on XHTML.
By 2006 it had become clear that XHTML would not become the new standard that the W3C hoped for. There were a number of reasons for this – but the main one: laziness. XHTML turned out to be a very strict language, and errors in buggy code could cause a website to simply stop working. On the other hand HTML tends to be a very forgiving format – even if you miss out a small amount of punctuation things generally hold together. A strict language would not last long in today’s internet, where the quality of code and applications varies wildly from site to site.
The W3C decided to stop working on XHTML and began working with WHATWG on a new HTML – which would be called HTML5. The following rules were established for the new language:
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
(http://www.w3schools.com/html/html5_intro.asp)
So why is everyone talking about it?
HTML5 presents many new and exciting features that allows designers and developers to build websites and applications which are faster, safer, more reliable and less resource and processor heavy.
New features like the Canvas element, which is used for 2D drawing and animation, have been introduced. Other new features such as Video and Audio allow media to be played back natively without the use of a plugin.
Content specific elements such as <article>, <header>, <footer> and <nav> have been introduced resulting in a more semantic, informative and better laid out webpage, which creates a more useful and data driven web, for programs, search engines and users. The more semantic element names mean you can direct search engine bots to the more important content first, regardless of where it is in your page’s layout. The new use of micro data syntax allows for more information to be added to the html. New form types such as calendar and date have also been introduced.
HTML5 allows applications and data to be stored locally through the use of HTML App Cache, as well as Local Storage, Indexed DB and the File API specification. The offline storage capability means that HTML5 applications, once initially viewed, can work offline and will be able to start quicker upon revisiting.
CSS3 – Cascading Style Sheets
Like all HTML it would look very plain and boring without the use of CSS. CSS3 is the latest release of Cascading Style Sheets, the language used to style web sites. CSS3 brings the use of many new features, such as rounded corners, gradients and box shadows, which all previously would have been done using images. Using CSS to create these effects natively in the browser means that the page will load more quickly as it is not waiting for images to load.
CSS3 also saw the introduction of transitions, animations and transforms as well as 3D features. Again being able to make these animations in the browser, negates the need for a Flash or similar plugins and should result in a quicker, glossier and more exciting site. The use of CSS3 with HTML5 means that designers are able to produce more interesting and varied website designs, that before they might have veered away from.
The use of CSS3 media queries and APIs (Application Programming Interfaces) such as Geolocation allows HTML5 sites to be device aware. The media queries can tell the site to look different for a certain screen size or orientation (portrait or landscape). Geolocation API can find out the location of the device. New user interactions such as drag and drop, device orientation and on touch for touch screen devices are new ways for the users to interact with the web. Work is continuing on device access which means that in the future web apps may be able to accept input from a microphone, camera or USB connection.
The technologies used under the umbrella term of HTML5, such as HTML, CSS and JavaScript, are relatively easy to learn, certainly easier than other languages out there. With the use of frameworks and libraries such a JQuery, Dojo or Backbone, a lot of the hard work has already been done for the designer. This makes HTML5 a fast, approachable, easier to maintain and relatively inexpensive way of producing web sites and web applications.
When can I use it?
In 2008 the first version of HTML5 was published and Firefox 3 became the first HTML5 compatible browser. As other browser began adding support, developers and designers began using it, in 2010 YouTube started to offer an HTML5 video viewer, but what really brought HTML5 to the forefront, was an open letter written by Apple’s Steve Jobs. Jobs explained in his letter why Flash would never be supported on Apple’s smart devices.
“Flash was designed for PC’s using mice, not for touch screens using fingers.”
~ Steve Jobs, April 2010 (http://www.apple.com/hotnews/thoughts-on-flash/)
After this announcement from Jobs many companies started to follow suit using HTML5 and leaving Flash behind. Companies such as Amazon, Disney, Twitter, Flickr and Google began using HTML 5 in their web sites and applications in 2011. In November 2011 Adobe announced that it is to stop development of Flash for mobile devices and is to focus on an HTML5 development tool.
HTML5 is not yet an official standard, and no web browsers have full support. Most of the web browsers latest versions such as Firefox, Opera, Safari, Chrome and even Internet Explorer (9 &10) support some HTML5 features. Some browsers support more than others, with IE not yet supporting as much as other browsers. Web browsers are being continually updated and as they are, more and more features and attributes will be supported. The quicker all web browsers adopt the new HTML standard the better the web will become.
On the 17th December 2012 the W3C published the complete definition of HTML5 and Canvas 2D specifications; although not yet official standards this lets developers and designers know what they can expect from HTML5 in the future. The W3C is on target to finish the HTML5 standard in 2014.
HTML5 use is expected to boom in 2013 as January this year saw sales of HTML5-compatible smartphones reach one billion worldwide.
It may not be official yet, but it’s here – let’s use what we can!
A recent Cybermill site which uses HTML5 and CSS3 features is http://www.entitythemovie.com/
