HTML5: what's new?

HTML5: What's new?
Chris Mills, Opera Software

Slides available on http://slideshare.net/chrisdavidmills

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

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

There’s nothing wrong with
HTML4...

http://www.ﬂickr.com/photos/birdfarm/519230710/

But HTML5 has more bling
As if! Not publishing this one...

HTML5 does not replace
HTML4
‣ It’s backwards compatible
‣ It fills up holes
‣ It adds new markup and APIs
‣ It competes with proprietary/plug-in technology

New syntax: better
semantics

http://www.ﬂickr.com/photos/zscheyge/49012397/

HTML5 doctype
<!doctype html>

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>

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

<aside>
<aside>
  <h2>About the author</h2>
    <p>Chris Mills is a front‐end bling junkie
     working for Opera Software...</p>
</aside>

<time>
<p>Article published on the 
  <time datetime="2011‐03‐12T09:48">
    12th March 2011, at 9:48am
  </time>
</p>

<hgroup>
<hgroup>
  <h1>Top level heading</h1>
  <h2>This is a really descriptive subtitle</h2>
</hgroup>

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

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?

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 all out

New forms!


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

New input types
<input type=range>
<input type=date>
<input type=number>
<input type=color>
<input type=search>
<input type=email>
<input type=url>
<input type=tel>

Datalist
<input type="text" list="mydata">
<datalist id="mydata">
  <option label="Mr" value="Mister">
  <option label="Mrs" value="Mistress">
  <option label="Ms" value="Miss">
</datalist>

Validation
Form validation used to be horrendous

var elements = document.getElementsByTagName('input');  
 
 // loop through all input elements in form  

Who the hell wants to write
 for(var i = 0; i < elements.length; i++) {  
 
   // check if element is mandatory; ie has a pattern   
   var pattern = elements.item(i).getAttribute('pattern');  

this??
   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;

HTML5 gives you this
<input type="text" required>

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

Other new attributes
autofocus
placeholder
min
max
step

New output mechanisms
<output>
<progress>
<meter>

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

The basics
<canvas id="canvas" width="400" height="300">
  ...fallback...
</canvas>

The basics
var ctx = 
document.getElementById('canvas').getContext('2d');

ctx.fillStyle
ctx.fillRect

<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/

Video and audio!


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

The old school way
<object width="425" height="344">
<param name="movie"  value="http://www.example.com/
v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.example.com/v/
LtfQg4KkR88&hl=en&fs=1"
  type="application/x‐shockwave‐flash"
  allowfullscreen="true" width="425" 
height="344"></embed>
</object>

The badass sexy new way
<video src="video.webm"
       width="480px"
       height="283px"
       controls
       poster="poster.png">
</video>

Fallback
<video src="video.webm"
       width="480px"
       height="283px"
  <p>Your browser doesn’t support HTML5 video. <a 
href="myVideo.webm">Download the video instead</
a>.</p>
</video>

Adding different formats
<video width="480px"
       height="283px"
  <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>

Adding a Flash fallback
<object type="application/x‐shockwave‐flash" 
data="player.swf" width="480" height="283">
  <param name="allowfullscreen" value="true">
  <param name="allowscriptaccess" value="always">
  <param name="flashvars" value="file=video.mp4">   
 
  <!‐‐[if IE]><param name="movie" 
value="player.swf"><![endif]‐‐>
  <img src="video.jpg" width="480" height="283" 
alt="Video">
</object>

Captioning advancements
<track src="sintel_en.srt" kind="subtitles" 
srclang="en" label="English" />
<track src="sintel_de.srt" kind="subtitles" 
srclang="de" label="Deutsch" />
<track src="sintel_es.srt" kind="subtitles" 
srclang="es" label="Español" />

Going offline


Offline apps!
‣ Generally, the web doesn't work very well
without a web connection!
‣ What can we do about this?

Offline applications
‣ AppCache: Save an offline version of your web
page files and use those to display your web
page when you lose network.
‣ Web storage: Like cookies, but more powerful.
Store things such as form data and user
preferences
‣ WebSQL: A fully-functioning database in your
browser. Store a user's data so they can
continue working with it when the network goes
down

Offline applications
‣ For more information, check out http://
dev.opera.com/articles/view/taking-your-web-
apps-offline-web-storage-appcache-websql/

And why is this all so good
again?


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

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

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

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

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

Offline apps!
‣ Never before possible...

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

HTML5: what's new?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to HTML5: what's new?

Similar to HTML5: what's new? (20)

More from Chris Mills

More from Chris Mills (20)

Recently uploaded

Recently uploaded (20)

HTML5: what's new?

Editor's Notes