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
740
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
930
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
8
1.4k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
550
Tending Your Open Source Garden, v2
bkeepers
PRO
1
620
Tending Your Open Source Garden
bkeepers
PRO
2
990
The Loyal Renegade
bkeepers
PRO
3
910
Other Decks in Programming
See All in Programming
Go製CLIツールをnpmで配布するには
syumai
2
1k
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
900
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
120
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
decksh - a little language for decks
ajstarks
4
21k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
リッチエディターを安全に開発・運用するために
unachang113
1
330
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
220
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Producing Creativity
orderedlist
PRO
346
40k
The Invisible Side of Design
smashingmag
301
51k
Rails Girls Zürich Keynote
gr2m
95
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Thoughts on Productivity
jonyablonski
69
4.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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