Brave New World of HTML5: The “No, I’m not Bruce Lawson” Edition by Patrick Lauke

@WebDirections London 2010

What it is:

  • HTML5 is anything but Opera started it in reaction to XHTML 2.0 via Web Application 1.0 with WHAT-WG. Joined forces with Mozilla, Apple, Microsoft and Google.
  • HTML5 supports existing standards with additional features


  • <!dochtml /> is used to kick browser into standards mode
    Mark-up is loose but browser behaviour is strict. Mark-up is not case-sensitive, you don’t need quote marks but browser behaviour relative to mark-up is well defined.
  • New elements – header, nav, article, footer, section etc. machine readable and in older browsers it is styled as in-line elements. To render as block level elements use CSS and IE use document.createElement(‘header’);
  • Canvas
  • Audio (mp3, ogg vorbis, WAV) [not that accessible]
  • Video – API controls plays nice with the rest of the page and it’s accessible (H.264 [Apple] vs. Ogg Theora vs WebM [Google]). Browser will check source of video element in cascading order – top to bottom.

NB: Chrome prefers WebM. There’s a bug in Safari iPad that causes it to only check the first .mp4 file source.
Web forms – use built in  validation and new input types. Use feature detection.
Anchor elements can be used around block level elements.


  • Is it a flash killer? Not really, there is a valid place for flash.
  • How were the new elements chosen? Scooby Doo algorithm. Google made a short list from the most used identifiers and then made decisions based on those.

You can start using it today!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s