HTML5

Henri Sivonen

What’s HTML5?

A Specification Developed at the WHATWG

(Now simply “HTML”)

A Specification Developed at the W3C

(Smaller)

Features that
Have Been in the
HTML5 Draft

Everything Cool in the Browser Platform

“SVG is part of the HTML 5 family of technologies.”
— Brad Neuberg, while at Google

Brand or
Muddy Waters?

HTML5 Logo by W3C

Markup Vocabulary

Replaces HTML 4.01 / XHTML 1.0

Associated APIs

Replaces DOM Level 2 HTML

Functional Spec

Previously Missing!

History

W3C

Consortium Funded by Member Companies

December 1997:
HTML 4.0

(Wouldn’t pass Recommendation criteria today)

February 1998:
XML

(Lower layer)

May 1998:
No More Non-XML HTML

Shaping the Future of HTML Workshop

“A Modest Proposal

• HTML 4.0 is Overwhelmingly Successful
• Declare HTML 4.0 to be a ‘legacy’ document format and stop enhancing it
• The Future of HTML as we know it should be:
  • Nasty, Brutish, and Short”

— David Singer, IBM, 1998-05-05

http://www.w3.org/MarkUp/future/papers/singer/im-164149.htm

August 1999:
XHTML Extended Forms Requirements

“——the goals for the next generation of forms are incompatible with preserving backwards compatibility——”

January 2000:
XHTML 1.0

HTML 4.01 reformulated on top of XML

Work on
XHTML 2.0 Starts

Not backwards-compatible
(Exact start date confidential)

August 2001:
IE6; Team Disbanded

Work on XAML / Avalon (to become Silverlight)

January 2003:
First Beta of Safari

(Engine forked from KHTML)

July 2003:
Netscape Dies

(Reborn as Mozilla)

September 2003:
Apple and Opera Blast XForms 1.0 PR in a Joint Review

Too hard, too complex, too many dependencies

Opera Working on a Backwards Compatible Alternative

June 2004:
The Workshop

W3C Workshop on Web Applications and Compound Documents

Adoption Slow:
XHTML 1.0 Comes to IE only in version 9 in 2011

(Emperor is naked when not parsed as XML)

Proprietary Threat: Flash Going Stronger than SVG

Proprietary Threat #2: Microsoft Working on XAML / Avalon

Joint Position from Mozilla and Opera

“Design Principles for Web Application Technologies”

• Backwards compatibility, clear migration path
• Well-defined error handling
• Users should not be exposed to authoring errors
• Practical use
• Scripting is here to stay
• Device-specific profiling should be avoided
• Open process

Source: http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

Voted Down

8 in favor, 14 against

WHATWG Unveiled
2 Days Later

October 2006:
IE7 Released

Return from the Dungeon

October 2006:
TimBL Blogs

Title: Reinventing HTML

“Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work——”

“The plan is to charter a completely new HTML group. Unlike the previous one, this one will be chartered to do incremental improvements to HTML, as also in parallel xHTML.”

Source: http://dig.csail.mit.edu/breadcrumbs/node/166

March 2007:
HTML WG

Design Principles

Conformance for Documents & Implementations

Compatibility

Support Existing Content

<b><i>foo</b></i>

Degrade Gracefully

<video>Fallback</video>

Do not
Reinvent the Wheel

contenteditable=""

Pave the Cowpaths

<br/>

Evolution
Not Revolution

HTML syntax supported—switch to XML not required

Utility

Solve Real Problems

Identify actual problems first—then find solutions

Priority of Constituencies

users > authors > implementors > specifiers > theoretical purity

Secure By Design

Protect users

Separation of Concerns

Separate content and presentation—but only as a means to an end

DOM Consistency

Same API representation for HTML5 and XHTML5

Interoperability

Well-Defined Behavior

Avoid Needless Complexity

Handle Errors

Universal Access

Media Independence

Desktop, phone, audio, …

Support World Languages

Enable publication in all world languages

Accessibility

Make sure features work for people with disabilities

What’s New?

Well-Defined Behavior

HTML4

• “user agent behavior for choosing which control is initially ‘on’ is undefined”
• Most “must” requirements on content—not on user agents

Source: http://www.w3.org/TR/html401/

HTML5

• “When a user agent has to remove a token from a string, it must use the following algorithm”
• “User agents must use the following algorithm (the encoding sniffing algorithm) to determine the character encoding to use when decoding a document in the first pass.”

Source: http://www.whatwg.org/specs/web-apps/current-work/

Vocabulary for Documents

Research

Source: http://code.google.com/webstats/2005-12/classes.html

Media Features

<embed>

<video>, <audio>

<video src=sintel.webm controls width=824 height=352>
  Your browser does not support HTML5 video.
  Download the <a href=sintel.webm>video file</a>.
</video>

Sintel by the Durian project is under the Creative Commons Attribution 3.0 license

API for
Custom Player UI

VideoJS Tube Vim

HTML5 Video Player by VideoJS

Codec Situation

Codec Situation

Multiple Files

