Guest blogger Ryan Wachtl is an independant US-based web developer and runs the SilverStripe user group in Madison. Prior to this, Ryan wrote about SilverStripe PayPal Mini Cart Integration and The Trials and Tribulations of a Freelancer.
Last week I attended the HTML5 Developer Conference in San Francisco, California. It was a great conference that reignited my passion for front-end development. We’re in the middle of a major transitional period within the world of web development. Implementations and support for HTML5 vary greatly across the spectrum of browsers and we don’t want to end up in a ‘this site best viewed in’ situation. We’ve already witnessed the results of that, I’m looking at you Internet Explorer. But in all fairness, IE 10 is making progress towards offering up wider support for current and emerging web standards. I had originally planned to recap my experience at the conference, but quickly realized that I wanted to step back a bit and address HTML5 directly. The term HTML5 is used very loosely both inside and outside of our industry and I see a lot of confusion arise around the topic. In this post, I’m going to get you up-to-speed with what exactly HTML5 is, and what it means for the future of the web.
HTML 5.0 is planned to reach W3C Recommendation (REC) by 2014. A W3C Recommendation is the state of a specification that the World Wide Web Consortium (W3C) endorses for implementation by browser vendors. The W3C Recommendation track begins with a Working Draft (WD), matures to a Candidate Recommendation (CR) and then moves along to a Proposed Recommendation (PR) before finally becoming a W3C Recommendation. HTML 5.0 is currently in Working Draft and on track to reach CR soon. HTML5 intends to replace HTML 3.2, HTML 4, and XHTML 1.x. I was once one of those who felt very strongly that XHTML was the future of the web, but have since had a change of heart. The XHTML2 Working Group closed in December of 2010 and further efforts were directed into the XHTML syntax of HTML5, which I think is good, since I still cringe when I see markup written IN ALL CAPS. I prefer to author my HTML5 using XML syntax (most notably lowercase with quoted attributes and closing tags), but don’t mind using shorthand for boolean attributes. Up until recently the WHATWG (Web Hypertext Application Technology Working Group) was also working on HTML5, originally called “Web Applications 1.0”, but earlier this year announced that they would be shifting focus towards an evolving HTML “living standard” and general bug fixing, while leaving the traditional versioned specifications to the W3C.
A Brief History
HTML, primarily authored by Tim Berners-Lee, has it’s roots in SGML (Standard Generalized Markup Language). HTML, XHTML, and XML are all SGML-based languages. The graphic below illustrates some of the milestones we’ve reached on the path to HTML5.
This is what we have historically associated with HTML, good old hypertext markup. HTML5 brings a host of new semantic tags and RDFa (Resource Description Framework in Attributes), microdata, and microformats. These all aim to enable better machine-to-machine readability, human accessibility, and general findability.
With a shift to apps using client-side CPU and limited network connectivity on mobile devices, the need for applications to run offline is becoming increasingly important. Things like App Cache, Session and Local Storage, Indexed DB, and the File API are allowing us to do this. Cookies will soon be a thing of the past (yay!) and replaced by either session or local storage, depending on how long you need the stored data to persist.
One of the major advantages that native apps have had over web apps is access to device hardware. Along with Geolocation, developers will soon have access to a device’s microphone, camera, contacts, events, and even device orientation. Check out Firefox OS to see just how far HTML5 can go.
Ajax has been great for the advancement of the web but still relies on one-way communication (sending a request to the server and receiving a response). WebSockets move us into the realm of real-time web, enabling bi-directional client- server communication and Server-sent events enable push notifications to be sent to web browsers.
HTML5 brings us better API’s for consuming and manipulating audio and video within the browser. Opening up a whole world of possibilities.
The toolbox for working with graphics is expanding to include SVG, Canvas, WebGL (Web Graphics Library), and CSS3 3D. While Canvas is gaining wide adoption in HTML5 games, I believe SVG will play a big role in delivering scalable, resolution independent images to the now growing number of high pixel density devices emerging into the market. Learn more about Canvas vs SVG.
Web Workers allow us to run background processes in our apps and the new XMLHttpRequest 2 specification ease the process of working with cross-origin requests and uploading progress events.
Native API’s and Polyfills
As if we aren’t already getting ahead of things with HTML5, HTML.next offers a glimpse even further into the future of HTML. By taking a more modular approach to the development of future specifications, much in the same way that CSS3 has started doing already, features will be able to develop independent of each other and advance the web faster.
Newly Proposed Elements
- content an insertion point in a shadow DOM subtree
- data marking up machine-readable data
- datagrid an interactive/sortable representation of tree, list, or tabular data in the form of rows and cells
- decorator defines a new decorator
- element defines a new custom element
- intent represents an intent registration
- menuitem a command in a menu in a Web application
- reco speech-input (speech recognition) control in a user interface
- shadow an insertion point, where the next-oldest shadow DOM subtree in elementâ€™s list of shadow DOM subtrees is rendered
- template an inert chunk of DOM that can then be used for creating DOM instances in an unknown parsing context
- tts an audio stream comprised of synthesized speech output (text to speech)
One of the things that originally attracted me to the web was the constant movement and advances in technology used to store and distribute information. I wake up every morning knowing that I will learn something new that day and accept the fact that I’ll probably miss out on something new, as well. I hope this post has helped to both energize and inform you.
How are you handling these new features? Have I overlooked something major that deserves mention? Feel free to chime in and let me know!
- Proposed HTML Elements and Attributes beyond HTML 5.0
- HTML5 Rocks
- Modernizer and the HTML5 Cross Browser Polyfills wiki
- Can I use.. Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
- HTML5 Doctor Helping you implement HTML5 today
- HTML5, A technical specification for Web developers