Sunday, December 5, 2010

HTML5



HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The Web Hypertext Application Technology Working Group(WHATWG) began work on the new standard in 2004, at a time when the World Wide Web Consortium (W3C) was focusing future developments onXHTML 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.

HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web is a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, together with manysyntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications.


In particular, HTML5 adds many new syntax features. These include <video><audio> and <canvas> elements as well as integration of SVG content, which are designed to improve the inclusion and handling of multimedia and graphic content on the web without recourse to proprietary plugins and their APIs. Other new elements such as <section><article><header> and <nav> are designed to improve the semantic richness of documents. Other elements have been removed. New attributes have also been introduced, and others removed, to improve and simplify semantic expression. Some elements, such as <a><cite> and <menu> have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification. It also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents.


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

Filter demos: canvas contenteditable dnd events file-api geolocation history manifestoffline postMessage sql-database storage video websocket workers
DemoSupportTechnology
dataset (data-* attributes)ie: nonefirefox: noneopera: nonesafari: nightlychrome: livedataset
History API using pushStateie: nonefirefox: nightlyopera: nonesafari: livechrome: livehistory
Drag files directly into your browser Not directly part of HTML5ie: nonefirefox: liveopera: nonesafari: nonechrome: nightlyfile-api dnd
Simple chat clientie: nonefirefox: nightlyopera: nightlysafari: livechrome: livewebsocket
Two videos playing in syncie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Interactive canvas gradientsie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Canvas & Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo canvas
Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Canvasie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Content Editableie: livefirefox: liveopera: livesafari: livechrome: livecontenteditable storage
Geolocation Works on Safari Mobile tooie: nonefirefox: liveopera: livesafari: livechrome: livegeolocation
postMessage same domainie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
postMessage cross domainie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
drag and dropie: livefirefox: liveopera: nonesafari: livechrome: livednd
drag anythingie: livefirefox: liveopera: nonesafari: livechrome: livednd
offline detection Works on Safari Mobile tooie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
navigator.onLine tests Doesn't use events, only pollsie: livefirefox: liveopera: livesafari: nonechrome: noneoffline
on/offline event testsie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
offline application using the manifest FF 3.6 is still buggy - doesn't request manifest after initial loadie: nonefirefox: liveopera: livesafari: livechrome: liveoffline manifest
Storageie: livefirefox: liveopera: livesafari: livechrome: livestorage
Web SQL Database Storageie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web SQL Database - rollback testie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web Workers watch out - uses a lot of CPU!example without - will hang your browserie: nonefirefox: liveopera: livesafari: livechrome: liveworkers

HTML 5 speed test: Internet Explorer 9 vs. Chrome 6



No comments: