html5 smart markup for smarter websites [fowd nyc 2011]

Smart Markup for Smarter Websites

Aaron [email protected]/AaronGustafson

http://twitter.com/aarongustafson

http://twitter.com/aarongustafson

http://slideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson

This is not a consensus-based approach — there’s no guarantee that everyone will be happy! There is also no voting.

— WHATWG process

<time>

<time>Use

anyway.

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

— HTML design principle

2004 2014

June 2004WhatWG begins work on Web Applications 1.0

2007Work begins at W3C

2014HTML5 Standard?

May 2011HTML5 to Last Call

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

Browsers ignore what they don’t

understand

FUTURE OF WEB DESIGN NYC 2011

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

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

<p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>


Fault toleranceHTML5 introduces several reallyuseful elements and a ton of new APIs.

Please fill out the form below. Note: all fields are required.

I like to work with markup languages because they are simple and easy to read. They also have that certain je ne sais quoi.


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


Fault tolerance

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


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

I get it! I don’t get it :-(

You are already using HTML5

HTML5 == HTML 4

HTML5 == HTML 3

HTML5 == HTML 2

HTML5 == HTML 1

HTML5 == HTML 0


HTML 4.01

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt

fieldsetformh1 h2 h3 h4 h5 h6

headhtml

iframe img

inskbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

hr menustrongsup

i small

u eminput


HTML5

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt


headhtml

iiframe img

inputins

kbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

em

hr menusmall

strong

articleaside

audiocanvas

commanddatalist

details

embed

figcaptionfigurefooterheader

hgroupkeygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

u


Our focus today

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt


headhtml

iframe img

inskbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

hr menustrong

articleaside

audiocanvas

commanddatalist

details

embed

figcaptionfigurefooterheader

hgroupkeygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

i small

u eminput

What’s the easiest way to

“switch” a site to HTML5?


Switching to HTML5<!DOCTYPE html>

Simpli!cation


Simpli!cation<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<html lang="en">


Simpli!cation<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8" />


Simpli!cation<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>

Rede!nition


Rede!nition

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


Rede!nition

<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 that is borrowed or in an alternate voice or mood.

<p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don’t know what">je ne sais quoi</i>.</p>


Rede!nition

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

The cite elementThe title of a cited work (e.g. a book, magazine, or journal).


Rede!nitionThe small elementRepresents so-called “!ne print”(e.g. disclaimers, caveats, etc.).


Rede!nitionThe hr elementRepresents a paragraph-level thematic break.

Organization

Organization<section> </section>

<article> </article>

section

section > article

article

article > section

Organization<header> </header>

<footer> </footer>

header

footer

article

article > header

article

article > footer


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



<aside>  </aside>

</article>

Organization<figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>

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


Implicit sections (HTML 4)<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 HTML51.1 W3C standardization process1.2 Markup


Explicit sections (HTML5)<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...



sect

ion

sect

ion






sect

ion

sect

ion



Sections๏ section

๏ article

๏ aside

๏ footer

๏ header

๏ nav

75


Outline limitations in HTML4

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


Heading groups (HTML5)<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


Aside: rooted sections

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


Sectioning roots๏ body

๏ blockquote

๏ details

๏ fieldset

๏ figure

๏ td

79

Accessibility


What is it?


What is it?

<button>Tweet</button>

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



What is it?


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


What is it?


What is it?

<button>Search Mail</button>

<div>Search Mail</div>



What is it?


<div>Search Mail</div>


ARIA maps the OS to the web

Semantics+

All the web’s a play…<section id="main" role="main"> </section>


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


These are the droids you seek<span role="button">OK</span>

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


What is it?

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


What is it?

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


96


97


What’s happening?

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

B(off)

B(on)


What’s happening?

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

B(off)

B(on)


What’s happening?

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


Hey! Over here!


Hey! Over here!

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


Hey! Over here!

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


Hey! Over here!

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

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


Hey! Over here!

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

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


Hey! Over here!

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


Hey! Over here!

Expansion


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

9+ 4+ 6+ 5+ 11.1+


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

9+ 4+ 6+ 5+ 11.1+


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

9+ 4+ 6+ 5+ 11.1+


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

9+ 4+ 6+ 5+ 11.1+


Expansion

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


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


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

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


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

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


Expansion<audio src="my.oga" controls="controls"></audio>

Expansion<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> </audio>

Expansion<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> </audio>


Expansion<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download MP3</a></li> <li><a href="my.oga">Download Ogg</a></li> </ul></audio>

Expansion<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …>  <ul> <li><a href="my.mp3">Download MP3</a></li> <li><a href="my.oga">Download Ogg</a></li> </ul> </object></audio>


Expansion<video src="my.ogv" controls="controls"></video>

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

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


No MIME, no serviceAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm


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

HTML5: Smart Markupfor Smarter Websites

by Aaron Gustafson

More of the same:http://adaptivewebdesign.info

http://easy-designs.nethttp://blog.easy-designs.nethttp://aaron-gustafson.com

This presentation is licensed underCreative Commons Attribution-Noncommercial-Share Alike 3.0

flickr Photo Creditshttp://www.!ickr.com/photos/aarongustafson/galleries/72157627920318847/

http://adaptivewebdesign.info

http://adaptivewebdesign.info

http://easy-designs.net

http://easy-designs.net

http://easy-reader.net

http://easy-reader.net

http://aaron-gustafson.com

http://aaron-gustafson.com

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://www.flickr.com/photos/aarongustafson/galleries/72157627920318847/

http://www.flickr.com/photos/aarongustafson/galleries/72157627920318847/

html5 smart markup for smarter websites [fowd nyc 2011]

Technology