HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

Smart Markup for Smarter WebsitesAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson

This is not a consensus-basedapproach — there’s no guaranteethat everyone will be happy! Thereis also no voting. — WHATWG process

<time>

Use<time>anyway.

In case of conflict, considerusers over authors overimplementors over specifiers overtheoretical purity. — HTML design principle

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 tolerancen. a system’s ability to continueto operate when it encountersand unexpected error.

Browsers ignorewhat they don’t understand

FUTURE OF WEB DESIGN NYC 2011Fault 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>

FUTURE OF WEB DESIGN NYC 2011Fault tolerance HTML5 introduces several really useful 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.

FUTURE OF WEB DESIGN NYC 2011Fault 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>

FUTURE OF WEB DESIGN NYC 2011Fault 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>

FUTURE OF WEB DESIGN NYC 2011Fault 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

FUTURE OF WEB DESIGN NYC 2011HTML 4.01 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 i 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 u em blockquote h1 h2 h3 h4 h5 h6 table caption col colgroup thead tbody tfoot tr th td

FUTURE OF WEB DESIGN NYC 2011HTML5 html meta head link style 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 i 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 u em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td

FUTURE OF WEB DESIGN NYC 2011Our focus today html meta head link style 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 i 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 u em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td

What’s the easiest way to“switch” a site to HTML5?

FUTURE OF WEB DESIGN NYC 2011Switching to HTML5 <!DOCTYPE html>

Simpli cation

FUTURE OF WEB DESIGN NYC 2011Simpli cation <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">

FUTURE OF WEB DESIGN NYC 2011Simpli cation <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />

FUTURE OF WEB DESIGN NYC 2011Simpli 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

FUTURE OF WEB DESIGN NYC 2011Rede nitionThe em elementRepresents 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 elementRepresents a span of text of great importance. <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p>

FUTURE OF WEB DESIGN NYC 2011Rede nitionThe b elementRepresents a span of text oﬀset from its surrounding content, but of no extraimportance. <p>This presentation is about <b>HTML5</b>.</p>The i elementRepresents a span of text that is borrowed or 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> <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>

FUTURE OF WEB DESIGN NYC 2011Rede nitionThe 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>

FUTURE OF WEB DESIGN NYC 2011Rede nitionThe small elementRepresents so-called “ ne print”(e.g. disclaimers, caveats, etc.).

FUTURE OF WEB DESIGN NYC 2011Rede nitionThe hr elementRepresents a paragraph-level thematic break.

Organization

FUTURE OF WEB DESIGN NYC 2011Organization <section>  </section> <article>  </article>

section

section > article

article

article > section

FUTURE OF WEB DESIGN NYC 2011Organization <header>  </header> <footer>  </footer>

header

footer

article

article > header

article

article > footer

FUTURE OF WEB DESIGN NYC 2011Organization <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>

FUTURE OF WEB DESIGN NYC 2011Organization <article>  <aside>  </aside> </article>

FUTURE OF WEB DESIGN NYC 2011Organization <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>

FUTURE OF WEB DESIGN NYC 2011Implicit 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 HTML5 1.1 W3C standardization process 1.2 Markup

FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup

FUTURE OF WEB DESIGN NYC 2011 Sections๏ section๏ article๏ aside๏ footer๏ header๏ nav 75

FUTURE OF WEB DESIGN NYC 2011Outline limitations in HTML4 <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... 1 Title 1.1 Subtitle

FUTURE OF WEB DESIGN NYC 2011Heading groups (HTML5) hgroup <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... 1 Title

FUTURE OF WEB DESIGN NYC 2011Aside: rooted sections <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... 1 Title 1.1 Section heading

FUTURE OF WEB DESIGN NYC 2011 Sectioning roots๏ body๏ blockquote๏ details๏ fieldset๏ figure๏ td 79

Accessibility

FUTURE OF WEB DESIGN NYC 2011What is it?

FUTURE OF WEB DESIGN NYC 2011What is it? <button>Tweet</button> <a class=”button”>Tweet</a>

FUTURE OF WEB DESIGN NYC 2011What is it?

FUTURE OF WEB DESIGN NYC 2011What is it? <button>Search Mail</button> <div>Search Mail</div>

FUTURE OF WEB DESIGN NYC 2011ARIA maps the OS to the web

Semantics+

FUTURE OF WEB DESIGN NYC 2011All the web’s a play… <section id="main" role="main">  </section>

FUTURE OF WEB DESIGN NYC 2011Semantic 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

FUTURE OF WEB DESIGN NYC 2011These 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>

FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>

FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a>

FUTURE OF WEB DESIGN NYC 2011 96

FUTURE OF WEB DESIGN NYC 2011 97

FUTURE OF WEB DESIGN NYC 2011What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>

FUTURE OF WEB DESIGN NYC 2011What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="not bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>

FUTURE OF WEB DESIGN NYC 2011What’s happening? 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"> <img src="bold-on.png" alt="bold" /> </span>

FUTURE OF WEB DESIGN NYC 2011Hey! Over here!

FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <input class="tweet-counter" value="140" disabled="disabled">

FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>

FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }

FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>

FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>

FUTURE OF WEB DESIGN NYC 2011Hey! Over here!

Expansion

FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time>October 25, 2010 8:11 PM</time>

FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>

FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time datetime="2010-10-25T20:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>

FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <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>

FUTURE OF WEB DESIGN NYC 2011Expansion <input type="email" …/> <input type="url" …/>

FUTURE OF WEB DESIGN NYC 2011Expansion <input type="date" name="dob"/>

FUTURE OF WEB DESIGN NYC 2011Expansion <input type="number" name="foo"/> <input type="range" min="1" max="11" name="foo"/>

FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>

FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option>  </datalist>

FUTURE OF WEB DESIGN NYC 2011Expansion <audio src="my.oga" controls="controls"></audio>

FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/>  </audio>

FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/>  </audio>

FUTURE OF WEB DESIGN NYC 2011Expansion <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>

FUTURE OF WEB DESIGN NYC 2011Expansion <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>

FUTURE OF WEB DESIGN NYC 2011Expansion <video src="my.ogv" controls="controls"></video>

FUTURE OF WEB DESIGN NYC 2011Expansion <video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/>  </video>

FUTURE OF WEB DESIGN NYC 2011Expansion <video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/>  </video>

FUTURE OF WEB DESIGN NYC 2011No MIME, no service AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

FUTURE OF WEB DESIGN NYC 2011Expansion <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 Markup for Smarter Websites by Aaron Gustafson More of the same: http://adaptivewebdesign.info http://easy-designs.net http://blog.easy-designs.net http://aaron-gustafson.com This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 ﬂickr Photo Creditshttp://www. ickr.com/photos/aarongustafson/galleries/72157627920318847/

http://blog.easy-designs.net	188
http://timothycomeau.info	171
http://timothycomeau.com	119
http://paper.li	76
http://www.cs.ubbcluj.ro	29
http://lanyrd.com	24
http://a0.twimg.com	8
http://eai	7
http://us-w1.rockmelt.com	6
http://agrega.educa.madrid.org	4
http://www.onlydoo.com	3
http://blog.timothycomeau.com	3
http://flashattackcrew.blogspot.com	1
http://news.northshorebreakingnews.com	1
http://webcache.googleusercontent.com	1
http://www.linkedin.com	1
http://www.foogletrends.com	1

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

by Aaron Gustafson

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 643

Statistics