Presentation: HTML5 101

HTML5 101

What it is, what it isn't and where it might go

Christian Heilmann, Mozilla, October 2011

This is a simple overview about what HTML5 is, what it isn't and what new stuff is around the corner.

HTML3.2 ➽HTML4 ➽HTML4.01 ➽HTML5

HTML5 is the evolution of HTML4.

Documents ➽ Apps

Instead of defining a language to structure connected documents on the world wide web the HTML5 standard defines a technology stack to build applications.

Main differences:

  • Richer, new semantics
  • Richer forms
  • Native multimedia
  • In-browser painting and animating with canvas

The main differences are: a richer semantic on the HTML part, support for native audio and video and the ability to draw diagrams and animate parts of the document.

HTML5 is not a Flash killer

HTML5 is not the replacement of Flash. It makes a few of the use cases of Flash not necessary any longer but it has a different role to play.

HTML5 is real-world XHTML

If anything, HTML5 replaces XHTML which was the W3C's attempt to make XML the main language of the web.

XML != WWW

XML for the web was a no-go from the beginning as it is not forgiving enough. A single mistake in the markup of the document (which could be an unencoded ampersand coming from a third party ad provide) would have made the web site impossible to use. In essence we punished our end users for mistakes the developer made. The web as a platform should be more flexible than that.

HTML5 = making it easier for developers

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <style type="text/css" media="screen"></style> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello</title> </head> <body> <h1>hello</h1> <script type="text/javascript" charset="utf-8"></script> </body> </html>

HTML5 simplified a lot for the developer. The syntax is less strict than HTML4 and a lot of unnecessary attributes and elements are not required any longer. It is low-fat HTML4, so to say.

HTML5 = making it easier for developers

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style></style> </head> <body> <header><h1>Hello</h1></header> <section></section> <footer></footer> <script></script> </body> </html>

Two players

HTML5 is worked on by two different parties. The WHATWG working group which calls HTML5 HTML by now as it is a "living standard" and the W3C making it a standard that can be used in corporate environments. You could say the WHATWG is the R&D department, whereas the W3C is shipping.

Innovation from the browsers

A lot of the innovation in HTML5 comes from browser vendors, not from the W3C behind closed doors. A large chunk of the HTML5 standard describes what a browser needs to do with the code to be an HTML5 browser.

Browsers + standards = ♥

This is new, in the past the implementation of the standard was the job of the browser makers, the W3C just threw out the standard documents. This lead to a lot of standards with no practical use.

HTML5 ♥ old browsers

HTML5 is built with backwards compatibility. This means that if for example an HTML5 capable browser encounters an input element with the type of range it shows it as a slider control. Older browsers show a simple input field. That way nobody is locked out. You do not need a certain browser to interact with an HTML5 document. It simply becomes much more useful in modern browsers.

The new semantics

In terms of semantics, HTML5 offers a richer way to explain what a certain part of the document is.

HTML4 semantics

  • Headings
  • Lists
  • Tables
  • Paragraphs

In HTML4 we had paragraphs, lists, headings and tables.

HTML5 semantics

  • Sections
  • Articles
  • Headers
  • Footers
  • Navigation
  • Figures

In HTML5 we added sections and articles each with an own content hierarchy, date and time definitions and headers and footers for each section and the whole document. You also have a dedicated element to tell a browser what part of the document is navigation. The image element has been promoted to a figure with a figcaption which means you can group several images into a logical unit.

Forms

  • Date and colour pickers
  • Sliders
  • Number, URL, email

HTML5 has much richer form controls than HTML4. We now have date and colour pickers, sliders, number, url and email entry fields. This also has the benefit of mobile devices automatically switching to the correct keyboard when they encounter the right field type.

Build-in validation

HTML forms now have in-build validation, which means that when you mark a field as required the browser does not send the form until you enter it. The browser automatically ads an error message for you.

Canvas

One of the big new things of HTML5 is the canvas element. This one allows you to paint inside the browser, take images and stills from videos and convert them to something else. Using JavaScript, Canvas is also a way to animate parts of the document. This makes it the weapon of choice when creating browser-based games.

Video and Audio

HTML5 has video and audio elements to play movies and sounds natively in the browser. Video elements are just like other elements: you can style them, you can show and hide them, you can put other elements on top of them. This was not the case with Flash as a Flash movie is not a part of the document but lives in its own world. As the browser provides the user with native controls for the video it also increases accessibility as keyboard users and blind users can find the buttons and control the video playback. In Flash this needed to be worked around.

Syncing HTML5 video

This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge. There is also a simple library available to do this called Popcorn.

Codec wars

The main issue with HTML5 video is that because of copyright and patent issues developers need to provide several formats of the same video to support all browsers. Firefox and Chrome work with WebM, an open format whereas Internet Explorer and Safari need an H264 encoded video (most of the time MP4). H264 is open for now but has a clause that implementers will later on have to pay for its usage.

HTML5 and JavaScript

A larger part of the specification doesn't describe HTML at all - instead it describes the JavaScript APIs to control the new elements. For example it shows how a video can be controlled by listening for changes in its state and how to forward it to a certain time. You also learn how to paint in Canvas and how to get an image from the server and manipulate it with canvas before showing it in the browser.

Whilst HTML5 is designed to be backwards compatible, JavaScript is a large part of it. There is no fallback content for a canvas element. A browser not supporting it will get nothing and an HTML5 compatible browser will not be able to do anything with it without JavaScript.

HTML5 myths

