HTML 5 is a new version of HTML that is still being developed. It aims to evolve HTML instead of reinventing it. Key features include new form elements, input types, semantic elements, APIs for offline apps, and standardized video and audio embedding. Browser support is growing but the specification may not be finalized until 2022. However, many features are already implemented and can be used today through emulation if needed.
5. Background
. WHATWG
. founded in 2004
. reaction against the road the W3C was taking
. XHTML was no failure, but XML part never really
took off
. renewed focus on HTML and real-world issues
. “evolving instead of reinventing”
6. Background
. 2007: WHATWG joins forces with W3C
. HTML WG
. both groups now work on the HTML 5 spec
. all parties are now involved
. anyone can contribute!
. First Public Working Draft:
January 22, 2008
7. Syntax
example – XHTML 1 strict:
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>
12. Syntax
. Tag soup? No!
. small degree of freedom,
but very detailed rules for parsing
. validation will matter
. keep a clean coding style,
you’ll thank yourself for it later
13. Syntax
. HTML 5 is designed so that old HTML 4 browsers
can safely ignore new HTML 5 constructs
. “Documents must not use deprecated features.
User agents should support deprecated
features.”
. extensive error handling by UAs
14. What’s gone
Say bye bye to:
. frames
. acronym, basefont, big, center, font, s, strike, tt, u
. language attribute on script
. loads of presentational attributes:
cellpadding, cellspacing, width & height on tables
& cells, align & valign, clear, size on inputs, ...
17. Web Forms 2.0
. set of elements, attributes & input types
. complete repetition model for forms with
recurring fields (adding, removing and
moving blocks)
. better solutions for combo-boxes &
auto-completion — like search suggestions
(list attribute, datalist & select elements)
18. Input types
. date & time (single or range)
. email & url
. color picker
. user agent can provide the user interface —
integrated with native tools
. client-side validation
20. Attributes
. required, placeholder, autofocus, autocomplete,
inputmode
. validation with pattern attribute
(using regular expressions)
. min, max (number of files for multi-file uploads)
. a <fieldset> can be entirely disabled
. form (assign form elements to multiple forms)
21. Web Forms 2.0
. standardization of input methods
. a lot less Javascript and server-side work
. super useful!
23. Web Applications 1.0
. set of elements, attributes & APIs
. because it’s not 1998 anymore
. the web is no longer a collection of static pages
24. Elements
. meter, progress, output, time
. m for marked content (like search results)
. embed (finally a standard)
. video and audio
25. Elements
. Semantics!
. section, article, aside, header, footer, nav
. dialog (for conversations)
. figure (grouping images & legend)
. better for disabled devices
(handheld devices, search engines, ...)
. better for disabled users
26. Attributes
. ping for links (no more redirects for tracking)
. target is back
. <ol> has start & reversed
. <iframe> has seamless & sandbox
. contenteditable (finally a standard!)
. data-* (define your own attributes)
27. APIs
. API = a set of Javascript objects, methods, events
. drag & drop
. canvas (standardized)
. back button management
. cross-document messaging
. notifications
. listen for server-side DOM events
28. More APIs
. offline data with storage, client-side databases
and application cache
. classList — access multiple classes with
has(), add(), remove() and toggle()
. getElementsByClassName()
getSelection()
hasFocus()
document.activeElement
innerHTML (standardized)
...
29. Case I: offline data
. sessionStorage
. temporary key/value pairs
. one session per tab/window
. replace cookies for session tracking
. extensive Javascript methods & events
30. Case I: offline data
. localStorage
. like sessionStorage, but
. persistent
. global
31. Case I: offline data
. client-side databases
. SQLite — lots of structured, relational data
. asynchronous
. callback based
. fast
32. Case I: offline data
. application cache
. store entire apps offline — HTML, JS, CSS,
images, etc.
. atomic updating
. you tell the browser what’s new and what not
in a manifest file
33. Case I: offline data
. bringing it all together: standalone web apps
. site-specific browser
. custom app name & icon
. online & offline
. available in Safari 4
34. Case II: video & audio
. standardized way of embedding media
. fallback when not supported
. multiple streams in one element
. full Javascript API: controls, errors, networkState,
readyState, events, ...
. attributes for controls, poster, autoplay, ...
35. Case II: video & audio
example:
<video src=clip.ogg controls>
<source type=video/mp4 src=clip.mp4>
<source type=video/ogg src=clip.ogg>
Download the <a href=clip.ogg>clip</a>.
</video>
36. Case II: video & audio
. Formats?
. discussion still open
(Apple & Nokia vs. Mozilla & Opera)
. quot;there are no known codecs that satisfy all the
current playersquot;
. probably no 'single' standard
37. Web Applications 1.0
. a whole bunch of new elements, attributes and
APIs for web apps
. super useful!
41. When?
2022 — 4 reasons you shouldn't care:
. 2012 is the year of the apocalypse
. HTML 4 hasn't even reached the status they want
to achieve with HTML 5
. W3C: spec with interoperable implementations
in late 2010, and widespread adoption in 2012
. Because you can start today
42. Already (partially) implemented
. canvas
. contentEditable
. getElementsByClassName
. offline storage
. video & audio
. Web Forms 2.0
. Cross-document messaging
. ...
43. Browser implementations
. Opera & Webkit lead the pack
. Mozilla is close
. IE8 is doing very well
. validators: still experimental, but finished soon
44. And there’s always emulation
. Web Forms 2
http://sourceforge.net/projects/wf2/
. Canvas
http://sourceforge.net/projects/excanvas/
. ...
. roll your own
45. HTML 5
That’s all folks!
. http://www.whatwg.org
. http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
. http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
. http://www.w3schools.com/tags/html5.asp
. validators: http://qa-dev.w3.org/wmvs/HEAD/ & http://html5.validator.nu
Read on at http://lensco.be