HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
- 1. Smart Markup for
Smarter Websites
Aaron Gustafson
Easy Designs, LLC
@AaronGustafson
slideshare.net/AaronGustafson
- 5. …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
- 7. fault tolerance
n. a system’s ability to continue to
operate when it encounters and
unexpected error.
- 13. 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>
- 15. 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
- 16. 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.
- 17. HTML5 re-imagined it.
Albert Einstein
<figure>
<img src="photo.jpeg" alt=""/>
<legend>Albert Einstein</legend>
</figure>
The original HTML5 figure.
- 18. 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
- 19. Microformats adapted.
Albert Einstein
<figure>
<img src="photo.jpeg" alt=""/>
<figcaption>Albert Einstein</figcaption>
</figure>
The current (dare I say final?) HTML5 figure.
- 22. 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
- 23. The HTML5 Lexicon
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 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
thead tbody tfoot tr
th td
- 24. Our 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 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
thead tbody tfoot tr
th td
- 28. 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>
- 30. 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>
- 32. 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>
- 33. 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>
- 36. Organization
The section element
Represents a section of a document, typically with a title or heading.
<section>
<!-- pretty much anything can go here -->
</section>
The article element
Represents a section of content that forms an independent part of a
document or site.
<article>
<!-- pretty much anything can go here -->
</article>
- 43. Organization
The header element
Represents the header of a section.
<header>
<!-- titles, etc. go here -->
</header>
The footer element
Represents the footer of a section.
<footer>
<!-- meta/supplementary information goes here -->
</footer>
- 52. 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>
- 60. 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).
- 61. 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">
<img src="photo.jpeg" alt=""/>
<figcaption>Photo of Albert Einstein</figcaption>
</figure>
<figure id="fig-2">
<table>
<caption>2011 Forecast Earnings</caption>
<!-- a bunch of data -->
</table>
</figure>
- 63. 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
- 64. Explicit sections
<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
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
- 65. Explicit sections
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h1> 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...
<h1> 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
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
- 66. Explicit sections
<h1> HTML5
<p> HTML5 is currently under development...
<p> Like its immediate predecessors, HTML...
<h4> 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...
<h6> 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
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
- 68. Outline limitations
<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
- 69. Heading groups FTW!
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
- 71. 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
- 77. When?
The time element
Represents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-10-25T20:11:00-05:00">
October 25, 2010 8:11 PM</time>
- 78. When?
The time element
Represents a date and/or time.
<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>
- 79. 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>
- 85. 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.
- 89. 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.
- 90. New types
<input type="email" …/> <input type="url" …/>
- 91. 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.
- 92. 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" .../>
- 93. 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"
.../>
- 94. 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>
- 108. 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">
<!-- The primary content for the page would go here -->
</section>
- 119. 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
- 120. 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.
- 124. 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.
- 125. 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
- 130. Widget roles
<span role="button">OK</span>
(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>
- 141. Widget states
B B
(off) (on)
<span>
<img src="bold-off.png" alt="bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
- 142. Widget states
B B
(off) (on)
<span>
<img src="bold-off.png" alt="not bold" />
</span>
<span>
<img src="bold-on.png" alt="bold" />
</span>
- 143. 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">
<img src="bold-on.png" alt="bold" />
</span>
- 153. 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
- 156. Can you hear me now?
The audio element
<audio src="my.oga" controls="controls"></audio>
- 157. 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
- 158. Can you hear me now?
<audio controls="controls">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
- 159. 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.
- 160. Can you hear me now?
<audio controls="controls" autobuffer="autobuffer"
preload="auto">
<source src="my.mp3"/>
<source src="my.oga"/>
<!-- fallback -->
</audio>
- 161. Fallback options
<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>
- 163. 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
- 166. Elementary, my dear Watson
The video element
<video src="my.ogv" controls="controls"></video>
- 167. Not so elementary
Video file = container file (like ZIP)
๏ 1 video track
๏ 1 (or more) audio tracks
๏ metadata
๏ subtitle/caption tracks (optional)
- 168. 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.
- 169. 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.
- 170. 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.
- 171. 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
- 173. 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"/>
<!-- fallback -->
</video>
- 174. 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"'/>
<!-- fallback -->
</video>
Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
- 175. 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.
- 176. No MIME, no service
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
- 177. 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>
- 178. 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><!-- links --></ul>
</object>
</video>
- 179. 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
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