HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

Smart Markup for
Smarter Websites
Aaron Gustafson
Easy Designs, LLC
@AaronGustafson
slideshare.net/AaronGustafson

HTML5 gives
you more
control
over your
documents
and apps

…but the end is near.

June 2004
WhatWG begins work 2007 May 2011 2014
on Web Applications 1.0 Work begins at W3C HTML5 to Last Call HTML5 Standard?

2004 2014

fault tolerance
n. a system’s ability to continue to
operate when it encounters and
unexpected error.

Browsers ignore
what they don’t
understand.

For example
<input type="date" name="dob"/>

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>

A great idea that we lost.

Albert Einstein

<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

Microformats brought it back.

Albert Einstein

<div class="figure">
<img class="image" src="photo.jpeg" alt=""/>
<p class="caption">Albert Einstein</p>
</div>
The original “figure” microformat.

HTML5 re-imagined it.

Albert Einstein

<figure>
<legend>Albert Einstein</legend>
</figure>
The original HTML5 figure.

Microformats adapted.

Albert Einstein

<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

Microformats adapted.

Albert Einstein

<figure>
<figcaption>Albert Einstein</figcaption>
</figure>
The current (dare I say final?) HTML5 figure.

What’s the
easiest way to
write HTML5?

Use the new doctype
<!DOCTYPE html>

The HTML4 Lexicon
html
meta head link style
title base body dl dt dd
bdo script noscript map dfn b
object param p div ul ol li cite
iframe address area img br a small
pre code abbr kbd var q samp hr menu
textarea ins del sub sup span strong
select option optgroup label input
form fieldset legend button i em
blockquote h1 h2 h3 h4 h5 h6
table caption col colgroup
thead tbody tfoot tr
th td

The HTML5 Lexicon
html
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button i em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
th td

Our focus today
html
title base body dl dt dd section article
bdo script noscript map dfn b aside details summary
object param p div ul ol li cite canvas audio video
iframe address area img br a small nav figure figcaption
pre code abbr kbd var q samp hr menu header footer command
textarea ins del sub sup span strong time source datalist
select option optgroup label input output ruby progress
form fieldset legend button i em mark hgroup meter
blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed
table caption col colgroup rt rp
th td

Simplification
The html element
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

<html lang="en">

Simplification
Character encoding
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

<meta charset="utf-8" />

Simplification
Styles and scripts
<link rel="stylesheet" href="style-original.css" type="text/css" />
<style type=”text/css”>
/* … */
</style>
<script type=”text/javascript” src=”myscript.js”></script>

<link rel="stylesheet" href="style-original.css" />
<style>
/* … */
</style>
<script src=”myscript.js”></script>

Nip/tuck
The em element
Represents a span of text text with emphatic stress.

<p>HTML5 introduces several <em>really</em> useful elements and
a ton of new APIs.</p>

The strong element
Represents a span of text of great importance.

<p>Please fill out the form below. <strong>Note: all
fields are required.</strong></p>

Evil incarnate
The small element
Represents so-called “fine print” (e.g. disclaimers, caveats, etc.).

Clarification
The cite element
The 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>

Resurrection
The b element
Represents a span of text offset from its surrounding content, but of no
extra importance.

<p>This presentation is about <b>HTML5</b>.</p>

The i element
Represents a span of text in an alternate voice or mood.

<p>The <code>b</code> and <code>i</code> elements
have been legitimized in HTML5. <i>Go figure.</i></p>

Deeper meaning
The hr element
Represents a paragraph-level thematic break.

Organization
The section element
Represents a section of a document, typically with a title or heading.

<section>

</section>

The article element
Represents a section of content that forms an independent part of a
document or site.

<article>

</article>

section > article
39

article > section
42

Organization
The header element
Represents the header of a section.

<header>

</header>

The footer element
Represents the footer of a section.

<footer>

</footer>

Organization
The nav element
Demarcates 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
The aside element
Demarcates content that is tangentially related to the primary content.

<article>



<aside>

</aside>

</article>

Organization
The details element
A 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
The figure element
A unit of content (typically referenced by the primary content) that is
self-contained. May contain a figcaption element and other content.

<figure id="fig-1">
<figcaption>Photo of Albert Einstein</figcaption>
</figure>

<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>

</table>
</figure>

Implicit sections
<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...

