1. HTML5: A richer web
for everyone
Chris Mills, Opera Software
Slides available on http://slideshare.net/chrisdavidmills

2. Who am I?
‣ Opera open standards evangelist and tech writer
‣ Telling the world about open standards & Opera
‣ Improving web education
‣ Drumming in a heavy metal band

4. What is HTML5?
A new version of HTML that defines:
‣ More consistent features
‣ New features that compete with Flash
‣ Easier and quicker ways to implement things that
were previously complicated
‣ Error handling, and other such useful things

5. It’s not all rosy
‣ Tooling more limited than say, Flash or HTML4
‣ Cross browser support not quite as easy as
Flash
‣ HTML5 not much good if you have JavaScript
disabled

6. But things are getting better
‣ All modern browsers support most of this stuff
now
‣ Workarounds are perfectly possible
‣ Tools are getting better (from
HTML5boilerplate.com to Dreamweaver)

7. HTML5 does not replace
HTML4
You are already using HTML5 by using HTML4.x
‣ It’s backwards compatible
‣ It fills up holes
‣ It competes with proprietary/plugin technology

8. HTML5 isn’t...
‣ CSS3, WOFF
‣ SVG, SMIL, WebGL
‣ Geolocation, WAC
‣ Indexed DB, File API
‣ Server-sent events
‣ Web workers, XHR2

9. Let’s look at the new
features
http://www.flickr.com/photos/zscheyge/49012397/

10. Typical website structure
<div id=”header”></div>
<div id=”nav”></div>
<div id=”main”>
<div class=”article”></div>
<div class=”article”></div>
...
</div>
<div id=”footer”></div>

11. HTML5 update
<header></header>
<nav></nav>
<section id=”main”>
<article></article>
<article></article>
...
</section>
<footer></footer>

12. <figure> and <figcaption>
<figure>
<img src=”bear.jpg”
alt=”this is the bear that I wrestled” />
<figcaption>This is the bear that I
wrestled.</figcaption>
</figure>

13. HTML5 forms
Previously called Web Forms 2.0
‣ More powerful form controls
‣ Built-in validation

14. Slider
<input type=”range” />

15. Date-time controls
<input type=”date”>
<input type=”datetime”>
<input type=”week”>
<input type=”month”>

16. color
<input type=”color”>

17. Other new input types
<input type=”email”>
<input type=”url”>
<input type=”tel”>

18. Validation
Form validation used to be horrendous
Who wants to spend the time coding something
like...

19. function validate() {
var str = “”;
var elements = document.getElementsByTagName('input');
// loop through all input elements in form
...this??
for(var i = 0; i < elements.length; i++) {
// check if element is mandatory; ie has a pattern
var pattern = elements.item(i).getAttribute('pattern');
if (pattern != null) {
var value = elements.item(i).value;
// validate the value of this element, using its defined pattern
var offendingChar = value.match(pattern);
// if an invalid character is found or the element was left empty
if(offendingChar != null || value.length == 0) {
// add up all error messages
str += elements.item(i).getAttribute('errorMsg') + “n” +
“Found this illegal value: '” + offendingChar + “' n”;
// notify user by changing background color, in this case to red
elements.item(i).style.background = “red”;
}
}
}
if (str != “”) {
// do not submit the form
alert(”ERROR ALERT!!n” +str);
return false;
} else {
// form values are valid; submit

20. HTML5 gives you this
<input type=”text” required>

21. And this
<input type=”text” required
pattern=”[A‐z]{1,20} [A‐z]{1,20}”>

22. <canvas>
Scriptable graphics
‣ Standard API for drawing
‣ Supporting across all modern browsers

23. <canvas> examples
‣ http://dev.opera.com/articles/view/html-5-
canvas-the-basics/
‣ http://ejohn.org/blog/processingjs/
‣ http://www.hakim.se/experiments/
‣ http://www.canvasdemos.com/
‣ http://people.opera.com/patrickl/experiments/
canvas/particle/3/

24. <video> and <audio>
New elements, plus new API for controlling audio
and video

25. Fallback
<video width=”480px”
height=”283px”
controls
poster=”poster.png”>
<source src=”video.mp4” type=”video/mp4”>
<source src=”video.webm” type=”video/webm”>
<p>Your browser doesn’t support HTML5 video. <a
href=”myVideo.webm”>Download the video instead</
a>.</p>
</video>

26. And why is this all so good
again?
http://www.flickr.com/photos/zscheyge/49012397/

27. Better consistency
‣ Better machine readability & interoperability:
‣ Easier syndication and reuse
‣ Less time worrying about design consistency
‣ Less time training up new team members
‣ Defined error handling means things work more
consistently, even if they are broken!
‣ Better cross browser apps
‣ Less time spent debugging

28. Better accessibility
‣ For example, HTML5 video is keyboard
accessible out of the box
‣ New elements bringing consistency is also
important here
‣ Less time and money spent on accessibility
‣ 1 in 5 people in the UK have some kind of
disability - a market you can’t ignore

29. Less reliance on JavaScript
‣ Less work for your developers to do, so faster
implementation and prototyping
‣ Less pain for designers and other less technical
team members
‣ Faster loading sites

30. Less reliance on Flash
‣ Means less skills needed in the team
‣ HTML5 plays nicer with the rest of the page
‣ Less Flash means better accessibility (note: there
are some HTML5 accessibility gotchas, like
Canvas)
‣ Downloading a plugin breaks brand experience
and can confuse users

31. HTML5 works on iDevices
‣ Like iPad and iPhone
‣ A crucial market to be in
‣ Flash has not been allowed on these devices

32. Thanks for listening!
‣ cmills@opera.com
‣ @chrisdavidmills
‣ http://dev.opera.com/articles/tags/html5/
‣ http://html5doctor.com