The Devign Path

@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

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.

Questions

• 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!