From whatwg.org: “The term ‘HTML5’ is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF.”
A brief history of HTML5, via Wikipedia:
The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000. In 2009, the W3C allowed the XHTML 2.0 Working Group’s charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.
This W3C article explains the differences between HTML4 and HTML5: http://dev.w3.org/html5/html4-differences/
Of course, the history of HTML (HyperText Markup Language) goes back much further, and there are many interesting articles online narrating it. This is one of them: http://www.w3.org/People/Raggett/book4/ch02.html Dive into HTML5 also provides interesting insights: http://diveintohtml5.ep.io/past.html.
- Dive into HTML5 – HTML5 tutorials (mirror)
- Mozilla HTML5 page
- WHATWG HTML5 page
- HTML5 tag reference (w3schools.com)
- HTML5 reference (Dive into HTML5)
HTML5 and Standards
The Dive into HTML5 website has a nice quote on creating standards, from Mozilla:
Implementations and specifications have to do a delicate dance together. You don’t want implementations to happen before the specification is finished, because people start depending on the details of implementations and that constrains the specification. However, you also don’t want the specification to be finished before there are implementations and author experience with those implementations, because you need the feedback. There is unavoidable tension here, but we just have to muddle on through.
- Canvas (chapter 4.)
- Video (chapter 5.)
- Geolocation (chapter 6.)
- HTML5 storage (chapter 7.)
- Offline web applications (chapter 8.)
- HTML5 forms (chapter 9.)
- Microdata (chapter 10.)
- Session history and navigation (chapter 11.)
Web workers are also mentioned, and I would also add <audio> as an important addition (see the whatwg.org audio link), although there are problems with video and audio regarding the standardization of these.
We are in a point where not all HTML5 features are well implemented across the most popular browsers. But it’s possible to detect which features are implemented or not in the user’s browser, and provide fallback methods.
More on detection:
- at Dive into HTML5;
- Modernizr, a library to detect and provide fallback to HTML5 and CSS3 features;
- a collection of HTML5 fallbacks.
Let’s look at how browsers are implementing HTML5:
What is <Canvas>?
From whatwg.org: “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.”
On the history of <Canvas>, from Wikipedia: “Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers, and Opera in 2006, and standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies”.
Wikipedia provides a good resource on adoption of <Canvas> by browser engines. Important note on <Canvas> compatibility with Internet Explorer, from Dive into HTML5:
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML (…). CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
The main types of style types are (again from Wikipedia):
- Inline styles, inside the HTML document, style information on a single element, specified using the “style” attribute
- Embedded style, blocks of CSS information inside the HTML itself
- External style sheets, i.e., a separate CSS file referenced from the document
Further exploration and inspiration:
- Media+Code blog: http://mlab.taik.fi/mediacode/c/html5-js
- Chrome Experiments: http://www.chromeexperiments.com/
- Google and HTML5: http://www.html5rocks.com/en/
- Apple and HTML5: http://www.apple.com/html5/
- Facebook and HTML5: https://www.facebook.com/note.php?note_id=438532093919
(Note: since the original Dive into HTML5 has disappeared, all links point to a mirror. Multiple mirrors of the website have emerged, so if one mirror goes offline, it should be easy to find a replacement)