1 HTML5
1.1 W3C standardization process
1.2 Markup

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

Explicit sections
<h1> HTML5

section

<h2> Markup
section


1 HTML5
1.2 Markup


Explicit sections
<h1> HTML5

section

<h1> Markup
section


1 HTML5
1.2 Markup


Explicit sections
<h1> HTML5

section

<h6> Markup
section


1 HTML5
1.2 Markup


Sectioning elements
Create explicit sections in an outline.
๏ section (obviously)
๏ article
๏ aside
๏ footer
๏ header
๏ nav

Outline limitations
<h1> Title
<h2> Subtitle
<p> Text content continues...

1 Title
1.1 Subtitle

Heading groups FTW!

hgroup
<h1> Title
<h2> Subtitle

1 Title

Sectioning roots
Establish a new outline.
๏ body (obviously)
๏ blockquote
๏ details
๏ fieldset
๏ figure
๏ td

Rooted sections
<h1> Title

<h2> Section heading
<blockquote>
<h2> Rooted heading

1 Title
1.1 Section heading

When?
The time element
Represents a date and/or time.

When?
The time element

<time>October 25, 2010 8:11 PM</time>

When?
The time element


<time datetime="2010-10-25T20:11:00-05:00">
October 25, 2010 8:11 PM</time>

When?
The time element


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

Highlighting
The mark element
Represents 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>

Dates and times
<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

Safari

Opera

<input type="date" name="dob"/>

Numbers
<input type=”number”>
A UI control for selecting a number.

<input type=”range”>
A UI control for selecting an imprecise number.

Numbers

<input type="number" name="foo"/>

<input type="range" min="1" max="11" name="foo"/>

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

<input type="email" …/> <input type="url" …/>

UI control attributes
autocomplete
Tells the User Agent whether or not the value should be stored.

autofocus
Tells the User Agent to bring focus to the form control on page load.

form
An id reference to the form to which a given control belongs.

required
Indicated the form control must be provided a value.

placeholder
Offers users a short hint about the required value.

Value control
min and max
Lower and upper boundary for an element value (dates, time, and numbers only).

step
The granularity of values allowed (dates, time, and numbers only).

<input type="range" min="1" max="11" step="0.5" .../>

Value control
pattern
A regular expression pattern that the User Agent should validate the input against.

<input type="text"
pattern="d{6}w{3}"
placeholder="6 digits followed by 3 letters"
.../>

Value control
pattern
An id reference to a datalist element containing acceptable values.

<input type="text" list="countries" name="country"/>
<datalist id="countries">
<option>Afghanistan</option>
<option>Åland Islands</option>

</datalist>

<button>Tweet</button>
<a class=”button”>Tweet</a>

<button>Search Mail</button>
<div>Search Mail</div>

Landmarks
help users
navigate
quickly

All the site’s a play...
The role attribute
Defines the part an element is playing (assuming it’s different than the
semantics would otherwise imply).

<section id="main" role="main">

</section>

Landmark roles
application
A 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.
banner
A region that contains the prime heading or internal title of a page.
complementary
A supporting section of the document that remains meaningful even when separated
from the main content.
contentinfo
Metadata that applies to the parent document.
form
A region of the document that represents a collection of form-associated elements.
main
navigation
search

Landmark roles
main
The main content of a document.
navigation
A collection of navigational elements (usually links) for navigating the document or
related documents.
search
The search tool of a web document.

Structural roles
article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowheader
separator

Structural roles
article
A section of a page that forms an independent part of a document, page, or site.
group
A set of user interface objects which are not intended to be included in a page summary
or table of contents by assistive technologies.
note
A section whose content is parenthetic or ancillary to the main content of the resource.
presentation
An element whose implicit native semantics will not be mapped to the accessibility API.
region
A 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.
separator
A divider that separates and distinguishes sections of content or groups of menu items.

Semantic comparison
Ad-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

Widget roles
<span role="button">OK</span>

Widget roles

(of course <button>OK</button> would be better)

Widget roles


<div role="alert">
<p>Something went wrong.</p>
</div>

Widget roles


<div role="alert">
</div>

<div role="alertdialog">
<img src="x.png" alt="dismiss" role="button" />
</div>

<a class=”button”>Tweet</a>

<a role=”button”>Tweet</a>

role="application"
aria-activedescendant="folder-1"

