html5: smart markup for smarter websites [future of web apps, las vegas 2011]
DESCRIPTION
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.TRANSCRIPT
![Page 2: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/2.jpg)
HTML5 gives you more controlover your documentsand apps
![Page 3: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/3.jpg)
Paving our “cowpaths”
![Page 4: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/4.jpg)
The process is ongoing…
![Page 5: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/5.jpg)
…but the end is near.
2004 2014
June 2004WhatWG begins work on Web Applications 1.0
2007Work begins at W3C
2014HTML5 Standard?
May 2011HTML5 to Last Call
![Page 6: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/6.jpg)
You can use it now
![Page 7: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/7.jpg)
fault tolerancen. a system’s ability to continue to operate when it encounters and unexpected error.
![Page 8: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/8.jpg)
![Page 9: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/9.jpg)
![Page 10: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/10.jpg)
![Page 11: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/11.jpg)
Browsers ignore what they don’t
understand.
![Page 12: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/12.jpg)
For example<input type="date" name="dob"/>
![Page 13: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/13.jpg)
For example<video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul></video>
![Page 14: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/14.jpg)
Now back to those cowpaths…
![Page 15: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/15.jpg)
A great idea that we lost.
<fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption></fig>
The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html
Albert Einstein
![Page 16: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/16.jpg)
Microformats brought it back.
<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Albert Einstein</p></div>
The original “figure” microformat.
Albert Einstein
![Page 17: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/17.jpg)
HTML5 re-imagined it.
<figure> <img src="photo.jpeg" alt=""/> <legend>Albert Einstein</legend></figure>
The original HTML5 figure.
Albert Einstein
![Page 18: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/18.jpg)
Microformats adapted.
<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Albert Einstein</p></div>
The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure
Albert Einstein
![Page 19: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/19.jpg)
Microformats adapted.
<figure> <img src="photo.jpeg" alt=""/> <figcaption>Albert Einstein</figcaption></figure>
The current (dare I say final?) HTML5 figure.
Albert Einstein
![Page 20: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/20.jpg)
What’s the easiest way towrite HTML5?
![Page 21: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/21.jpg)
<!DOCTYPE html>
Use the new doctype
![Page 22: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/22.jpg)
The HTML4 Lexicon
a
abbr
address area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfn
div
dl dt
fieldsetform
h1 h2 h3 h4 h5 h6
head
html
i
iframe img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object ol
optgroupoption
pparam
pre q samp
script
select
span
style
sub
table
tbody
td
textarea
tfoot
th
thead
title
tr
ul
var
base
bdo b
cite
em
hr menu
small
strongsup
![Page 23: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/23.jpg)
The HTML5 Lexicon
a
abbr
address area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfn
div
dl dt
fieldsetform
h1 h2 h3 h4 h5 h6
head
html
i
iframe img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object ol
optgroupoption
pparam
pre q samp
script
select
span
style
sub
table
tbody
td
textarea
tfoot
th
thead
title
tr
ul
var
base
bdo b
cite
em
hr menu
small
strong
article
aside
audiocanvas
command
datalist
details
embed
figcaptionfigure
footerheader
hgroup
keygen
mark meter
nav
output progress
rprt
ruby
section
source
summary
time
video
wbr
sup
![Page 24: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/24.jpg)
Our focus today
a
abbr
address area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfn
div
dl dt
fieldsetform
h1 h2 h3 h4 h5 h6
head
html
i
iframe img
input
ins
kbd
label
legend
li
link
map
meta
noscript
object ol
optgroupoption
pparam
pre q samp
script
select
span
style
sub
table
tbody
td
textarea
tfoot
th
thead
title
tr
ul
var
base
bdo b
cite
em
hr menu
small
strong
article
aside
audiocanvas
command
datalist
details
embed
figcaptionfigure
footerheader
hgroup
keygen
mark meter
nav
output progress
rprt
ruby
section
source
summary
time
video
wbr
sup
![Page 25: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/25.jpg)
If only life were simpler…
![Page 26: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/26.jpg)
Simplification
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
The html element
<html lang="en">
![Page 27: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/27.jpg)
Simplification
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Character encoding
<meta charset="utf-8" />
![Page 28: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/28.jpg)
Simplification
<link rel="stylesheet" href="style-original.css" type="text/css" /><style type=”text/css”> /* … */</style><script type=”text/javascript” src=”myscript.js”></script>
Styles and scripts
<link rel="stylesheet" href="style-original.css" /><style> /* … */</style><script src=”myscript.js”></script>
![Page 29: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/29.jpg)
Metamorphosis
![Page 30: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/30.jpg)
Nip/tuck
<p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>
The em elementRepresents a span of text text with emphatic stress.
<p>Please fill out the form below. <strong>Note: allfields are required.</strong></p>
The strong elementRepresents a span of text of great importance.
![Page 31: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/31.jpg)
Evil incarnateThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).
![Page 32: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/32.jpg)
ClarificationThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).
<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>
![Page 33: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/33.jpg)
Resurrection
<p>This presentation is about <b>HTML5</b>.</p>
The b elementRepresents a span of text offset from its surrounding content, but of no extra importance.
<p>The <code>b</code> and <code>i</code> elementshave been legitimized in HTML5. <i>Go figure.</i></p>
The i elementRepresents a span of text in an alternate voice or mood.
![Page 34: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/34.jpg)
Deeper meaningThe hr elementRepresents a paragraph-level thematic break.
![Page 35: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/35.jpg)
Raw materials
![Page 36: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/36.jpg)
The section elementRepresents a section of a document, typically with a title or heading.
The article elementRepresents a section of content that forms an independent part of a document or site.
<section> <!-- pretty much anything can go here --></section>
<article> <!-- pretty much anything can go here --></article>
Organization
![Page 37: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/37.jpg)
![Page 38: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/38.jpg)
section38
![Page 39: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/39.jpg)
section > article39
![Page 40: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/40.jpg)
40
![Page 41: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/41.jpg)
article41
![Page 42: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/42.jpg)
article > section42
![Page 43: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/43.jpg)
The header elementRepresents the header of a section.
The footer elementRepresents the footer of a section.
<header> <!-- titles, etc. go here --></header>
<footer> <!-- meta/supplementary information goes here --></footer>
Organization
![Page 44: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/44.jpg)
44
![Page 45: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/45.jpg)
header45
![Page 46: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/46.jpg)
46
![Page 47: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/47.jpg)
footer47
![Page 48: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/48.jpg)
article48
![Page 49: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/49.jpg)
article > header49
![Page 50: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/50.jpg)
article50
![Page 51: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/51.jpg)
article > footer51
![Page 52: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/52.jpg)
The nav elementDemarcates a group of navigational links.
<nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p></nav>
Organization
![Page 53: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/53.jpg)
53
![Page 54: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/54.jpg)
nav54
![Page 55: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/55.jpg)
55
![Page 56: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/56.jpg)
nav56
![Page 57: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/57.jpg)
The aside elementDemarcates content that is tangentially related to the primary content.
<article>
<!-- main content -->
<aside> <!-- something related --> </aside>
</article>
Organization
![Page 58: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/58.jpg)
58
![Page 59: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/59.jpg)
aside59
![Page 60: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/60.jpg)
The details elementA UI control for hiding optional content. Must contain a summary element, followed by other content.
<details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p></details>
It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org).
Organization
![Page 61: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/61.jpg)
The figure elementA unit of content (typically referenced by the primary content) that is self-contained. May contain a figcaption element and other content.
<figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table></figure>
<figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>
Organization
![Page 62: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/62.jpg)
Refining the outline
![Page 63: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/63.jpg)
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process<p> The Web Hypertext Application...<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
1 HTML51.1 W3C standardization process1.2 Markup
Implicit sections
![Page 64: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/64.jpg)
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process<p> The Web Hypertext Application...<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
sect
ion
sect
ion
1 HTML51.1 W3C standardization process1.2 Markup
Explicit sections
![Page 65: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/65.jpg)
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process<p> The Web Hypertext Application...<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h1> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
sect
ion
sect
ion
1 HTML51.1 W3C standardization process1.2 Markup
Explicit sections
![Page 66: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/66.jpg)
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process<p> The Web Hypertext Application...<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h6> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
1 HTML51.1 W3C standardization process1.2 Markup
sect
ion
sect
ion
Explicit sections
![Page 67: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/67.jpg)
Create explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav
Sectioning elements
![Page 68: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/68.jpg)
1 Title1.1 Subtitle
<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...
Outline limitations
![Page 69: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/69.jpg)
<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...
hgro
up
1 Title
Heading groups FTW!
![Page 70: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/70.jpg)
Establish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td
Sectioning roots
![Page 71: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/71.jpg)
1 Title1.1 Section heading
<h1> Title<p> Text content continues...<p> Text content continues...
<h2> Section heading<p> Text content continues...<blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues...<p> Text content continues...<p> Text content continues...
Rooted sections
![Page 72: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/72.jpg)
New elements to consider
![Page 73: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/73.jpg)
The time elementRepresents a date and/or time.
When?
![Page 74: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/74.jpg)
74
![Page 75: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/75.jpg)
time75
![Page 76: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/76.jpg)
The time elementRepresents a date and/or time.
When?
<time>October 25, 2010 8:11 PM</time>
![Page 77: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/77.jpg)
The time elementRepresents a date and/or time.
When?
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>
![Page 78: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/78.jpg)
The time elementRepresents a date and/or time.
When?
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>
<time datetime="2010-10-25T20:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>
![Page 79: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/79.jpg)
The mark elementRepresents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users' online activities.</p> </li></ol>
Highlighting
![Page 80: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/80.jpg)
80
![Page 81: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/81.jpg)
81
![Page 82: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/82.jpg)
mark82
![Page 83: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/83.jpg)
83
mark
![Page 84: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/84.jpg)
More usable forms
![Page 85: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/85.jpg)
<input type=”datetime”>A UI control for selecting a date and time that includes timezone information.
<input type=”datetime-local”>A UI control for selecting a date and time that does not include timezone information.
<input type=”date”>A UI control for selecting a date with access to all date components (day, month and year).
<input type=” month”>A UI control for selecting a date that provides access to month and year only.
<input type=”time”>A UI control for selecting a time that does not include timezone information.
<input type=”week”>A UI control for selecting a date that provides access to week and year only.
Dates and times
![Page 86: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/86.jpg)
<input type="date" name="dob"/>
Safari
Opera
Dates and times
![Page 87: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/87.jpg)
<input type=”number”>A UI control for selecting a number.
<input type=”range”>A UI control for selecting an imprecise number.
Numbers
![Page 88: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/88.jpg)
<input type="number" name="foo"/>
<input type="range" min="1" max="11" name="foo"/>
Numbers
![Page 89: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/89.jpg)
<input type=”email”>A UI control for entering an email.
<input type=”url”>A UI control for entering a URL.
<input type=”tel”>A UI control for entering a telephone number.
New types
![Page 90: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/90.jpg)
New types
<input type="email" …/> <input type="url" …/>
![Page 91: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/91.jpg)
autocompleteTells the User Agent whether or not the value should be stored.
autofocusTells the User Agent to bring focus to the form control on page load.
formAn id reference to the form to which a given control belongs.
requiredIndicated the form control must be provided a value.
placeholderOffers users a short hint about the required value.
UI control attributes
![Page 92: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/92.jpg)
min and maxLower and upper boundary for an element value (dates, time, and numbers only).
stepThe granularity of values allowed (dates, time, and numbers only).
Value control
<input type="range" min="1" max="11" step="0.5" .../>
![Page 93: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/93.jpg)
patternA regular expression pattern that the User Agent should validate the input against.
Value control
<input type="text" pattern="\d{6}\w{3}" placeholder="6 digits followed by 3 letters" .../>
![Page 94: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/94.jpg)
patternAn id reference to a datalist element containing acceptable values.
Value control
<input type="text" list="countries" name="country"/><datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --></datalist>
![Page 95: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/95.jpg)
95
![Page 96: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/96.jpg)
Truth based on perspective
![Page 97: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/97.jpg)
![Page 98: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/98.jpg)
?
![Page 99: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/99.jpg)
<button>Tweet</button>
![Page 100: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/100.jpg)
<button>Tweet</button><a class=”button”>Tweet</a>
![Page 101: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/101.jpg)
![Page 102: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/102.jpg)
?
![Page 103: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/103.jpg)
<button>Search Mail</button>
![Page 104: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/104.jpg)
<button>Search Mail</button><div>Search Mail</div>
![Page 105: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/105.jpg)
ARIA maps the OS to the web
![Page 106: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/106.jpg)
Semantics+
![Page 107: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/107.jpg)
Landmarks help users navigate quickly
![Page 108: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/108.jpg)
The role attributeDefines the part an element is playing (assuming it’s different than the semantics would otherwise imply).
<section id="main" role="main"> <!-- The primary content for the page would go here --></section>
All the site’s a play...
![Page 109: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/109.jpg)
![Page 110: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/110.jpg)
<header role="banner">
![Page 111: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/111.jpg)
<nav role="navigation">
![Page 112: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/112.jpg)
<form role="search">
![Page 113: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/113.jpg)
<section role="main">
![Page 114: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/114.jpg)
![Page 115: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/115.jpg)
<footer role="contentinfo">
![Page 116: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/116.jpg)
<nav role="navigation">
![Page 117: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/117.jpg)
![Page 118: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/118.jpg)
<aside role="complementary">
![Page 119: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/119.jpg)
Landmark rolesapplicationA region of the page representing a unique software unit executing a set of tasks for its users. It is an area where assistive technologies should also return browse navigation keys back over to the web application in this region.
bannerA region that contains the prime heading or internal title of a page.
complementaryA supporting section of the document that remains meaningful even when separated from the main content.
contentinfoMetadata that applies to the parent document.
formA region of the document that represents a collection of form-associated elements.
mainnavigationsearch
![Page 120: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/120.jpg)
Landmark rolesmainThe main content of a document.
navigationA collection of navigational elements (usually links) for navigating the document or related documents.
searchThe search tool of a web document.
![Page 121: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/121.jpg)
Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparator
![Page 122: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/122.jpg)
![Page 123: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/123.jpg)
<article role="article">
![Page 124: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/124.jpg)
Structural rolesarticleA section of a page that forms an independent part of a document, page, or site.
groupA set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.
noteA section whose content is parenthetic or ancillary to the main content of the resource.
presentationAn element whose implicit native semantics will not be mapped to the accessibility API.
regionA large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents.
separatorA divider that separates and distinguishes sections of content or groups of menu items.
![Page 125: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/125.jpg)
Semantic comparisonAd-hoc ARIA Role HTML5
#header, #top banner header (kind of)
#main, #content main none
#extra, .sidebar complementary, note aside
#footer, #bottom contentinfo footer
#nav navigation nav
.hentry article article
![Page 126: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/126.jpg)
What is this!?
![Page 127: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/127.jpg)
<span role="button">OK</span>
Widget roles
![Page 128: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/128.jpg)
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
![Page 129: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/129.jpg)
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
<div role="alert"> <p>Something went wrong.</p></div>
![Page 130: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/130.jpg)
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
<div role="alert"> <p>Something went wrong.</p></div>
<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>
![Page 131: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/131.jpg)
<a class=”button”>Tweet</a>
![Page 132: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/132.jpg)
<a role=”button”>Tweet</a>
![Page 133: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/133.jpg)
![Page 134: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/134.jpg)
role="application"aria-activedescendant="folder-1"
![Page 135: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/135.jpg)
role="tablist"
![Page 136: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/136.jpg)
role="tab"aria-selected="true"aria-controls="folder-1"
![Page 137: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/137.jpg)
role="tab"aria-selected="false"aria-controls="folder-4"
![Page 138: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/138.jpg)
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
![Page 139: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/139.jpg)
![Page 140: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/140.jpg)
What’s going on!?
![Page 141: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/141.jpg)
<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
B(off)
B(on)
Widget states
![Page 142: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/142.jpg)
<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
B(off)
B(on)
Widget states
![Page 143: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/143.jpg)
<span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></span><span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></span>
B(off)
B(on)
Widget states
![Page 144: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/144.jpg)
aria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)
Widget states
![Page 145: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/145.jpg)
Highlighting living content
![Page 146: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/146.jpg)
Live regions
![Page 147: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/147.jpg)
Live regions
<input class="tweet-counter" value="140" disabled="disabled">
![Page 148: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/148.jpg)
Live regions
<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>
![Page 149: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/149.jpg)
Live regions
<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
.hidden { position: absolute; left: −999em;}
![Page 150: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/150.jpg)
Live regions
<span class="tweet-counter">maximum of 140 characters</span>
<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
![Page 151: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/151.jpg)
Live regions
<span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
![Page 152: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/152.jpg)
Live regions
![Page 153: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/153.jpg)
Notification optionsoffchange not announced
politechange announced after user completes her current activity
assertiveuser agent should interrupt the user’s activity, but not immediately
![Page 154: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/154.jpg)
Who is Supporting WAI-ARIA?
![Page 155: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/155.jpg)
Music to our ears
![Page 156: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/156.jpg)
The audio element
<audio src="my.oga" controls="controls"></audio>
Can you hear me now?
![Page 157: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/157.jpg)
Can you hear me now?Browser .aac .mp3 .oga .wav
Chrome 6+ YES YES YES NO
Firefox 3.6+ NO NO YES YES
Internet Explorer 9+ YES YES NO YES
Opera 10.5+ NO NO YES YES
Safari 5+ YES YES NO YES
![Page 158: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/158.jpg)
<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
Can you hear me now?
![Page 159: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/159.jpg)
Available attributessrcURL for the audio file.
autoplayA boolean specifying whether or not the file should play as soon as it can.
loopA boolean specifying whether or not playback of the file should be repeated.
controlsA boolean that tells the browser to use its default media controls.
preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”
autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
![Page 160: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/160.jpg)
<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
Can you hear me now?
![Page 161: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/161.jpg)
<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download as audio/mp3</a></li> <li><a href="my.oga">Download as audio/ogg</a></li> </ul></audio>
Fallback options
![Page 162: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/162.jpg)
<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …> <!-- flash player goes here --> </object></audio>
Fallback options
![Page 163: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/163.jpg)
$('audio').each(function(){ var $audio = $(this), media = {}, formats = []; $audio.find('source').each(function(){ var src = $(this).attr('src'), ext = src.split('.').pop(); media[ext] = src; formats.push(ext); }); $audio.jPlayer({ swfPath: '/vendors/jPlayer', ready: function(){ $audio.jPlayer('setMedia', media); }, supplied: formats.join(', ') }); });
Fallback options
Using jQuery & jPlayer
![Page 164: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/164.jpg)
$('audio').each(function(){ var audio = this, $button = $('<button>Play</button>') .click(function(){ audio.play(); }); $(this) .removeAttr('controls') .after($button); });
Roll your own
Using jQuery
![Page 165: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/165.jpg)
Opiate of the masses
![Page 166: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/166.jpg)
The video element
<video src="my.ogv" controls="controls"></video>
Elementary, my dear Watson
![Page 167: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/167.jpg)
Not so elementaryVideo file = container file (like ZIP)
๏ 1 video track๏ 1 (or more) audio tracks๏ metadata๏ subtitle/caption tracks (optional)
![Page 168: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/168.jpg)
Not so elementaryVideo formatsFlash Video (.flv)Prior to 2008, the only video format supported in Adobe Flash.
MPEG 4 (.m4v or .mp4)Based on QuickTime; iTunes uses this format.
Ogg (.ogv)Open source container format.
WebM (.webm)New format announced in May 2010.
![Page 169: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/169.jpg)
Not so elementaryVideo codecsH.264Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.
TheoraUsed primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).
VP8Used primarily in WebM. Owned by Google, but licensed royalty-free.
![Page 170: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/170.jpg)
Not so elementaryAudio codecsMP3Nearly universal in usage, but was part of FLV. Patented.
AAC (Advanced Audio Coding)Used primarily in MP4. Patented.
VorbisUsed in Ogg audio & video as well as WebM. Royalty-free.
![Page 171: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/171.jpg)
Not so elementaryBrowser .m4v
(AAC + H.264)
.ogv(Vorbis + Theora)
.webm(Vorbis + VP8)
Chrome 3+(for now)
3+ 6+
Firefox NO 3.5+ 4+
Internet Explorer 9+ NO MAYBE
Opera NO 10.5+ 10.6+
Safari 3.1+ MAYBE MAYBE
![Page 172: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/172.jpg)
<video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
Format juggling
![Page 173: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/173.jpg)
<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
A good first impression
![Page 174: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/174.jpg)
<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/> <source src="my.webm" type='video/webm; codecs="vp8, vorbis"'/> <source src="my.ogv" type='video/ogg; codecs="theora, vorbis"'/> <!-- fallback --></video>
Kindness to strangers
Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
![Page 175: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/175.jpg)
Available attributessrcURL for the audio file.
autoplayA boolean specifying whether or not the file should play as soon as it can.
loopA boolean specifying whether or not playback of the file should be repeated.
controlsA boolean that tells the browser to use its default media controls.
posterThe image to be shown while the video is not activated.
preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”
autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
![Page 176: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/176.jpg)
AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
No MIME, no service
![Page 177: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/177.jpg)
<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul> <li><a href="/r/2-5.m4v">Download as video/mp4</a></li> <li><a href="/r/2-5.webm">Download as video/webm</a></li> <li><a href="/r/2-5.ogv">Download as video/ogg</a></li> </ul></video>
Fallback options
![Page 178: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/178.jpg)
<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <object width="600" height="400" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf"/> <param name="allowfullscreen" value="true"/> <param name="flashvars" value='config={"clip": {"url": "/r/2-5.m4v", "autoPlay":false, "autoBuffering":true}}'/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul><!-- links --></ul> </object></video>
Fallback options
![Page 179: HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://reader038.vdocument.in/reader038/viewer/2022110303/54c70c7a4a7959e62f8b461b/html5/thumbnails/179.jpg)
For More:@AaronGustafson
http://adaptivewebdesign.infohttp://easy-designs.nethttp://easy-reader.net
Slides available athttp://slideshare.net/AaronGustafson
This presentation is licensed underCreative Commons Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits“2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi
“Aruba” by Salvatore.Freni“IMG_6200” by pcutler
“Construction material” by raisin bun“TOC” by D'Arcy Norman
“HTML5 logo in Braille” by Ted Drake“Dual Samsung Monitors” by steve-uk
“Statue of liberty” by gadl“Lego creation” by MiikaS
“iFlickr touch screen” by exfordy“Green Plant” by kevin1024“08-jan-28” by sashafatcat
“Revere EIGHT - 8mm…” by Kevitivity