forked from diveintomark/diveintohtml5
/
table-of-contents.html
197 lines (191 loc) · 12.7 KB
/
table-of-contents.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<meta charset="utf-8">
<title>Table of Contents - Dive Into HTML5</title>
<link rel="alternate" type="application/atom+xml" href="https://github.com/diveintomark/diveintohtml5/commits/master.atom">
<link rel="stylesheet" href="screen.css">
<style>
h1:before{content:''}
dl{clear:both;width:100%;overflow:hidden;background:#fff url(i/dot.png) repeat-x 0 0.8em}
dt,dd{background:#fff}
dt{float:left;padding-right:3px}
dd{margin:0;float:right;padding-left:3px}
ol{margin:0;padding:0;list-style:none}
li ol{width:95%;padding-left:5%}
</style>
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="prefetch" href="detect.html">
<p>You are here: <a href="index.html">Home</a> <span class="u triangularBullet"></span> Dive Into <abbr>HTML5</abbr> <span class="u triangularBullet"></span>
<h1>Table of Contents</h1>
<!-- toc -->
<ol>
<li id="introduction"><a href="introduction.html">Introduction: Five Things You Should Know About <abbr>HTML5</abbr></a>
<ol>
<li><dl><dt><a href="introduction.html#one">1. It’s not one big thing</a><dd>i</dl>
<li><dl><dt><a href="introduction.html#two">2. You don’t need to throw anything away</a><dd>ii</dl>
<li><dl><dt><a href="introduction.html#three">3. It’s easy to get started</a><dd>iii</dl>
<li><dl><dt><a href="introduction.html#four">4. It already works</a><dd>iv</dl>
<li><dl><dt><a href="introduction.html#five">5. It’s here to stay</a><dd>v</dl>
</ol>
<li id="past"><a href="past.html">A Quite Biased History of <abbr>HTML5</abbr></a>
<ol>
<li><dl><dt><a href="past.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="past.html#mime-types">MIME types</a><dd>ii</dl>
<li><dl><dt><a href="past.html#history-of-the-img-element">A long digression into how standards are made</a><dd>iii</dl>
<li><dl><dt><a href="past.html#an-unbroken-line">An unbroken line</a><dd>iv</dl>
<li><dl><dt><a href="past.html#timeline">A timeline of HTML development from 1997 to 2004</a><dd>v</dl>
<li><dl><dt><a href="past.html#xhtml">Everything you know about XHTML is wrong</a><dd>vi</dl>
<li><dl><dt><a href="past.html#webapps-cdf">A competing vision</a><dd>vii</dl>
<li><dl><dt><a href="past.html#whatwg">WHAT Working Group?</a><dd>viii</dl>
<li><dl><dt><a href="past.html#reinventing-html">Back to the W3C</a><dd>ix</dl>
<li><dl><dt><a href="past.html#postscript">Postscript</a><dd>x</dl>
<li><dl><dt><a href="past.html#further-reading">Further Reading</a><dd>xi</dl>
</ol>
<li id="detect"><a href="detect.html">Detecting <abbr>HTML5</abbr> Features: It’s Elementary, My Dear Watson</a>
<ol>
<li><dl><dt><a href="detect.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="detect.html#techniques">Detection Techniques</a><dd>ii</dl>
<li><dl><dt><a href="detect.html#modernizr">Modernizr, an HTML5 Detection Library</a><dd>iii</dl>
<li><dl><dt><a href="detect.html#canvas">Canvas</a><dd>iv</dl>
<li><dl><dt><a href="detect.html#canvas-text">Canvas Text</a><dd>v</dl>
<li><dl><dt><a href="detect.html#video">Video</a><dd>vi</dl>
<li><dl><dt><a href="detect.html#video-formats">Video Formats</a><dd>vii</dl>
<li><dl><dt><a href="detect.html#storage">Local Storage</a><dd>viii</dl>
<li><dl><dt><a href="detect.html#workers">Web Workers</a><dd>ix</dl>
<li><dl><dt><a href="detect.html#offline">Offline Web Applications</a><dd>x</dl>
<li><dl><dt><a href="detect.html#geolocation">Geolocation</a><dd>xi</dl>
<li><dl><dt><a href="detect.html#input-types">Input Types</a><dd>xii</dl>
<li><dl><dt><a href="detect.html#input-placeholder">Placeholder Text</a><dd>xiii</dl>
<li><dl><dt><a href="detect.html#input-autofocus">Form Autofocus</a><dd>xiv</dl>
<li><dl><dt><a href="detect.html#microdata">Microdata</a><dd>xv</dl>
<li><dl><dt><a href="detect.html#history">History <abbr>API</abbr></a><dd>xvi</dl>
<li><dl><dt><a href="detect.html#further-reading">Further Reading</a><dd>xvii</dl>
</ol>
<li id="semantics"><a href="semantics.html">What Does It All Mean?</a>
<ol>
<li><dl><dt><a href="semantics.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="semantics.html#the-doctype">The Doctype</a><dd>ii</dl>
<li><dl><dt><a href="semantics.html#html-element">The Root Element</a><dd>iii</dl>
<li><dl><dt><a href="semantics.html#head-element">The <head> Element</a><dd>iv</dl>
<li><dl><dt><a href="semantics.html#encoding">Character Encoding</a><dd>v</dl>
<li><dl><dt><a href="semantics.html#link">Friends & (Link) Relations</a><dd>vi</dl>
<li><dl><dt><a href="semantics.html#new-elements">New Semantic Elements in HTML5</a><dd>vii</dl>
<li><dl><dt><a href="semantics.html#unknown-elements">A long digression into how browsers handle unknown elements</a><dd>viii</dl>
<li><dl><dt><a href="semantics.html#header-element">Headers</a><dd>ix</dl>
<li><dl><dt><a href="semantics.html#article-element">Articles</a><dd>x</dl>
<li><dl><dt><a href="semantics.html#time-element">Dates and Times</a><dd>xi</dl>
<li><dl><dt><a href="semantics.html#nav-element">Navigation</a><dd>xii</dl>
<li><dl><dt><a href="semantics.html#footer-element">Footers</a><dd>xiii</dl>
<li><dl><dt><a href="semantics.html#further-reading">Further Reading</a><dd>xiv</dl>
</ol>
<li id="canvas"><a href="canvas.html">Let’s Call It a Draw(ing Surface)</a>
<ol>
<li><dl><dt><a href="canvas.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="canvas.html#shapes">Simple Shapes</a><dd>ii</dl>
<li><dl><dt><a href="canvas.html#coordinates">Canvas Coordinates</a><dd>iii</dl>
<li><dl><dt><a href="canvas.html#paths">Paths</a><dd>iv</dl>
<li><dl><dt><a href="canvas.html#text">Text</a><dd>v</dl>
<li><dl><dt><a href="canvas.html#gradients">Gradients</a><dd>vi</dl>
<li><dl><dt><a href="canvas.html#images">Images</a><dd>vii</dl>
<li><dl><dt><a href="canvas.html#ie">What About IE?</a><dd>viii</dl>
<li><dl><dt><a href="canvas.html#halma">A Complete, Live Example</a><dd>ix</dl>
<li><dl><dt><a href="canvas.html#further-reading">Further Reading</a><dd>x</dl>
</ol>
<li id="video"><a href="video.html">Video in a Flash (Without That Other Thing)</a>
<ol>
<li><dl><dt><a href="video.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="video.html#video-containers">Video Containers</a><dd>ii</dl>
<li><dl><dt><a href="video.html#video-codecs">Video Codecs</a><dd>iii</dl>
<li><dl><dt><a href="video.html#audio-codecs">Audio Codecs</a><dd>iv</dl>
<li><dl><dt><a href="video.html#what-works">What Works on the Web</a><dd>v</dl>
<li><dl><dt><a href="video.html#licensing">Licensing Issues with H.264 Video</a><dd>vi</dl>
<li><dl><dt><a href="video.html#miro">Encoding Video With<br>Miro Video Converter</a><dd>vii</dl>
<li><dl><dt><a href="video.html#firefogg">Encoding Ogg Video with Firefogg</a><dd>viii</dl>
<li><dl><dt><a href="video.html#ffmpeg2theora">Batch Encoding Ogg Video with ffmpeg2theora</a><dd>ix</dl>
<li><dl><dt><a href="video.html#handbrake-gui">Encoding H.264 Video with HandBrake</a><dd>x</dl>
<li><dl><dt><a href="video.html#handbrake-cli">Batch Encoding H.264 Video with HandBrake</a><dd>xi</dl>
<li><dl><dt><a href="video.html#webm-cli">Encoding WebM Video with ffmpeg</a><dd>xii</dl>
<li><dl><dt><a href="video.html#markup">At Last, The Markup</a><dd>xiii</dl>
<li><dl><dt><a href="video.html#ie">What About IE?</a><dd>xiv</dl>
<li><dl><dt><a href="video.html#ios">Issues on iPhones and iPads</a><dd>xv</dl>
<li><dl><dt><a href="video.html#android">Issues on Android devices</a><dd>xvi</dl>
<li><dl><dt><a href="video.html#example">A Complete, Live Example</a><dd>xvii</dl>
<li><dl><dt><a href="video.html#further-reading">Further Reading</a><dd>xviii</dl>
</ol>
<li id="geolocation"><a href="geolocation.html">You Are Here (And So Is Everybody Else)</a>
<ol>
<li><dl><dt><a href="geolocation.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="geolocation.html#w3c">The Geolocation API</a><dd>ii</dl>
<li><dl><dt><a href="geolocation.html#the-code">Show Me The Code</a><dd>iii</dl>
<li><dl><dt><a href="geolocation.html#errors">Handling Errors</a><dd>iv</dl>
<li><dl><dt><a href="geolocation.html#options">Choices! I Demand Choices!</a><dd>v</dl>
<li><dl><dt><a href="geolocation.html#ie">What About IE?</a><dd>vi</dl>
<li><dl><dt><a href="geolocation.html#geo-js">geo.js to the Rescue</a><dd>vii</dl>
<li><dl><dt><a href="geolocation.html#putting-it-all-together">A Complete, Live Example</a><dd>viii</dl>
<li><dl><dt><a href="geolocation.html#further-reading">Further Reading</a><dd>ix</dl>
</ol>
<li id="storage"><a href="storage.html">A Place To Put Your Stuff</a>
<ol>
<li><dl><dt><a href="storage.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="storage.html#history">A Brief History of Local Storage Hacks Before HTML5</a><dd>ii</dl>
<li><dl><dt><a href="storage.html#localstorage">Introducing HTML5 Storage</a><dd>iii</dl>
<li><dl><dt><a href="storage.html#methods">Using HTML5 Storage</a><dd>iv</dl>
<li><dl><dt><a href="storage.html#halma">HTML5 Storage in Action</a><dd>v</dl>
<li><dl><dt><a href="storage.html#future">Beyond Named Key-Value Pairs: Competing Visions</a><dd>vi</dl>
<li><dl><dt><a href="storage.html#further-reading">Further Reading</a><dd>vii</dl>
</ol>
<li id="offline"><a href="offline.html">Let’s Take This Offline</a>
<ol>
<li><dl><dt><a href="offline.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="offline.html#manifest">The Cache Manifest</a><dd>ii</dl>
<li><dl><dt><a href="offline.html#events">The Flow of Events</a><dd>iii</dl>
<li><dl><dt><a href="offline.html#debugging">The fine art of debugging, a.k.a. “Kill me! Kill me now!”</a><dd>iv</dl>
<li><dl><dt><a href="offline.html#halma">Let’s Build One!</a><dd>v</dl>
<li><dl><dt><a href="offline.html#further-reading">Further Reading</a><dd>vi</dl>
</ol>
<li id="forms"><a href="forms.html">A Form of Madness</a>
<ol>
<li><dl><dt><a href="forms.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="forms.html#placeholder">Placeholder Text</a><dd>ii</dl>
<li><dl><dt><a href="forms.html#autofocus">Autofocus Fields</a><dd>iii</dl>
<li><dl><dt><a href="forms.html#type-email">Email Addresses</a><dd>iv</dl>
<li><dl><dt><a href="forms.html#type-url">Web Addresses</a><dd>v</dl>
<li><dl><dt><a href="forms.html#type-number">Numbers as Spinboxes</a><dd>vi</dl>
<li><dl><dt><a href="forms.html#type-range">Numbers as Sliders</a><dd>vii</dl>
<li><dl><dt><a href="forms.html#type-date">Date Pickers</a><dd>viii</dl>
<li><dl><dt><a href="forms.html#type-search">Search Boxes</a><dd>ix</dl>
<li><dl><dt><a href="forms.html#type-color">Color Pickers</a><dd>x</dl>
<li><dl><dt><a href="forms.html#validation">Form Validation</a><dd>xi</dl>
<li><dl><dt><a href="forms.html#required">Required Fields</a><dd>xii</dl>
<li><dl><dt><a href="forms.html#further-reading">Further Reading</a><dd>xiii</dl>
</ol>
<li id="extensibility"><a href="extensibility.html">“Distributed,” “Extensibility,” And Other Fancy Words</a>
<ol>
<li><dl><dt><a href="extensibility.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="extensibility.html#what-is-microdata">What is Microdata?</a><dd>ii</dl>
<li><dl><dt><a href="extensibility.html#data-model">The Microdata Data Model</a><dd>iii</dl>
<li><dl><dt><a href="extensibility.html#person">Marking Up People</a><dd>iv</dl>
<li><dl><dt><a href="extensibility.html#organization">Marking Up Organizations</a><dd>v</dl>
<li><dl><dt><a href="extensibility.html#event">Marking Up Events</a><dd>vi</dl>
<li><dl><dt><a href="extensibility.html#review">Marking Up Reviews</a><dd>vii</dl>
<li><dl><dt><a href="extensibility.html#further-reading">Further Reading</a><dd>viii</dl>
</ol>
<li id="history"><a href="history.html">Manipulating History for Fun <i>&</i> Profit</a>
<ol>
<li><dl><dt><a href="history.html#divingin">Diving In</a><dd>i</dl>
<li><dl><dt><a href="history.html#why">The Why</a><dd>ii</dl>
<li><dl><dt><a href="history.html#how">The How</a><dd>iii</dl>
<li><dl><dt><a href="history.html#further-reading">Further Reading</a><dd>iv</dl>
</ol>
<li class="app"><a href="everything.html">The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything</a>
<ol>
<li><dl><dt><a href="everything.html#further-reading">Further Reading</a><dd>i</dl>
</ol>
<li class="app"><a href="peeks-pokes-and-pointers.html"><abbr>HTML5</abbr> Peeks, Pokes and Pointers</a>
<ol>
</ol>
</ol>
<!-- /toc -->
<p class="a rotatedFloralHeartBullet">
<p class="c">“If you’re good at something, never do it for free.” <span class="u">—</span><cite>The Joker</cite><br>(but that doesn’t mean you should keep it to yourself)
<p class="c">Copyright MMIX–MMXI <a href="about.html">Mark Pilgrim</a>
<form action="http://www.google.com/cse"><div><input type="hidden" name="cx" value="017884302975346027366:bgclqh8nvse"><input type="hidden" name="ie" value="UTF-8"><input type="search" name="q" size="25" placeholder="powered by Google™"> <input type="submit" name="sa" value="Search"></div></form>