The document provides an overview of HTML5, including:
- A brief history of HTML and the development of HTML5.
- An explanation of new HTML5 semantic elements like <header>, <nav>, <article>, <section>, and <footer> and how they improve the structure and readability of pages.
- A discussion of new HTML5 form controls, validation, and output mechanisms like <progress>, <meter>, and <output>.
- Introductions to new canvas scripting capabilities and native <video> and <audio> elements in HTML5.
1. HTML5: A brave new
world of markup
Chris Mills, Opera Software
Slides available on http://slideshare.net/chrisdavidmills
2. Who the hell am I?
⣠Opera open standards evangelist and tech writer
⣠Telling the world about open standards & Opera
⣠Improving web education
⣠Drinking beer & saving the world before morning
⣠Drumming in a heavy metal band
3.
4. What is HTML5?
A new HTML spec that defines:
⣠New semantic elements
⣠New features such as native video, more
powerful forms, web sockets
⣠New APIs for controlling such features
⣠Error handling, and other such useful things
5. Or according to the W3C...
⣠HTML5
⣠CSS3, WOFF
⣠SVG, SMIL, WebGL
⣠Geolocation, WAC
⣠Indexed DB, File API
⣠Server-sent events
⣠Web workers, XHR2
⣠& every other bloody open standard under the
sun!
6. A brief history of HTML
⣠HTML first proposed 1989-1991
⣠HTML3 first standardised in 1995
⣠HTML 4.01 standardised in 1999
⣠Corrections submitted in 2001
7. HTML5 history
⣠W3C decided the future was XHTML
⣠This didnât go down well, and no-one gave a ratâs
ass about XHTML2
⣠HTML5 (was web applications 1.0) started by
WHATWG in 2004ish
⣠Adopted by W3C 2008
⣠WHATWG version became versionless in 2011
8. When should I use it?
Now!
⣠Most modern browsers support most of this stuff
now
⣠Workarounds are perfectly possible
⣠You are already using HTML5 by using HTML4.x
⣠Donât wait till itâs completely finished
9. The UK road system is
never finished...
http://www.ïŹickr.com/photos/50014762@N03/4632637811/
11. But HTML5 has more bling!
As if! Not publishing this one...
12. HTML5 does not replace
HTML4
⣠Itâs backwards compatible
⣠It fills up holes
⣠It adds new markup and APIs
⣠It competes with proprietary/plugin technology
13. HTML5 features
⣠More accurate semantics (eg <header>,
<footer>)
⣠Better forms
⣠<video>
⣠<canvas>
14. HTML5 features
⣠Drag and drop
⣠Web workers
⣠Web storage, webdb, AppCache
⣠...aaand more.
15. Not HTML5, but as good as
⣠Geolocation
⣠Web sockets
16. HTML is the new HTML5?
In January 2011, Ian Hickson announced that the
WHATWG HTML5 spec was dropping its version
number, and becoming a living spec that could
keep being added to, as more features came to
fruition. The W3C version is keeping its version
number, and acting as a snapshot.
20. Most common classes and
IDs?
Ian Hickson did a study at Google of the most
common classes and IDs on the Web. so did
Opera
⣠http://code.google.com/webstats/2005-12/
classes.html
⣠http://devfiles.myopera.com/articles/572/idlist-
url.htm
⣠http://devfiles.myopera.com/articles/572/
classlist-url.htm
31. Where does this leave the
humble <div>?
Use it for anything that isnât covered by other new
elements, and is just a general grouping, e.g. for
styling purposes, for which you donât want to
create a new section. An intro <div>, perhaps?
32. The HTML5 outlining
algorithm
Heading/section hierarchy based on sectioning
element hierarchy, not <hx> elements used
⣠No longer limited to six heading levels
⣠Hierarchy stays correct when syndicated
⣠You can retain HTML4 heading levels for
backwards compatibility
34. New semantics rock!
⣠Better machine readability
⣠Better interoperability
⣠Better accessibility (once screen readers catch
up; WAI-ARIA is a stopgap)
⣠Leaner markup that is easier to style
⣠More in keeping with what real webdevs do
35. Browsers donât ACTUALLY
support these ... yet
But we can get them displaying ok
⣠You can style any element with CSS, even if the
browser doesnât recognise it
⣠Give all the structural elements display: block;
⣠IE also needs some scripting:
createElement(âarticleâ);
⣠HTML5Shiv sorts it better
38. Lax syntax?
Some say that HTML5 syntax is really lax â you:
⣠donât need to quote attributes
⣠can minimize attributes
⣠donât need to self close
⣠can mix upper and lower case
⣠You donât even need to include <html>, <head>
and <body>!
39. Lax syntax?
But this more accurately reflects what real
developers do, rather than what the XHTML spec
THINKS they should
⣠You can use the style you want (although you
should stick to some best practices)
⣠The browser fills in a lot of this stuff
⣠The HTML5 spec defines how errors should be
handled
72. Native <video> is awesome!
⣠Works well with other open standards
⣠Built-in keyboard accessibility
⣠API for customizing controls, etc.
⣠Doesnât require plugins!
73. Whatâs bad about <video>?
⣠People can download <video> easily
⣠That old cross browser chestnut
⣠Captioning and suchlike is at an early stage
74. Browser support
⣠Opera: Ogg since 10.5, WebM since 10.60
⣠Firefox: Ogg since 3.5, WebM since 4
⣠Chrome: Ogg since 3.0, WebM since 6.0
⣠IE: MP4 since 9.0
⣠Safari: MP4 + anything else Quicktime supports
since 3.0
77. Some stuff is not as easy
⣠WebSRT exists for captioning, but is at an early
stage
⣠There is no easy cue points mechanism
⣠But such problems can be solved using
JavaScript