The Crazy World of HTML5 Semantics

The “crazy” world of
HTML5
Chris Mills, Opera Software

Monday, 19 September 2011

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


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


Or according to some...
‣ HTML5
‣ CSS3, WOFF
‣ SVG, SMIL, WebGL
‣ Geolocation, WAC
‣ Indexed DB, File API
‣ Server-sent events
‣ Web workers, XHR2
‣ & every other open standard under the sun!

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


HTML5 history + politics
‣ W3C decided the future was XHTML
‣ This didn’t go down well, and no-one cared
about XHTML2


Why did XHTML fail?
‣ XHTML2 features aren’t backwards compatible
with “the Web so far”
‣ XHTML1 didn’t work properly anyway
‣ XML in general doesn’t suit the Web


HTML5 history + politics
‣ HTML5 (was web applications 1.0) started by
WHATWG in 2004ish
‣ Adopted by W3C 2008
‣ WHATWG version became version-less in 2011


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.


Why can HTML5 succeed?
‣ It is backwards compatible with HTML4
‣ It is written to be competitive with other
technologies, eg Flash, Silverlight
‣ It fills up holes and adds features: it doesn’t
replace HTML4.x


HTML5 features

http://www.ﬂickr.com/photos/cybertoad/247896160/

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 features
‣ More accurate semantics (eg <header>,
<footer>)
‣ Better forms
‣ <video>, <audio>
‣ <canvas>
‣ Offline apps
‣ Web Sockets*, Geolocation*
‣ Microdata, Web Workers, History API, etc.

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


Most common classes and
IDs?
Google did a study 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


Most common IDs


Most common classes


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


<header> and <footer>
<header>

<h1>Top level heading</h1>
</header>

<footer>
<p>©2011 Chris Mills examples</p>
</footer>


<nav>
<nav>
<ul>
<li><a href="#article1">First article</a></li>
<li><a href="#article2">Second article</a></li>
<li><a href="#article3">Third article</a></li>
</ul>
</nav>


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


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


The HTML5 outlining
algorithm
<h1>My title</h1>
<div>
<h2>My subtitle</h2>
</div>

<h1>My title</h1>
<section>
<h2>My subtitle</h2>
</section>

New semantics rock!
‣ Better machine readability
‣ Better interoperability
‣ More consistency of code
‣ Better accessibility (once screen readers catch
up)
‣ Leaner markup that is easier to style
‣ More in keeping with what real webdevs do


Lax syntax?
Some say that HTML5 syntax is really lax — you:
‣ don’t need to quote attributes
‣ can minimise attributes
‣ don’t need to self close
‣ can mix upper and lower case
‣ You don’t even need to include <html>, <head>
and <body>!


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


Example
http://people.opera.com/cmills/workshop/
http://devfiles.myopera.com/articles/4612/
pwei_sample_html5.html


Browsers don’t ACTUALLY
support these ... yet
But we can get them displaying fine
‣ 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 createElement('article');


Styling with CSS

http://www.ﬂickr.com/photos/nickwebb/3016498475/

Styling with CSS
‣ Not much different to what we already do
‣ Needs a bit of extra help to style HTML5
semantic elements
‣ CSS3 brings some useful tricks
‣ Fallbacks need some careful thought


Extra styling help
article, section, footer {
display: block;
}

document.createElement('article');
document.createElement('section');
document.createElement('footer');


CSS3 tricks
input:valid { color: lime; }
input:invalid { color: red; }


Styling fallbacks
<div id="video"><video>

</video></div>

video { margin: 0 auto; }
#video { margin: 0 auto; }

Error handling

http://www.ﬂickr.com/photos/nickwebb/3016498475/

HTML error handling...
...never existed previous to HTML5
So browsers had to work out what do to with bad
markup themselves.


This sample...
<p><b>This text should be bold</p>
<p>Should this text be bold?</p>
<p><a href="#"></b>This text should be a link</p>
<p>Should this text be a link?</p>


...in Opera...
<p><b>
This text should be bold
<p>
<a href="#">This text should be a link</a>
</p>
</p></b>


...in Firefox...
<p><b>This text should be bold</b></p>
<b/>
<p><b>Should this text be bold?</b></p>
<b/>
<p><a href="#">This text should be a link</a></p>
<a href="#"/>
<p><a href="#">Should this text be a link?</a></p>
<a href="#"/>


...in IE...
<p><b>This text should be bold</b>
This text should be a link
</p>
<p><a href="#"/></p>


