This talk is designed to explain the advantages of HTML5 in a way that makes more sense to the non-developers involved in a web site project. It is therefore aimed at designers, brand managers, project managers and bosses, and talks about HTML5 with less code and tech specs, and more real world advantages of using it in your web project.

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