A Chronicle of the Nebulous HTML5

HTML5 A CHRONICLE OF THE NEBULOUS extracted from the annals
of history by Brandon Keepers, a.k.a. @bkeepers.

bkeepers

1. OVERVIEW 2. HISTORY 3. CHANGES

why is EVERYTHING called HTML5?!? OVERVIEW

HTML5 Hyper Trendy Marketing Lingo v5 @kplawver |ˌeɪtʃ ˌti ˌɛm
ˈɛl fīv | noun Computing

What is HTML5, really? good question.

whatwg.org/html

w3.org/TR/html5

According to W3C: 1. Defines a single language called HTML5
2. Defines detailed processing models 3. Improves markup for documents 4. Introduces markup and APIs for emerging idioms

HTML5 is technically not… Web Workers Web Storage Web Messaging
Web SQL Database Web Audio API WebRTC WebSocket Geolocation Indexed Database File API [other web standard…]

Ian Hickson http://blog.whatwg.org/html-is-the-new-html5 "[HTML5] is now basically being used to
mean anything Web-standards-related..."

it’s complicated, let me explain…

how did we even get here? HISTORY

HTML 4.0 published December 1997

…working group shut downText HTML 4.0 published December 1997

XML 1.0 February 1998

<cough>lemmings</cough> XML 1.0 February 1998

XHTML draft December 1998

application/xhtml+xml with the “Appendix C” loophole XHTML draft December 1998

XHTML 1.1 May 2001

“Appendix C” loophole removed. XHTML 1.1 May 2001

“Appendix C” loophole removed. 99% estimated error rate on existing
pages. XHTML 1.1 May 2001

Workshop on Web Applications and Compound Documents June 2004

Competing vision to evolve HTML4 Workshop on Web Applications and
Compound Documents June 2004

Competing vision to evolve HTML4 voted 14:8 against Workshop on
Web Applications and Compound Documents June 2004

WHATWG June 2004

Web Hypertext Application Technology Working Group WHATWG June 2004

Web Hypertext Application Technology Working Group WHATWG June 2004 FAILED
OPPORTUNITY TASK FORCE!

WHATWG

Document how browsers parse HTML WHATWG

Document how browsers parse HTML Web Applications 1.0 WHATWG

W3C — WHATWG October 2006

“Some things are clearer with hindsight of several years. It
is necessary to evolve HTML incrementally.” W3C — WHATWG October 2006

HTML5 working draft January 2008

end of story? HTML5 working draft January 2008

end of story? Nope. HTML5 working draft January 2008

WHATWG drops "5" January 2012

HTML is a living standard WHATWG drops "5" January 2012

W3C February 2012

advances to "Last call" status W3C February 2012

WHATWG <> W3C July 2012

decided on a “degree of separation” WHATWG <> W3C July
2012

W3C Current Status

hopes to release stable HTML5 standard by end of 2014
W3C Current Status

WHATWG Current Status

living standard is never complete and is always being updated
and improved. WHATWG Current Status

what does it really offer me? CHANGES

Syntax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype

<!DOCTYPE html> doctype

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

<html lang="en"> The Root Element

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

Content-Type: text/html; charset="utf-8" <meta charset="utf-8"> Character Encoding

Implicit Type <script type="text/javascript" src="/js/site.js"></script> <link type="text/css" href="/css/site.css">

Implicit Type <script src="/js/site.js"></script> <link href="/css/site.css">

XML Compatible <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title>
</head> <body> <p>Example paragraph</p> </body> </html>

New Attributes

Semantic Input Types <input type="tel"> <input type="search"> <input type="url"> <input
type="email"> <input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="number"> <input type="range"> <input type="color">

Form Element Attributes <input placeholder="Search…"> <input required> <input autofocus> <ﬁeldset
disabled>

Data Attributes <input data-href="/api/users" class="users" type="search"> // JS API var
input = document.querySelector('.users'); var url = input.dataset['href'];

Deprecated <basefont> <big> <center> <font> <strike> <tt> <u> <frame> <frameset>
<noframes>

New Elements

Structural Elements <section> <nav> <article> <aside> <hgroup> <header> <footer> <ﬁgure>
<ﬁgcaption>

Ineractive Elements <details> <summary> <command> <menu> <dialog>

Inline Elements <time> <mark> <meter> <progress> <ruby> <rt> <rp> <bdi>
<wbr>

Multimedia Elements <video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> <audio src="/audio.ogg">

Canvas <canvas id="a"></canvas> canvas#a { height: 200px; width: 200px; }

New APIs

Canvas var a = document.getElementById("a"); var context = a.getContext("2d"); context.ﬁllRect(0,
0, 150, 150);

2D Context Rectangles c.fillRect(x, y, w, h); c.strokeRect(x, y, w,
h); Transformations c.scale(x, y); c.rotate(angle); c.translate(x, y); c.transform(a, b, c, d, e, f); c.setTransform(a, b, c, d, e, f); Colors and Styles c.strokeStyle = color; c.fillStyle = color; Text c.fillText(text, x, y, maxWidth); Paths c.moveTo(x, y); c.lineTo(x, y); c.arcTo(x1, y1, x2, y2, radius); c.rect(x, y, w, h); c.fill(); c.stroke(); State c.save(); c.restore();

Drag & Drop http://www.w3.org/TR/html5/editing.html#dnd

Offline

History API

…and so much more!

Let’s review, HTML[5] is important because: 1. Defines a single
language called HTML5 2. Defines detailed processing models 3. Improves markup for documents 4. Introduces markup and APIs for emerging idioms

References Dive Into HTML5 http://diveintohtml5.info/past.html HTML5 differences from HTML4 http://www.w3.org/TR/2011/WD-html5-diff-20110405/
HTML5 gets the splits http://www.netmagazine.com/news/html5-gets-splits-122102 Wikipedia http://en.wikipedia.org/wiki/HTML5

Questions? @bkeepers bit.ly/nebulous-html5

A Chronicle of the Nebulous HTML5

A Chronicle of the Nebulous HTML5

More Decks by Brandon Keepers

Other Decks in Programming

Featured

Transcript