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
1k
The Loyal Renegade
bkeepers
PRO
3
920
Other Decks in Programming
See All in Programming
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
旅行プランAIエージェント開発の裏側
ippo012
2
890
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Laravel Boost 超入門
fire_arlo
3
210
🔨 小さなビルドシステムを作る
momeemt
4
670
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
個人軟體時代
ethanhuang13
0
320
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
testingを眺める
matumoto
1
140
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
How STYLIGHT went responsive
nonsquared
100
5.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
70
19k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
RailsConf 2023
tenderlove
30
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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