Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

HTML5 and Beyond

 

HTML5 and Beyond

Guest blogger Ryan Wachtl is an independant US-based web developer and runs the SilverStripe user...

by Ryan Wachtl

Posted 25 October 2012

Read post

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.

Defining HTML5

Are you still with me? Great! Let’s move on and demystify this thing we call HTML5. There are several different specifications and technologies that fall under the HTML5 umbrella, most of which are actually JavaScript APIs. However, they can be divided up into 8 easy-to-digest groups. Semantics, Storage, Device Access, Connectivity, Multimedia, Graphics, Performance, and finally, Presentation.

Semantics

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.

Storage

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.

Device Access

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.

Connectivity

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.

Multimedia

HTML5 brings us better API’s for consuming and manipulating audio and video within the browser. Opening up a whole world of possibilities.

Graphics

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.

Performance

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.

Presentation

And last, but not least, CSS3. Because without it, we’d have no style! (I made a pun). Along with new appearance oriented properties like box shadow, multiple backgrounds, and text shadow; CSS3 also takes on some behavioral tasks that previously could only be accomplished via JavaScript. These new behaviors include transitions, transforms, and animations. All of which achieve better performance over JavaScript by using GPU accelerated compositing.

Native API’s and Polyfills

Now that you’re all excited about the “new shiny”, we have to come down from our high and started thinking about how to use these tools responsibly. A popular approach is to use feature detection and either progressively enhance an experience or provide polyfills in the event that a browser does not play nice with your new toys. Modernizr is a really nice tool for doing such feature detection. Also, since these new API’s are still under some degree of development and implementation you may want to avoid using the native APIs directly and instead interface through a facade that can be used to contain any code you may need to achieve cross-browser support. One such attempt can be found in h5ive, which is a collection of thin facade APIs wrapped around HTML5 JavaScript features. It’s a neat idea, but one that I haven’t dedicated much time to.

HTML.next

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!

HTML5 Resources