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
880
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
400
Building the GitHub workspace app
bkeepers
PRO
1
300
Contributing to Your Career
bkeepers
PRO
3
650
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
850
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.3k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
430
Tending Your Open Source Garden, v2
bkeepers
PRO
1
490
Tending Your Open Source Garden
bkeepers
PRO
2
880
The Loyal Renegade
bkeepers
PRO
3
760
Other Decks in Programming
See All in Programming
テスト駆動開発✅️
akitoshiga
1
170
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
250
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.2k
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
430
App Store Connect APIで 作業時間を増やそう
mot_techtalk
3
140
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
740
(Deep|Web) Link support with expo-router
mrtry
0
190
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
410
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
perl for shell, awk and sed programmers
mackee
2
1k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
18
1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GraphQLとの向き合い方2022年版
quramy
43
13k
Side Projects
sachag
452
42k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
What's new in Ruby 2.0
geeforr
342
31k
Done Done
chrislema
181
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Embracing the Ebb and Flow
colly
84
4.4k
Typedesign – Prime Four
hannesfritz
39
2.4k
The Cult of Friendly URLs
andyhume
77
6k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
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