role="tab"
aria-selected="true"
aria-controls="folder-1"

role="tab"
aria-selected="false"
aria-controls="folder-4"

role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"

Widget states

B B
(off) (on)

<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>

Widget states

B B
(off) (on)

<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
</span>

Widget states

B B
(off) (on)

<span role="button" aria-pressed="false">
<img src="bold-off.png" alt="not bold" />
</span>
<span role="button" aria-pressed="true">
</span>

Widget states
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-grabbed
aria-hidden
aria-invalid
aria-pressed
aria-selected
aria-valuenow (the W3C defines this as a “property”)
aria-valuetext (ditto)

Live regions

<input class="tweet-counter" value="140" disabled="disabled">

Live regions

<span id="chars_left_notice" class="numeric">
<strong id="status-field-char-counter"
class="char-counter">140</strong>
</span>

Live regions

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>

.hidden {
position: absolute;
left: −999em;
}

Live regions

<span class="tweet-counter">maximum of 140 characters</span>

<span class="tweet-counter">140
<b class="hidden"> characters remaining</b></span>

Live regions

<span aria-live="polite" aria-atomic="true"
class="tweet-counter">140<b class="hidden">
characters remaining</b></span>

Notification options
off
change not announced

polite
change announced after user completes her current activity

assertive
user agent should interrupt the user’s activity, but not immediately

Can you hear me now?
The audio element
<audio src="my.oga" controls="controls"></audio>

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

Available attributes
src
URL for the audio file.
autoplay
A boolean specifying whether or not the file should play as soon as it can.
loop
A boolean specifying whether or not playback of the file should be repeated.
controls
A boolean that tells the browser to use its default media controls.
preload
Tells 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.

Fallback options
preload="auto">
<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
preload="auto">
<object …>

</object>
</audio>

Fallback options
$('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(', ')
});
});
Using jQuery & jPlayer

Roll your own
$('audio').each(function(){
var audio = this,
$button = $('<button>Play</button>')
.click(function(){
audio.play();
});
$(this)
.removeAttr('controls')
.after($button);
});
Using jQuery

Elementary, my dear Watson
The video element
<video src="my.ogv" controls="controls"></video>

Not so elementary
Video file = container file (like ZIP)

๏ 1 video track
๏ 1 (or more) audio tracks
๏ metadata
๏ subtitle/caption tracks (optional)

Not so elementary
Video formats
Flash 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.

Not so elementary
Video codecs
H.264
Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.

Theora
Used primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).

VP8
Used primarily in WebM. Owned by Google, but licensed royalty-free.

Not so elementary
Audio codecs
MP3
Nearly universal in usage, but was part of FLV. Patented.

AAC (Advanced Audio Coding)
Used primarily in MP4. Patented.

Vorbis
Used in Ogg audio & video as well as WebM. Royalty-free.

Not so elementary
Browser .m4v .ogv .webm
(AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)

Chrome 3+ 3+ 6+
(for now)

Firefox NO 3.5+ 4+

Internet Explorer 9+ NO MAYBE

Opera NO 10.5+ 10.6+

Safari 3.1+ MAYBE MAYBE

Format juggling
<video controls="controls" width="640" height="480">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>

</video>

A good first impression
<video controls="controls" width="640" height="480"
poster="my.png">
<source src="my.m4v"/>
<source src="my.webm"/>
<source src="my.ogv"/>

</video>

Kindness to strangers
<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"'/>

</video>

Note: The MPEG 4 codec will depend on the encoding “profiles” you use.

Available attributes
src
URL for the audio file.
autoplay
A boolean specifying whether or not the file should play as soon as it can.
loop
A boolean specifying whether or not playback of the file should be repeated.
controls
A boolean that tells the browser to use its default media controls.
poster
The image to be shown while the video is not activated.
preload
Tells 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.

No MIME, no service
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Fallback options
<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
<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></ul>
</object>
</video>

For More:
@AaronGustafson
http://adaptivewebdesign.info
http://easy-designs.net
http://easy-reader.net

Slides available at
http://slideshare.net/AaronGustafson

This presentation is licensed under
Creative Commons Attribution-Noncommercial-Share Alike 3.0

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

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

More Related Content

What's hot (20)

Similar to HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011] (20)

More from Aaron Gustafson (20)

Recently uploaded (20)

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]