Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Chronicle of the Nebulous HTML5
Search
Brandon Keepers
PRO
May 23, 2013
Programming
11
810
A Chronicle of the Nebulous HTML5
Why is EVERYTHING called HTML5, how did we get here, and what's in it for me?
Brandon Keepers
PRO
May 23, 2013
Tweet
Share
More Decks by Brandon Keepers
See All by Brandon Keepers
Automating Software Development
bkeepers
PRO
2
320
Building the GitHub workspace app
bkeepers
PRO
1
240
Contributing to Your Career
bkeepers
PRO
2
590
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
780
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.2k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
350
Tending Your Open Source Garden, v2
bkeepers
PRO
1
420
Tending Your Open Source Garden
bkeepers
PRO
2
810
The Loyal Renegade
bkeepers
PRO
3
660
Other Decks in Programming
See All in Programming
業務ツールとして使うPostman
msys75
0
120
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
560
Deep Dive into React Stream/Serialize
mugi_uno
3
760
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
290
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
Exploring Type-Informed Lint Rules in Rust based Linters
unvalley
2
220
AmperとFleetを使ったAndroidアプリ
yoppie
0
290
Fragment Composition of GraphQL
quramy
13
1.6k
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
4
460
Apache Hive 4 on Treasure Data
ryukobayashi
1
460
酒飲んでたらテックリードになった話
spbaya0141
0
140
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
In The Pink: A Labor of Love
frogandcode
138
21k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
YesSQL, Process and Tooling at Scale
rocio
165
13k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Practical Orchestrator
shlominoach
183
9.7k
Fireside Chat
paigeccino
22
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Building Your Own Lightsaber
phodgson
100
5.7k
Web Components: a chance to create the future
zenorocha
306
41k
GitHub's CSS Performance
jonrohan
1025
450k
Transcript
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 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 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 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 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> <fieldset
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> <figure>
<figcaption>
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.fillRect(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();
None
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