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
1k
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
3
500
Building the GitHub workspace app
bkeepers
PRO
1
380
Contributing to Your Career
bkeepers
PRO
4
750
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
940
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
8
1.4k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
560
Tending Your Open Source Garden, v2
bkeepers
PRO
1
630
Tending Your Open Source Garden
bkeepers
PRO
2
990
The Loyal Renegade
bkeepers
PRO
3
920
Other Decks in Programming
See All in Programming
TanStack DB ~状態管理の新しい考え方~
bmthd
2
290
CSC305 Summer Lecture 05
javiergs
PRO
0
100
実践 Dev Containers × Claude Code
touyu
1
240
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
100
実践!App Intents対応
yuukiw00w
1
340
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
970
The State of Fluid (2025)
s2b
0
190
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
450
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.5k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
330
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Code Review Best Practice
trishagee
70
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing Experiences People Love
moore
142
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making Projects Easy
brettharned
117
6.3k
Navigating Team Friction
lara
189
15k
Statistics for Hackers
jakevdp
799
220k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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