HTML5 states exactly what
to do
This will cut down on a lot of cross site problems
For more, see “100% Ragnarök’n’roll” at
http://labs.opera.com/news/2011/07/21/


HTML5 forms


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


Slider
<input type="range" />


Date-time controls
<input type="date">
<input type="datetime">
<input type="week">
<input type="month">


number
<input type="number">


color
<input type="color">


Search boxes
<input type="search">


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>


Other new input types
<input type="email">
<input type="url">
<input type="tel">


Validation
Form validation used to be horrendous


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>


JS validation checking
form.checkValidity()
formelement.checkValidity()
formelement.setCustomValidity()

interface ValidityState {
readonly attribute boolean valueMissing;
readonly attribute boolean typeMismatch;
readonly attribute boolean patternMismatch;
readonly attribute boolean tooLong;
};

JS custom error message
input.setCustomValidity('That is not the correct answer!');


Form awesomeness
‣ Much easier validation
‣ Easier to implement complicated controls, with
better semantics
‣ They degrade to basic text inputs
‣ Hinting at better UX


Form detractors
‣ Support not completely there yet
‣ Not easy to customise text of error messages
‣ Impossible to customise styling of error
messages


Examples
http://people.opera.com/cmills/workshop/
html5_forms.html

http://devfiles.myopera.com/articles/4582/html5-
forms-example.html


<video> and <audio>

http://www.ﬂickr.com/photos/stonebird/28894187/

<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 new school: <video>
<video src="video.webm"
width="480px"
height="283px"
controls
poster="poster.png"
autoplay
loop>
</video>


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

Adding different formats
<video ... >
...
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>


Specifying codecs
<source src="videofile.mp4"
type='video/mp4; codecs="codecs="avc1.4D401E,
mp4a.40.2"' />
<source src="videofile_small.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.
40.2"' />
<source src="videofile.webm"
type='video/webm; codecs="vp8, vorbis"' />
<source src="videofile.ogv"
type='video/ogg; codecs="theora, vorbis"' />

Simple API
var v = document.getElementById('player');

v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;


Events
v.addEventListener('loadeddata', function() { … }, true)
v.addEventListener('play', function() { … }, true)
v.addEventListener('pause', function() { … }, true)
v.addEventListener('timeupdate', function() { … }, true)
v.addEventListener('ended', function() { … }, true)


Examples
http://people.opera.com/patrickl/experiments/webm/
fancy-swap/

http://people.opera.com/cmills/mediaquery/

http://dev.opera.com/articles/view/html5-audio-radio-
player/

http://dev.opera.com/articles/tags/video/


Native <video> is awesome!
‣ Works well with other open standards
‣ Built-in keyboard accessibility
‣ API for customizing controls, etc.
‣ Doesn’t require plugins!
‣ Good cross browser support
‣ Can provide fallbacks for older browsers
‣ Many ready rolled players exist - jPlayer, Sublime
video


What’s bad about <video>?
‣ People can download <video> easily
‣ Captioning and suchlike is at an early stage
‣ Format wars...


WebVTT (née WebSRT)
‣ Add text tracks onto a video
‣ for things such as subtitles and captions
‣ .vtt files contain timestamp ranges with text
tracks, and limited styling info
‣ <track> element associates these with video


.vtt file example
WEBVTT

1
00:00:10.500 --> 00:00:13.000 A:start
Elephant's Dream

2
00:00:15.000 --> 00:00:18.000 A:end L:10%
At the <b>left</b> we can see...


<track> element example
<video controls>
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.webm" type="video/webm">
<track src="en.vtt" kind="subtitles" srclang="en"
label="English subtitles">
</video>


Currently supported
nowhere
‣ But you can add support in using JS libraries
‣ Playr
‣ Leanback Player
‣ Captionator


Future Audio APIs
‣ Web Audio API (and Moz’s Audio Data API)
‣ Supported in Chrome and FF, respectively
‣ Access sample rates, frame buffer length, etc.
‣ Create audio visualisations
‣ Write your own audio data programatically
‣ Audio stream synthesis and processing
‣ Spacialised audio for 3D games


APIs for streaming media
‣ getUserMedia — get a media source (eg a
microphone or a web cam)
‣ PeerConnection API — make a connection (web
socket or XHR) between peers through which to
send media
‣ Stream API — stream a media source
‣ WebRTC (http://www.webrtc.org/) is the umbrella
term for all this stuff
‣ Opera has experimental support

Adaptive streaming
‣ Each stream stored in multiple quality levels
‣ As bandwidth changes, the supporting device
can grab video chunks from the different quality
levels
‣ an XML manifest file stores the data that relates
to the different quality levels
‣ MPEG’s DASH is a first attempt, but not great


<canvas>

http://www.ﬂickr.com/photos/pixeljuice23/3121241987/

<canvas>
‣ Standard API for drawing
‣ Scriptable graphics


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


The basics
ctx = canvas.getContext("2d");

ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);


