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

Aaron GustafsonEasy Designs, LLC@AaronGustafsonslideshare.net/AaronGustafson

Smart Markup for Smarter Websites

HTML5 gives you more controlover your documentsand apps

Paving our “cowpaths”

The process is ongoing…

…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

You can use it now

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

Now back to those cowpaths…

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

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

HTML5 re-imagined it.

<figure> <img src="photo.jpeg" alt=""/> <legend>Albert Einstein</legend></figure>

The original HTML5 figure.

Albert Einstein

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

Microformats adapted.

<figure> <img src="photo.jpeg" alt=""/> <figcaption>Albert Einstein</figcaption></figure>

The current (dare I say final?) HTML5 figure.

Albert Einstein

What’s the easiest way towrite HTML5?

<!DOCTYPE html>

Use the new doctype

The HTML4 Lexicon

address area

blockquote

button

caption

col colgroup

fieldsetform

h1 h2 h3 h4 h5 h6

iframe img

legend

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

textarea

hr menu

strongsup

The HTML5 Lexicon

address area

blockquote

button

caption

col colgroup

fieldsetform

h1 h2 h3 h4 h5 h6

iframe img

legend

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

textarea

hr menu

strong

article

audiocanvas

command

datalist

details

figcaptionfigure

footerheader

hgroup

keygen

mark meter

output progress

section

source

summary

Our focus today

address area

blockquote

button

caption

col colgroup

fieldsetform

h1 h2 h3 h4 h5 h6

iframe img

legend

noscript

object ol

optgroupoption

pparam

pre q samp

script

select

textarea

hr menu

strong

article

audiocanvas

command

datalist

details

figcaptionfigure

footerheader

hgroup

keygen

mark meter

output progress

section

source

summary

If only life were simpler…

Simplification

The html element

Simplification

Character encoding

Simplification

Styles and scripts

Metamorphosis

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.

Evil incarnateThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).

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>

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.

Deeper meaningThe hr elementRepresents a paragraph-level thematic break.

Raw materials

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.

Organization

section38

section > article39

article41

article > section42

The header elementRepresents the header of a section.

The footer elementRepresents the footer of a section.

Organization

header45

footer47

article48

article > header49

article50

article > footer51

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

The aside elementDemarcates content that is tangentially related to the primary content.

</article>

Organization

aside59

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

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>  </table></figure>

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

Organization

Refining the outline

<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

Explicit sections

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

Sectioning elements

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

<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

Heading groups FTW!

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

Sectioning roots

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

New elements to consider

The time elementRepresents a date and/or time.

time75

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

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

mark82

More usable forms

<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

Dates and times

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

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

Numbers

Numbers

<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

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

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

patternA regular expression pattern that the User Agent should validate the input against.

Value control

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>

Truth based on perspective

<button>Tweet</button>

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

<button>Search Mail</button>

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

ARIA maps the OS to the web

Semantics+

Landmarks help users navigate quickly

The role attributeDefines the part an element is playing (assuming it’s different than the semantics would otherwise imply).

All the site’s a play...

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

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.

Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparator

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.

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

What is this!?

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"> <p>Something went wrong.</p></div>

<div role="alertdialog"> <p>Something went wrong.</p> <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="tablist"

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"

What’s going on!?

B(off)

Widget states

B(off)

Widget states

B(off)

Widget states

aria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)

Widget states

Highlighting living content

Live regions

Live regions

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>

Live regions

Notification optionsoffchange not announced

politechange announced after user completes her current activity

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

Who is Supporting WAI-ARIA?

Music to our ears

The audio element

Can you hear me now?

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

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.

<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

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(', ') }); });

Fallback options

Using jQuery & jPlayer

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

Roll your own

Using jQuery

Opiate of the masses

The video element

Elementary, my dear Watson

Not so elementaryVideo file = container file (like ZIP)

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

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.

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.

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.

Not so elementaryBrowser .m4v

(AAC + H.264)

.ogv(Vorbis + Theora)