HTML5 got a lot of press and many a company threw their hats in the ring to be part of the movement. This led to a few myths that are not true, but sound great.

HTML5 > mobile + tablets

A lot of times you hear people talk about HTML5 only in a mobile context. HTML5 is a platform to build web applications with. This can be on a desktop, a mobile, a tablet, laptops, notebooks, your fridge, your TV or anything that runs a web browser. There is nothing inherently "mobile" about HTML5.

HTML5 != Flash killer

HTML5 is not the Flash killer. A lot of the things we traditionally had to use Flash for can be done in HTML5, but this doesn't mean Flash will go away any time soon. There are use cases where Flash is the better option, for example video with DRM.

HTML5 > Chrome + iOS

HTML5 is not only for Chrome and iOS. Firefox, Opera and Internet Explorer are very capable HTML5 browsers and the companies behind these are large contributors to the working groups and innovate in their browsers before feeding it back to the core.

HTML5 > Gaming

HTML5 is not only about gaming. Whilst Canvas and WebGL allow us to build natively supported games in the browser this doesn't mean day-to-day applications can not benefit from it.

HTML5 > Apps

HTML5 is not only about Apps. By packaging HTML5 documents as apps you can run them natively on different devices and browsers give you more rights (in Chrome for example you can exceed the 5MB of local storage in an app). But this is a use case for HTML5, not a necessity.

HTML5 ♥ your browser

HTML5 does not mean you need to switch your browser. All modern versions of browsers support HTML5 in various degrees. All you need to do is to upgrade your browser to the latest version.

HTML5 and friends

With HTML5 we evolved the web technologies and made them a platform for application development. The real power beyond native video, audio and painting and converting with canvas comes from related technologies that are also part of the W3C/WHATWG effort.

WebGL

WebGL is a port of OpenGL for the web. Using it you can create hardware accelerated 3D environments in the browser. This, of course is amazing for games and interactive products. It also means that a lot of developers who are used to writing games on the desktop can start developing for the web.

Pepetz.com using WebGL

Pepetz.com is a great example how you can use new technology in a seamless way. The 2D product images turn into 3D models without needing any videos. The user can directly interact with them.

File APIs

Using the File APIs defined by the WHATWG and the W3C we can do multi file uploads in the browser, create file systems in memory and interact with files on the server. This is something that was very limited in HTML4 and needed a server-side script.

File API demo

CSS3

CSS3 promoted CSS from a language to define the look and feel of a document via fonts and colours to an animation language and much richer way to create look and feel. In CSS3 we can create patterns, gradients, rounded corners and drop shadows without using images. This makes it easier to change the look and feel of our documents. Transitions allow us to smoothly change from one state to another when the user interacts with an element. Transformations allow us to rotate, scale, position and turn elements in 3D space. Animations allow us to animate elements and their properties over time.

CSS animations and transitions

The iphone 4s page is a clever example on how to use CSS animation and transformations.

Mediaqueries for flexibility

Boston Globe
The new Boston Globe page

Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user. The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices.

Geolocation

Using geolocation we can ask the user to tell the browser where they currently are on the planet. This allows us to automatically fill out forms, show them things around them and let them tell the world where they are.

Local Storage

Using local storage you can store 5MB of information on the user's computer. This means you can make an application keep the state until the user comes back without any interaction with the server. It also means that there is no need for cookies any longer which makes it safer and easier for both the user and us. What should only be on the computer of the user is now on the computer of the user, controlled by JavaScript.

Offline Storage

Using a few simple documents and commands you can make any HTML5 document work offline. That way you can allow users to interact with your products when they are on a train or in a tunnel and sync when they go online.

History API

In the past we broke the WWW by not reloading the document on every interaction. This meant people could not use the back button, couldn't bookmark the document or send a link of the current state of the application to their friends. With the history API this can be done now. Instead of reloading the document we just tell the browser that there was a change in the document.

The future

HTML5 opened the door for a lot of innovation on the web and the once belittled platform that was the browser is growing stronger every day. By making video and audio supported natively we started to unlock what has been historically not available to web developers.

The natural evolution of that is to give the browser more power and there are a few interesting concepts in the making at the moment.

Web intents

Web intents is a way to tap into the web infrastructure of a certain user. What that means is that instead of asking a user for access to his pictures online on various services I can just ask the browser to get and store an image and it is up to the user what service to use.

Boot to Gecko

Boot to Gecko is an attempt to build a completely open mobile and tablet operating system based on web technologies.

An open framework of apps

Open web apps allow you to convert a web site into an app in a simple fashion and automatically open links to the same domain in the app.

Web APIs

  • Defining access for web services to:
    • Dialer, SMS
    • Address Book
    • Clock, Calculator
    • Camera
    • Gallery
    • Settings
    • Games
    • Maps

Web API is a project to allow JavaScript to get access to different parts of a mobile device: Dialer, SMS, Address Book, Clock, Calculator, Camera, Gallery, Settings, Games and Maps.

Browser ID

Browser ID is a decentralised way to log into services on the web. Instead of having to remember a lot of login and password combinations you have a single email as your login.

Taking over the browser chrome

Firefox with native toolbars
Firefox with native toolbars

Fullscreen Elements, Notifications and Context Menus allow you to build real applications on the web.

Financial Times - web > native

Financial Times App
FT web app - more successful than iPhone app

The FT lately showed that doing a web app can be more successful than a native iPad app.

Time to play!

Dog wants to play
Photo by Mike McCune