Drawing an image onto a
canvas

var logo = new Image();
logo.src = 'logo.png';

ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);


Accessing an image data
array

canvasData = ctx.getImageData(x,y,w,h);
[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]


Canvas can also do video
v = document.getElementById('player');
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);


<canvas> pros
‣ Great for games and image/video manipulation
(now JS processors have caught up)
‣ Much faster than markup-based animation (eg
SVG, SMIL)
‣ Runs on iDevices, unlike Flash
‣ Support across all modern browsers
‣ Add support for older browsers using Polyfills,
like Excanvas


<canvas> cons
‣ Content is inaccessible
‣ No animation API built in
‣ Can be really slow for large dynamic areas, like
UIs


Examples
‣ http://dev.opera.com/articles/view/html-5-
canvas-the-basics/
‣ http://html5doctor.com/video-canvas-magic/
‣ http://www.hakim.se/experiments/
‣ http://www.canvasdemos.com/
‣ http://people.opera.com/patrickl/experiments/
canvas/particle/3/
‣ https://github.com/mezzoblue/PaintbrushJS


Offline apps

http://www.ﬂickr.com/photos/bzedan/2441516764/

The web is pretty crap
offline
‣ So how do we address this?
‣ HTML5 saves the day (again)
‣ Application Cache (AppCache) for assets
‣ Web storage for simple data
‣ WebSQL/IndexedDB for complex data


AppCache Manifest
reference
<html manifest="blah.manifest">


Manifest file
CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
NETWORK:
# never cached (apart from normal caching mechanism)
onlineonly.css
FALLBACK:
# pattern matching. fallback file will also be cached
images/ images/not-offline.png


Web (local/session) storage
localStorage/sessionStorage
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.clear();
localStorage.key = value;
if (localStorage.key == '…') { … }


WebSQL
var db =
openDatabase(dbName, version, displayName,
expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});


Web databases: future
‣ WebSQL supported in Opera/Webkit
‣ But being discontinued
‣ Moz/IE prefer IndexedDB
‣ All will eventually go this way
‣ WebSQL may well remain good option for mobile


Caching issues?


HTML5 accessibility
best practices

http://www.ﬂickr.com/photos/tjmartins/3890142316/

HTML5 accessibility?
‣ Still no magic bullet
‣ Some a11y boons
‣ And some new (old?) problems
‣ html5accessibility.com is very useful


The good things
‣ A lot of elements have keyboard accessibility
built in
‣ New semantics mean lot of advantages (eg no
more skip links?)
‣ Video captioning is coming
‣ WAI ARIA can still be used to supplement where
needed
‣ Some browsers have started exposing element
semantics to AT

The bad things
‣ Canvas!
‣ Video a11y (coming soon)


Should we use
HTML5 now?


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


The UK road system is
never finished...

http://www.ﬂickr.com/photos/50014762@N03/4632637811/

In general...

‣ ...don’t do browser sniffing


Do feature detection/
graceful degradation
‣ http://diveintohtml5.org/everything.html
‣ http://www.modernizr.com/
‣ http://yepnopejs.com/


And patch older browsers
as needed
‣ https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-Browser-Polyfills


HTML5 security?

http://www.ﬂickr.com/photos/freefoto/5692512457/

HTML5 security?
‣ Very similar to HTML4
‣ Not much can be done to protect source
‣ Need to be careful about cross domain resource
sharing and messaging
‣ Other questions?


Device APIs

http://www.ﬂickr.com/photos/freefoto/5692512457/

Device APIs
‣ http://www.w3.org/2009/dap/
‣ Far from being supported
‣ And there are still competing proposals, like WAC
‣ Shame, as this is one killer feature area for web
apps


Questions?

What would we like to
see in the spec?
http://www.ﬂickr.com/photos/mikecogh/1812288874/

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


The Crazy World of HTML5 Semantics

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a The Crazy World of HTML5 Semantics

Semelhante a The Crazy World of HTML5 Semantics (20)

Mais de Chris Mills

Mais de Chris Mills (20)

Último

Último (20)

The Crazy World of HTML5 Semantics