-
Notifications
You must be signed in to change notification settings - Fork 186
/
introduction.html
85 lines (57 loc) · 8.84 KB
/
introduction.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
<!DOCTYPE html>
<meta charset="utf-8">
<title>Five Things You Should Know About HTML5 - Dive Into HTML5</title>
<!--[if lt IE 9]><script src="j/html5.js"></script><![endif]-->
<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:"Introduction:"}
h2{text-align:left;text-transform:inherit}
</style>
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
<link rel="prefetch" href="past.html">
<p>You are here: <a href="index.html">Home</a> <span class="u triangularBullet"></span> <a href="table-of-contents.html#introduction">Dive Into <abbr>HTML5</abbr></a> <span class="u triangularBullet"></span>
<h1><br>Five Things You Should Know About HTML5</h1>
<p id="toc">
<p class="a rotatedFloralHeartBullet">
<h2 id="one">1. It’s not one big thing</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="i/video.png" alt="[mock video player]" width="226" height="166">
<p>You may well ask: “How can I start using <abbr>HTML5</abbr> if older browsers don’t support it?” But the question itself is misleading. <abbr>HTML5</abbr> is not one big thing; it is a collection of individual features. So you can’t detect “<abbr>HTML5</abbr> support,” because that doesn’t make any sense. But you <em>can</em> detect support for individual features, like canvas, video, or geolocation.
<p>You may think of <abbr>HTML</abbr> as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The <abbr>HTML5</abbr> specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (<abbr>DOM</abbr>). <abbr>HTML5</abbr> doesn’t just define a <code><video></code> tag; there is also a corresponding <abbr>DOM</abbr> <abbr>API</abbr> for video objects in the <abbr>DOM</abbr>. You can use this <abbr>API</abbr> to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <code><video></code> tag itself.
<p><a href="detect.html">Chapter 2</a> and <a href="everything.html">Appendix A</a> will teach you how to properly detect support for each new <abbr>HTML5</abbr> feature.
<h2 id="two">2. You don’t need to throw anything away</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src="i/forms.png" alt="[sample form controls]" width="134" height="196">
<p>Love it or hate it, you can’t deny that <abbr>HTML</abbr> 4 is the most successful markup format ever. <abbr>HTML5</abbr> builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in <abbr>HTML</abbr> 4, it will still work today in <abbr>HTML5</abbr>. Period.
<p>Now, if you want to <em>improve</em> your web applications, you’ve come to the right place. Here’s a concrete example: <abbr>HTML5</abbr> supports all the form controls from <abbr>HTML</abbr> 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the <code>email</code> input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the <code>email</code> input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms <em>today</em>, even if some of your visitors are stuck on IE 6.
<p>Read all the gory details about <abbr>HTML5</abbr> forms in <a href="forms.html">Chapter 9</a>.
<h2 id="three">3. It’s easy to get started</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="i/markup-with-arrow.png" alt="[sample HTML markup]" width="234" height="202">
<p>“Upgrading” to <abbr>HTML5</abbr> can be as simple as changing your <i>doctype</i>. The doctype should already be on the first line of every <abbr>HTML</abbr> page. Previous versions of <abbr>HTML</abbr> defined a lot of doctypes, and choosing the right one could be tricky. In <abbr>HTML5</abbr>, there is only one doctype:
<blockquote>
<p><code><!DOCTYPE html></code>
</blockquote>
<p>Upgrading to the <abbr>HTML5</abbr> doctype won’t break your existing markup, because <a rel="external" href="http://www.w3.org/TR/html5-diff/#absent-elements" target="_blank">obsolete elements</a> previously defined in HTML 4 will still render in <abbr>HTML5</abbr>. But it will allow you to use — and validate — new semantic elements like <code><article></code>, <code><section></code>, <code><header></code>, and <code><footer></code>. You’ll learn all about these new elements in <a href="semantics.html">Chapter 3</a>.
<h2 id="four">4. It already works</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src="i/rel-email.png" alt="[form field with onscreen keyboard]" width="227" height="192">
<p>Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that <abbr>HTML5</abbr> is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas (<a href="canvas.html">Chapter 4</a>), video (<a href="video.html">Chapter 5</a>), geolocation (<a href="geolocation.html">Chapter 6</a>), local storage (<a href="storage.html">Chapter 7</a>), and more. Google already supports microdata annotations (<a href="extensibility.html">Chapter 10</a>). Even Microsoft — rarely known for blazing the trail of standards support — supports most <abbr>HTML5</abbr> features in Internet Explorer 9.
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="i/gears.png" alt="[Gears saying "I can help"]" width="125" height="75">
<p>Each chapter of this book includes the all-too-familiar browser compatibility charts. But more importantly, each chapter includes a frank discussion of your options if you need to support older browsers. <abbr>HTML5</abbr> features like geolocation (<a href="geolocation.html">Chapter 6</a>) and video (<a href="video.html">Chapter 5</a>) were first provided by browser plugins like Gears or Flash. Other features, like canvas (<a href="canvas.html">Chapter 4</a>), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind.
<h2 id="five">5. It’s here to stay</h2>
<p>Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the <abbr>W3C</abbr> to act as a steward of web standards, which the organization has done for more than 15 years. Here is what the <abbr>W3C</abbr> had to say about the future of web standards, in July 2009:
<blockquote cite="http://www.w3.org/News/2009#item119">
<p>Today the Director announces that when the <abbr>XHTML</abbr> 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the <abbr>HTML</abbr> Working Group, <abbr>W3C</abbr> hopes to accelerate the progress of <abbr>HTML5</abbr> and clarify <abbr>W3C</abbr>’s position regarding the future of <abbr>HTML</abbr>.
</blockquote>
<p><abbr>HTML5</abbr> is here to stay. <a href="past.html">Let’s dive in</a>.
<p class="a rotatedFloralHeartBullet">
<div class="pf">
<h4>Did You Know?</h4>
<div class="moneybags">
<blockquote><p>In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The paid edition is called “HTML5: Up & Running,” and it is available now.
<p>If you liked this introduction and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">buy “HTML5: Up & Running” with this affiliate link</a> or <a href="http://oreilly.com/catalog/9780596806033">buy an electronic edition directly from O’Reilly</a>. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.
</blockquote>
</div>
</div>
<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>
<script src="j/jquery.js"></script>
<script src="j/dih5.js"></script>