Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 199 lines (192 sloc) 12.6 kb
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 198
<!DOCTYPE html>
<meta charset=utf-8>
<title>Table of Contents - Dive Into HTML5</title>
<link rel=icon href=favicon.ico>
<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>&#8227;</span> Dive Into <abbr>HTML5</abbr> <span class=u>&#8227;</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&#8217;s not one big thing</a><dd>i</dl>
<li><dl><dt><a href=introduction.html#two>2. You don&#8217;t need to throw anything away</a><dd>ii</dl>
<li><dl><dt><a href=introduction.html#three>3. It&#8217;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&#8217;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&#8217;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 &lt;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 &amp; (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&#8217;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&#8217;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. &#8220;Kill me! Kill me now!&#8221;</a><dd>iv</dl>
<li><dl><dt><a href=offline.html#halma>Let&#8217;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>&#8220;Distributed,&#8221; &#8220;Extensibility,&#8221; 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>&amp;</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>&#x2767;

<p class=c>&#8220;If you&#8217;re good at something, never do it for free.&#8221; <span class=u>&mdash;</span><cite>The Joker</cite><br>(but that doesn&#8217;t mean you should keep it to yourself)

<p class=c>Copyright MMIX&ndash;MMXI <a href=about.html>Mark Pilgrim</a>

<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:6jgee_nxreo><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
Something went wrong with that request. Please try again.