<video controls width=824 height=352>
  <source src="sintel.webm"
    type='video/webm; codecs="vp8, vorbis"'>
  <source src="sintel.mp4"
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="sintel.ogv"
    type='video/ogg; codecs="theora, vorbis"'>
  <!-- Maybe even Flash fallback here -->
</video>

Common Wishlist

• Accessibility
• Content-controlled full-screen
• Adaptive streaming
• DRM
• Video recording
• Peer-to-peer connections
• Script-generated video streams

Form Features

New Form Controls

• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url
• search
• color

Client-Side Constraints

• URL / email address format check
• Regular expression
• Input required
• Min / Max
• Scripting hooks

Demo

Overlaid Metadata

Microdata

• Like Microformats but
  • Vocabulary-independent processing
  • HTML-layer syntax support
• Like RDFa but
  • Easier
  • Designed for HTML

License Metadata

<figure itemscope itemtype="http://n.whatwg.org/work">
  <img itemprop="work" src="aalto.jpeg">
  <figcaption>
    <p itemprop="title">Aalto University</p>
    <p><small>Licensed under the <a itemprop="license" 
    href="http://creativecommons.org/licenses/by-sa/3.0/">
    Creative Commons Attribution-Share Alike 3.0 
    License</a>.</small>
  </figcaption>
</figure>

Serializations

One Vocabulary
Two Serializations

Parse Tree

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Foo</p>
  </body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Foo</p>
  </body>
</html>

Parsing

Finally Defined!

10.2.4.10 Tag name state

Consume the next input character:

U+0009 CHARACTER TABULATION

U+000A LINE FEED (LF)

U+000C FORM FEED (FF)

U+0020 SPACE

Switch to the before attribute name state.

U+002F SOLIDUS (/)

Switch to the self-closing start tag state.

U+003E GREATER-THAN SIGN (>)

Switch to the data state. Emit the current tag token.

U+0041 LATIN CAPITAL LETTER A through to U+005A LATIN CAPITAL LETTER Z

Append the lowercase version of the current input character (add 0x0020 to the character's code point) to the current tag token's tag name.

U+0000 NULL

Parse error. Append a U+FFFD REPLACEMENT CHARACTER character to the current tag token's tag name.

EOF

Parse error. Reconsume the EOF character in the data state.

Anything else

Append the current input character to the current tag token's tag name.

Source: http://www.whatwg.org/specs/web-apps/current-work/

Implementations You Can Use

Python Ruby Java C JavaScript C# (C++)

MathML and SVG

The solution for quadratic equations is $x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$.

Warning: Remember that ± means that there are two solutions!

No Namespace Declarations!

<p>The solution for quadratic equations is  
<math>
  <!-- ... -->
  <mfrac>
    <mrow>
      <mo>&minus;</mo>
  <!-- ... -->
</math>.</p>
<p><svg viewBox='5 9 90 86'>
  <path d='M 10,90 L 90,90 L 50,14 Z'/>
  <line x1=50 x2=50 y1=45 y2=75 />
</svg><b>Warning:</b> Remember that &PlusMinus; 
means that there are two solutions!</p>

APIs for Applications

Fundamentals

• UI on the main thread
• Browser generates events
• Event handlers in JavaScript
• Multiple choices for view
  • CSS (constraint-based formatter)
  • SVG (2D graphics, retained mode)
  • Canvas (graphics, immediate mode)

Cross-Document Messaging

• Already even in IE8!
• Messaging across Origin-based security boundaries
• postMessage(message, targetOrigin);
• addEventListener("message", func, false);

Web Workers

• Shared-nothing JavaScript worker threads
• Message passing using postMessage()
• HTTP using subset of the XHR API

Web Socket

• Concept: TCP with Web security model
• Unicode strings instead of bytes
• JavaScript API
• In the IETF limbo

Selector API

• Find DOM nodes using Selectors
• Acceleration for jQuery

Drag & Drop

• Standardizes IE’s API
• Now also in Firefox, Safari and Chrome

sessionStorage

• Retain data over multipage workflow
• Independent storages for distinct windows / tabs

localStorage

• Non-cookie key-value storage
• Problematic with multi-eventloop UAs
• Already out there (incl. IE8)
• Lot of thought put into containing damage

Indexed DB

• Database without SQL
• Earlier SQL-based attempt abandoned

File API

• JavaScript access to local files chosen using <input type=file>
• Obsoletes Flash-based batch uploaders

Geolocation

• Get the GPS coordinates of the browser
• Opportunities for location-aware services
• API designed for asynchronous authorization flow

Immediate-Mode Graphics: <canvas>

Cthulhu Tentacle Marathon by Tab Atkins

Canvas Contexts

• Original context
  • 2D
  • Similar to the PDF/PostScript model
• WebGL
  • 3D
  • Wraps OpenGL ES 2.0

Google WebGL Aquarium at webglsamples.googlecode.com

Learn More &
Get Involved

• http://www.whatwg.org/
• http://www.w3.org/html/wg/
• http://html5.validator.nu/
• http://esw.w3.org/topic/HTML/history

Thanks! Questions?