Wednesday, June 9th, 2010
What does Open Web mean?
What does Ajax mean? Is it AJAX or Ajax?
Remember those discussions? We had the arguments … the purists who would shout and scream if you said something was Ajax and didn’t use XHR with async mode + XML as the format. Ajax beat our AJAX and became the new term for DHTML and the term that meant “all of the cool shizzle that browsers and JS library authors are now doing!”
The new king on the hill is “HTML5” which has taken that exact mantle. One extreme view is that the term is marketing drivel. The other is that it should ONLY be used to mean the W3C version of the HTML5 core specification.
I really like how Brad goes deeper on HTML5. It is far too confusing to know what capabilities are in browsers, what specs they are in, and what really matters… what can I use as a Web developer.
Brad takes apart the various specs and APIs:
Going deeper, I’ve broken these down into separate areas:
- “HTML5 Strict” – Things that are strictly inside the W3C’s HTML5 spec.
- “Referenced by HTML5” – Things that are referenced by the HTML5 spec and which can optionally be parsed into the DOM and displayed.
- “Broken out of HTML5” – Things that used to be part of HTML5 or its older iterations, called Web Applications and Web Forms.
- “HTML5 Family of Technologies” – Extended set of technologies not strictly part of HTML5 spec or referenced but likely to be used in conjunction with HTML5.
- “HTML5++” – More experimental technologies pushing the web forward that are not part of the HTML5 spec at all; may or may not see broader adoption.
You need to understand that HTML5 began as a revolution to the established order, initiated by the WhatWG. A peace of sorts developed over the years, with the upstart “Web Applications” and “Web Forms” specs brought in-house to the W3C under the moniker HTML5. Over time I’m assuming that the W3C spec, when Final Call has happened, will be the canonical spec.
To simplify things below, I’m only referencing the W3C HTML5 spec for now. Here’s how I would break things down based on what I said above; if you think something should be somewhere else or things get moved around email me and I’ll update this (Last Updated: June 7th, 2010). If you want to know the state of where these technologies are implemented see caniuse.com; if you want your code to detect what is available see Mark Pilgrim’s book for details.“HTML5 Strict”: Strictly Inside the W3C’s HTML5 Spec
- HTML5 Doctype: <!doctype html>
- HTML5 parsing
- XHTML5 serialization
- Cleaning up edge cases of existing web content for greater compatibility
- New semantic, behavior, and application tags: section, nav, article, aside, hgroup, header, footer, address, figure, figcaption, time, code, var, samp, kbd, output, progress, meter, details, summary, command, menu
- Being able to nest H1, H2, etc. arbitrarily
- Sandbox attribute on iframes
- Video tag, API and events
- Audio tag, API, and events
- New form input types: telephone, search, url, e-mail, date, time, month, week, number, range, color
- New form abilities: multiple file upload; placeholder text; directing focus on initial page load; constraint validation by input type and properties
- New link rel types: alternate, archives, author, bookmark, external, help, icon, license, nofollow, noreferrer, pingback, prefetch, search, sidebar, tag, index, up, first, last, next, prev
- data-* attributes for SCRIPT tags
- Offline Web applications
- contenteditable for editing
- Drag and Drop
- UndoManager for consistent undos
- Parsing empty and unknown tags into the DOM: <foobar />
- async attribute on SCRIPT tags
- PUT and DELETE methods for form submission
- Deprecated elements: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u“Referenced by HTML5”: Referenced from W3C HTML5 spec, including how to parse into an HTML5 DOM; HTML5 parsing engines can optionally include these in DOM and display them
- SVG“Broken Out of HTML5”: Used to be inside of HTML5, Web Applications, or Web Forms specifications
- Web Sockets
- Local Persistent Storage (localStorage and sessionStorage)
- SQL Storage (in contention versus IndexDB)
- Specific HTML5 Video codec: H.264, Ogg/Theora, WebM (contention between video codecs)
- Specific HTML5 Audio codec
- Device element
- Ping attribute
- Timed track model for media elements
- Microdata and Microdata Vocabularies (some level of contention versus RDFa and Microformats)
- Cross-document messaging
- Channel messaging
- W3C XMLHttpRequest specification
- Server-Sent Events
- Ajax Session History
- MIME type and Protocol handler registration
- P2P connections“HTML5 Family of Technologies”: Extended set of technologies not strictly part of HTML5 spec or referenced but likely to be used in conjunction with HTML5
- Flex Box Layout
- Multi-Column Layout
- Transforms (2D and 3D)
- Masking and Effects (rounded corners, shadows, etc.)
- CSS3 Selectors
- Media Queries
- Web Fonts – CSS 2.1 @font-face + OpenType/WOFF (slight contention for OpenType vs. WOFF)
- W3C Geolocation
- Metadata – RDFa, Microformats (Some level of contention vs. Microdata)
- Web workers
- EcmaScript 5
- CSS styling of new HTML5 input types (color, range, etc.)
- IndexDB (in contention versus SQL Storage)
- GPU acceleration of HTML, Canvas, SVG, and CSS3 Animations/Transitions/Transforms“HTML5++”: More experimental technologies pushing the web forward; may or may not see broader adoption
- Firefox Audio APIs
- XBL 2.0
We can argue about which term to use when, but I am much more excited about is explaining the capabilities and working together on nice stacks so we can build killer applications on the Web platform in a productive manner.
Check out a nice info graphic on all things HTML5:
Posted by Dion Almaer at 5:10 am