.webm(Vorbis + VP8)

Chrome 3+(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

A good first impression

Kindness to strangers

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

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.

AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

No MIME, no service

<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

Fallback options

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

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

Technology

HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5 ...vb-net.com/TrudoPoisk/HTML5-DOC-2.pdf · HTML5-CanIuse 1 HTML5-Tags Ordered Alphabetically 6 HTML5-Element Reference 12

Web Development & Design Foundations wtih HTML5, 8th Editioncs.franklin.edu/~crawforl/webd101/PPTS/WEEK1/week1-Ch1Ch2.pdf · Describe HTML, XHTML, and HTML5 Identify the markup language

HTML5 and CSS3 - Montana State University Libraryjason/talks/cil2011... · 2011-03-19 · HTML5 and CSS3: New Markup & Styles for the Emerging Web Computers in Libraries March 20,

APLIKACIJA ZA DELO Z GRAFI - University of Ljubljanapefprints.pef.uni-lj.si/1984/1/Jurkovic_Luka_HTML5_Canvas.pdf · standards, such as HyperText Markup Language 5 (HTML5). Consequently,

Fundamental HTML5 - saleroo.files.wordpress.com · HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.

Beyond Description - Montana State University Libraryjason/talks/ala2014-session... · 2014-06-29 · Introducing Semantic Markup HTML5 semantic tags and schema.org vocabularies that

UNIT - II HTML 5 & CSS3 HTML5 HTML5 Examplespc.edu.in/public/uploads/WP Unit 2.pdf · UNIT - II HTML 5 & CSS3 1. What is HTML 5? HTML5 is a markup language used for structuring and

SEMANTIC MARKUPspacepod.org/uprising/wp-content/uploads/sites/2/...SEMANTIC MARKUP RICH SEMANTICS AVAILABLE IN HTML5 figure An image, an illustration, a diagram, a code snippet, or

Mobile HTML5: Implementing a Responsive Cross-Platform ...kpuputti.github.io/thesis/files/thesis.pdf · In this work, I introduce the HTML5 (HyperText Markup Language version 5) speci

4. Web Development and Design · HyperText Markup Language (HTML) The code that is used to write most websites HTML5 HTML 5 is the latest evolution of Hyper Text Markup Language,

The Mysteries Behind Initial Markup: Pricing Strategies … · difference between markup & margin markup margin • initial markup and maintained markup • initial margin and gross

HTML - basic tags - How to learn more. What is HTML? HyperText Markup Language HTML5: – Recommended by the W3C

html5 & css3...HTML5, or Hyper Text Markup Language, is a code that’s used to write and structure every page on the Internet. CSS3, or Cascading Style Sheets, is an accompanying

HTML5 Programming Cookbook - kimbersoft.comkimbersoft.com/pdf/PRIVATE/HTML5-Programming-Cookbook.pdf · HTML5 Programming Cookbook vi Preface HTML5 is a core technology markup language

Introduction to Git - polito.it · HTML5 • “A vocabulary and associated APIs for HTML and XHTML” • HTML5 is the last major revision of the Hypertext Markup Language (HTML)

HTML5 and CSS3 The Future of the Web … › ... › bitstream › 10045 › 20201 › 14 › 02-HTML.pdf•A markup language is a set of markup tags •HTML uses markup tags to describe

ASP.NET and derivatives HTML5 = Markup + CSS + JavaScript ...index-of.co.uk › Lectures › IA_07_internet-apps-js-intro.pdf · naming conventions from Java - NOT to be confused

HTML Hyper Text Markup Languagegdinfotech.com/gd_tutorial/html5.pdfSimple Tutorial on HTML by G.D. Infotech Amloh, Ph 9501385190 Page: 1 HTML – Hyper Text Markup Language What is

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

HTML5 and Mobilejason/talks/alamw2012-mobile-html5.pdfTerms: HTML, CSS, API Does everybody know what these elements are? CSS - style rules for HTML documents HTML - markup tags that