Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 877 lines (636 sloc) 73.597 kb
ce99b34 line endings fiddling
Mark Pilgrim authored
1 <!DOCTYPE html>
2 <meta charset=utf-8>
29e9fdc updated copyright info and unified title strategy
Mark Pilgrim authored
3 <title>Semantics - Dive Into HTML5</title>
3473158 lte --> lt [thanks S/N]
Mark Pilgrim authored
4 <!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
6f9d06b switch to Git, update feed links and build scripts
Mark Pilgrim authored
5 <link rel=alternate type=application/atom+xml href=https://github.com/diveintomark/diveintohtml5/commits/master.atom>
ce99b34 line endings fiddling
Mark Pilgrim authored
6 <link rel=stylesheet href=screen.css>
7 <style>
8 body{counter-reset:h1 3}
9 dl.col dt{float:left;clear:left}
10 dl.col dd{margin-left:7em}
11 dl.col dt,dl.col dd{padding-bottom:1.75em}
12 </style>
13 <link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
e9302c2 added prefetch links
Mark Pilgrim authored
14 <link rel=prefetch href=index.html>
ca25a05 reverted stupid idea
Mark Pilgrim authored
15 <p>You are here: <a href=index.html>Home</a> <span class=u>&#8227;</span> <a href=table-of-contents.html#semantics>Dive Into <abbr>HTML5</abbr></a> <span class=u>&#8227;</span>
ce99b34 line endings fiddling
Mark Pilgrim authored
16 <h1><br>What Does It All Mean?</h1>
17 <p id=toc>&nbsp;
18 <p class=a>&#x2767;
19 <h2 id=divingin>Diving In</h2>
20
21 <p class=f><img src=i/aoc-t.png alt=T width=107 height=105>his chapter will take an <abbr>HTML</abbr> page that has absolutely nothing wrong with it, and improve it. Parts of it will become shorter. Parts will become longer. All of it will become more semantic. It&#8217;ll be awesome.
22
23 <p style="clear:both"><a href=examples/blog-original.html>Here is the page in question</a>. Learn it. Live it. Love it. Open it in a new tab and don&#8217;t come back until you&#8217;ve hit &#8220;View Source&#8221; at least once.
24
25 <p class=a>&#x2767;
26
27 <h2 id=the-doctype>The Doctype</h2>
28
29 <p>From the top:
30
31 <pre><code>&lt;!DOCTYPE html
32 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
33 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></pre>
34
04fe83f copyedits
Mark Pilgrim authored
35 <p>This is called the &#8220;doctype.&#8221; There&#8217;s a long history &mdash; and a black art &mdash; behind the doctype. While working on Internet Explorer 5 for Mac, the developers at Microsoft found themselves with a surprising problem. The upcoming version of their browser had improved its standards support so much, older pages no longer rendered properly. Or rather, they rendered properly (according to specifications), but people expected them to render <em>improperly</em>. The pages themselves had been authored based on the quirks of the dominant browsers of the day, primarily Netscape 4 and Internet Explorer 4. IE5/Mac was so advanced, it actually broke the web.
ce99b34 line endings fiddling
Mark Pilgrim authored
36
04fe83f copyedits
Mark Pilgrim authored
37 <p>Microsoft came up with a novel solution. Before rendering a page, IE5/Mac looked at the &#8220;doctype,&#8221; which is typically the first line of the <abbr>HTML</abbr> source (even before the <code>&lt;html></code> element). Older pages (that relied on the rendering quirks of older browsers) generally didn&#8217;t have a doctype at all. IE5/Mac rendered these pages like older browsers did. In order to &#8220;activate&#8221; the new standards support, web page authors had to opt in, by supplying the right doctype before the <code>&lt;html></code> element.
ce99b34 line endings fiddling
Mark Pilgrim authored
38
04fe83f copyedits
Mark Pilgrim authored
39 <p>This idea spread like wildfire, and soon all major browsers had two modes: &#8220;quirks mode&#8221; and &#8220;standards mode.&#8221; Of course, this being the web, things quickly got out of hand. When Mozilla tried to ship version 1.1 of their browser, they discovered that there were pages being rendered in &#8220;standards mode&#8221; that were actually relying on one specific quirk. Mozilla had just fixed its rendering engine to eliminate this quirk, and thousands of pages broke all at once. Thus was created &mdash; and I am not making this up &mdash; &#8220;<a href="https://developer.mozilla.org/en/Gecko's_%22Almost_Standards%22_Mode">almost standards mode</a>.&#8221;
ce99b34 line endings fiddling
Mark Pilgrim authored
40
41 <p>In his seminal work, <a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a>, Henri Sivonen summarizes the different modes:
42
43 <blockquote>
44 <dl>
45 <dt>Quirks Mode
46 <dd>In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid &#8220;breaking&#8221; pages authored according to practices that were prevalent in the late 1990s.
47 <dt>Standards Mode
48 <dd>In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. <abbr>HTML5</abbr> calls this mode the &#8220;no quirks mode.&#8221;
49 <dt>Almost Standards Mode
04fe83f copyedits
Mark Pilgrim authored
50 <dd>Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as &#8220;Almost Standards mode,&#8221; that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. <abbr>HTML5</abbr> calls this mode the &#8220;limited quirks mode.&#8221;
ce99b34 line endings fiddling
Mark Pilgrim authored
51 </dl>
52 </blockquote>
53
19a1dde @kennethreitz Revert "Revert "Revert "https://github.com/diveintomark/diveintohtml5…
kennethreitz authored
54 <p>(You should read the rest of Henri&#8217;s article, because I&#8217;m simplifying immensely here. Even in IE5/Mac, there were a few older doctypes that didn&#8217;t count as far as opting into standards support. Over time, the list of quirks grew, and so did the list of doctypes that triggered &#8220;quirks mode.&#8221; The last time I tried to count, there were 5 doctypes that triggered &#8220;almost standards mode,&#8221; and 73 that triggered &#8220;quirks mode.&#8221; But I probably missed some, and I&#8217;m not even going to talk about the crazy shit that Internet Explorer 8 does to switch between its four &mdash; four! &mdash; different rendering modes. <a href=http://hsivonen.iki.fi/doctype/ie8-mode.png>Here&#8217;s a flowchart</a>. Kill it. Kill it with fire.)
ce99b34 line endings fiddling
Mark Pilgrim authored
55
56 <p>Now then. Where were we? Ah yes, the doctype:
57
58 <pre><code>&lt;!DOCTYPE html
59 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
60 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></pre>
61
62 <p>That happens to be one of the 15 doctypes that trigger &#8220;standards mode&#8221; in all modern browsers. There is nothing wrong with it. If you like it, you can keep it. Or you can change it to the <abbr>HTML5</abbr> doctype, which is shorter and sweeter and also triggers &#8220;standards mode&#8221; in all modern browsers.
63
64 <p>This is the <abbr>HTML5</abbr> doctype:
65
66 <pre><code>&lt;!DOCTYPE html></code></pre>
67
04fe83f copyedits
Mark Pilgrim authored
68 <p>That&#8217;s it. Just 15 characters. It&#8217;s so easy, you can type it by hand and not screw it up.
ce99b34 line endings fiddling
Mark Pilgrim authored
69
70 <p class=a>&#x2767;
71
72 <h2 id=html-element>The Root Element</h2>
73
74 <p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:280px"><img src=i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png alt="tree on top of hill" width=280 height=394>
75
76 <p>An <abbr>HTML</abbr> page is a series of nested elements. The entire structure of the page is like a tree. Some elements are &#8220;siblings,&#8221; like two branches that extend from the same tree trunk. Some elements can be &#8220;children&#8221; of other elements, like a smaller branch that extends from a larger branch. (It works the other way too; an element that contains other elements is called the &#8220;parent&#8221; node of its immediate child elements, and the &#8220;ancestor&#8221; of its grandchildren.) Elements that have no children are called &#8220;leaf&#8221; nodes. The outer-most element, which is the ancestor of all other elements on the page, is called the &#8220;root element.&#8221; The root element of an <abbr>HTML</abbr> page is always <code>&lt;html></code>.
77
78 <p>In <a href=examples/blog-original.html>this example page</a>, the root element looks like this:
79
80 <table role=presentation><tr><td><pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
81 lang="en"
82 xml:lang="en"></code></pre></td></table>
83
04fe83f copyedits
Mark Pilgrim authored
84 <p>There is nothing wrong with this markup. Again, if you like it, you can keep it. It is valid <abbr>HTML5</abbr>. But parts of it are no longer necessary in <abbr>HTML5</abbr>, so you can save a few bytes by removing them.
ce99b34 line endings fiddling
Mark Pilgrim authored
85
86 <p>The first thing to discuss is the <code>xmlns</code> attribute. This is a vestige of <a href=http://www.w3.org/TR/xhtml1/><abbr>XHTML</abbr> 1.0</a>. It says that elements in this page are in the <abbr>XHTML</abbr> namespace, <code>http://www.w3.org/1999/xhtml</code>. But elements in <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#xml>are always in this namespace</a>, so you no longer need to declare it explicitly. Your <abbr>HTML5</abbr> page will work exactly the same in all browsers, whether this attribute is present or not.
87
88 <p>Dropping the <code>xmlns</code> attribute leaves us with this root element:
89
90 <pre><code>&lt;html lang="en" xml:lang="en"></code></pre>
91
04fe83f copyedits
Mark Pilgrim authored
92 <p>The two attributes here, <code>lang</code> and <code>xml:lang</code>, both define the language of this <abbr>HTML</abbr> page. (<code>en</code> stands for &#8220;English.&#8221; Not writing in English? <a href=http://www.w3.org/International/questions/qa-choosing-language-tags>Find your language code</a>.) Why two attributes for the same thing? Again, this is a vestige of <abbr>XHTML</abbr>. Only the <code>lang</code> attribute has any effect in <abbr>HTML5</abbr>. You can keep the <code>xml:lang</code> attribute if you like, but if you do, you need to ensure that it <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">contains the same value as the <code>lang</code> attribute</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
93
94 <blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">
04fe83f copyedits
Mark Pilgrim authored
95 <p>To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on <abbr>HTML</abbr> elements in <abbr>HTML</abbr> documents, but such attributes must only be specified if a <code>lang</code> attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner. The attribute in no namespace with no prefix and with the literal localname "xml:lang" has no effect on language processing.
ce99b34 line endings fiddling
Mark Pilgrim authored
96 </blockquote>
97
98 <p>Are you ready to drop it? It&#8217;s OK, just let it go. Going, going&hellip; gone! That leaves us with this root element:
99
100 <pre><code>&lt;html lang="en"></code></pre>
101
102 <p>And that&#8217;s all I have to say about that.
103
104 <p class=a>&#x2767;
105
106 <h2 id=head-element>The &lt;head> Element</h2>
107
108 <p class=c><img src=i/openclipart.org_johnny_automatic_8_from_behind.png alt="8 men from behind" width=554 height=164>
109
110 <p>The first child of the root element is usually the <code>&lt;head></code> element. The <code>&lt;head></code> element contains metadata&nbsp;&mdash; information <em>about</em> the page, rather than the body of the page itself. (The body of the page is, unsurprisingly, contained in the <code>&lt;body></code> element.) The <code>&lt;head></code> element itself is rather boring, and it hasn&#8217;t changed in any interesting way in <abbr>HTML5</abbr>. The good stuff is what&#8217;s <em>inside</em> the <code>&lt;head></code> element. And for that, we turn once again to <a href=examples/blog-original.html>our example page</a>:
111
112 <pre><code>&lt;head>
113 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
114 &lt;title>My Weblog&lt;/title>
115 &lt;link rel="stylesheet" type="text/css" href="style-original.css" />
116 &lt;link rel="alternate" type="application/atom+xml"
117 title="My Weblog feed"
118 href="/feed/" />
119 &lt;link rel="search" type="application/opensearchdescription+xml"
120 title="My Weblog search"
121 href="opensearch.xml" />
122 &lt;link rel="shortcut icon" href="/favicon.ico" />
123 &lt;/head></code></pre>
124
125 <p>First up: the <code>&lt;meta></code> element.
126
127 <p class=a>&#x2767;
128
129 <h2 id=encoding>Character Encoding</h2>
130
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
131 <p>When you think of &#8220;text,&#8221; you probably think of &#8220;characters and symbols I see on my computer screen.&#8221; But computers don&#8217;t deal in characters and symbols; they deal in bits and bytes. Every piece of text you&#8217;ve ever seen on a computer screen is actually stored in a particular <em>character encoding</em>. There are <a href=http://www.iana.org/assignments/character-sets>hundreds of different character encodings</a>, some optimized for particular languages like Russian or Chinese or English, and others that can be used for multiple languages. Roughly speaking, the character encoding provides a mapping between the stuff you see on your screen and the stuff your computer actually stores in memory and on disk.
ce99b34 line endings fiddling
Mark Pilgrim authored
132
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
133 <p>In reality, it&#8217;s more complicated than that. The same character might appear in more than one encoding, but each encoding might use a different sequence of bytes to actually store the character in memory or on disk. So, you can think of the character encoding as a kind of decryption key for the text. Whenever someone gives you a sequence of bytes and claims it&#8217;s &#8220;text,&#8221; you need to know what character encoding they used so you can decode the bytes into characters and display them (or process them, or whatever).
ce99b34 line endings fiddling
Mark Pilgrim authored
134
04fe83f copyedits
Mark Pilgrim authored
135 <p>So, how does your browser actually determine the character encoding of the stream of bytes that a web server sends? I&#8217;m glad you asked. If you&#8217;re familiar with <abbr>HTTP</abbr> headers, you may have seen a header like this:
ce99b34 line endings fiddling
Mark Pilgrim authored
136
04fe83f copyedits
Mark Pilgrim authored
137 <blockquote><p><code>Content-Type: text/html; charset="utf-8"</code></blockquote>
ce99b34 line endings fiddling
Mark Pilgrim authored
138
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
139 <p>Briefly, this says that the web server thinks it&#8217;s sending you an <abbr>HTML</abbr> document, and that it thinks the document uses the <code>UTF-8</code> character encoding. Unfortunately, in the whole magnificent soup of the World Wide Web, few authors actually have control over their HTTP server. Think <a href="http://www.blogger.com/">Blogger</a>: the content is provided by individuals, but the servers are run by Google. So <abbr>HTML</abbr> 4 provided a way to specify the character encoding in the <abbr>HTML</abbr> document itself. You&#8217;ve probably seen this too:
ce99b34 line endings fiddling
Mark Pilgrim authored
140
04fe83f copyedits
Mark Pilgrim authored
141 <blockquote><p><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code></blockquote>
ce99b34 line endings fiddling
Mark Pilgrim authored
142
143 <p>Briefly, this says that the web author thinks they have authored an <abbr>HTML</abbr> document using the <code>UTF-8</code> character encoding.
144
04fe83f copyedits
Mark Pilgrim authored
145 <p>Both of these techniques still work in <abbr>HTML5</abbr>. The <abbr>HTTP</abbr> header is the preferred method, and it overrides the <code>&lt;meta></code> tag if present. But not everyone can set <abbr>HTTP</abbr> headers, so the <code>&lt;meta></code> tag is still around. In fact, it got a little easier in <abbr>HTML5</abbr>. Now it looks like this:
ce99b34 line endings fiddling
Mark Pilgrim authored
146
04fe83f copyedits
Mark Pilgrim authored
147 <blockquote><p><code>&lt;meta charset="utf-8" /></code></blockquote>
ce99b34 line endings fiddling
Mark Pilgrim authored
148
04fe83f copyedits
Mark Pilgrim authored
149 <p>This works in all browsers. How did this shortened syntax come about? Here is <a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">the best explanation I could find</a>:
ce99b34 line endings fiddling
Mark Pilgrim authored
150
151 <blockquote cite="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">
04fe83f copyedits
Mark Pilgrim authored
152 <p>The rationale for the <code>&lt;meta charset=""></code> attribute combination is that UAs already implement it, because people tend to leave things unquoted, like:
153 <p><code>&lt;META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1></code>
ce99b34 line endings fiddling
Mark Pilgrim authored
154 </blockquote>
155
04fe83f copyedits
Mark Pilgrim authored
156 <p>There are even a few <a href="http://simon.html5.org/test/html/parsing/encoding/"><code>&lt;meta charset></code> test cases</a> if you don&#8217;t believe that browsers already do this.
ce99b34 line endings fiddling
Mark Pilgrim authored
157
158 <div class=pf>
159 <h4>Ask Professor Markup</h4>
160 <div class=inner>
161 <blockquote class=note>
162 <p><span>&#x261E;</span>Q: I never use funny characters. Do I still need to declare my character encoding?<br>
ec7c280 better links for content sniffing and UTF-7 attacks
Mark Pilgrim authored
163 <p>A: Yes! You should <em>always</em> specify a character encoding on every <abbr>HTML</abbr> page you serve. Not specifying an encoding <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>can lead to security vulnerabilities</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
164 </blockquote>
165 </div>
166 </div>
167
ec7c280 better links for content sniffing and UTF-7 attacks
Mark Pilgrim authored
168 <p>To sum up: character encoding is complicated, and it has not been made any easier by decades of poorly written software used by copy-and-paste&ndash;educated authors. You should <strong>always</strong> specify a character encoding on <strong>every</strong> <abbr>HTML</abbr> document, or <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>bad things will happen</a>. You can do it with the HTTP <code>Content-Type</code> header, the <code>&lt;meta http-equiv></code> declaration, or the shorter <code>&lt;meta charset></code> declaration, but please do it. The web thanks you.
ce99b34 line endings fiddling
Mark Pilgrim authored
169
170 <p class=a>&#x2767;
171
172 <h2 id=link>Friends &amp; (Link) Relations</h2>
173
174 <p>Regular links (<code>&lt;a href></code>) simply point to another page. Link relations are a way to explain <em>why</em> you&#8217;re pointing to another page. They finish the sentence &#8220;I&#8217;m pointing to this other page because...&#8221;
175
176 <ul>
04fe83f copyedits
Mark Pilgrim authored
177 <li>...it&#8217;s a stylesheet containing CSS rules that your browser should apply to this document.
178 <li>...it&#8217;s a feed that contains the same content as this page, but in a standard subscribable format.
179 <li>...it&#8217;s a translation of this page into another language.
180 <li>...it&#8217;s the same content as this page, but in <abbr>PDF</abbr> format.
181 <li>...it&#8217;s the next chapter of an online book of which this page is also a part.
ce99b34 line endings fiddling
Mark Pilgrim authored
182 </ul>
183
184 <p>And so on. <abbr>HTML5</abbr> breaks link relations <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>into two categories</a>:
185
186 <blockquote cite=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>
187 <p>Two categories of links can be created using the link element. <b>Links to external resources</b> are links to resources that are to be used to augment the current document, and <b>hyperlink links</b> are links to other documents. ...
188 <p>The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.
189 </blockquote>
190
191 <p>Of the examples I just gave, only the first (<code>rel="stylesheet"</code>) is a link to an external resource. The rest are hyperlinks to other documents. You may wish to follow those links, or you may not, but they&#8217;re not required in order to view the current page.
192
4c867b0 updated link to link relations table
Mark Pilgrim authored
193 <p>Most often, link relations are seen on <code>&lt;link></code> elements within the <code>&lt;head></code> of a page. Some link relations can also be used on <code>&lt;a></code> elements, but this is uncommon even when allowed. <abbr>HTML5</abbr> also allows some relations on <code>&lt;area></code> elements, but this is even <em>less</em> common. (HTML 4 did not allow a <code>rel</code> attribute on <code>&lt;area></code> elements.) See <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes>the full chart of link relations</a> to check where you can use specific <code>rel</code> values.
ce99b34 line endings fiddling
Mark Pilgrim authored
194
195 <div class=pf>
196 <h4>Ask Professor Markup</h4>
197 <div class=inner>
198 <blockquote class=note>
199 <p><span>&#x261E;</span>Q: Can I make up my own link relations?<br>
19a1dde @kennethreitz Revert "Revert "Revert "https://github.com/diveintomark/diveintohtml5…
kennethreitz authored
200 <p>A: There seems to be an infinite supply of ideas for new link relations. In an attempt to prevent people from <a href=http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4>just making shit up</a>, the microformats community <a href=http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions>maintains a registry of proposed <code>rel</code> values</a> and the HTML specification <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#other-link-types>defines the process for getting them accepted</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
201 </blockquote>
202 </div>
203 </div>
204
205 <h3 id=rel-stylesheet>rel = stylesheet</h3>
206
207 <p>Let&#8217;s look at the first link relation in <a href=examples/blog-original.html>our example page</a>:
208
209 <pre><code>&lt;link rel="stylesheet" href="style-original.css" type="text/css" /></code></pre>
210
211 <p>This is the most frequently used link relation in the world (literally). <code>&lt;link rel="stylesheet"></code> is for pointing to <abbr>CSS</abbr> rules that are stored in a separate file. One small optimization you can make in <abbr>HTML5</abbr> is to drop the <code>type</code> attribute. There&#8217;s only one stylesheet language for the web, <abbr>CSS</abbr>, so that&#8217;s the default value for the <code>type</code> attribute. This works in all browsers. (I suppose someone could invent a new stylesheet language someday, but if that happens, just add the <code>type</code> attribute back.)
212
213 <pre><code>&lt;link rel="stylesheet" href="style-original.css" /></code></pre>
214
215 <h3 id=rel-alternate>rel = alternate</h3>
216
217 <p>Continuing with <a href=examples/blog-original.html>our example page</a>:
218
219 <pre><code>&lt;link rel="alternate"
220 type="application/atom+xml"
221 title="My Weblog feed"
222 href="/feed/" /></code></pre>
223
1629731 @myakura s/most/some/ since less browsers support feed icon in the URL bar.
myakura authored
224 <p>This link relation is also quite common. <code>&lt;link rel="alternate"></code>, combined with either the <abbr>RSS</abbr> or Atom media type in the <code>type</code> attribute, enables something called &#8220;feed autodiscovery.&#8221; It allows syndicated feed readers (like <a href="http://www.google.com/reader/">Google Reader</a>) to discover that a site has a news feed of the latest articles. Some browsers also support feed autodiscovery by displaying a special icon next to the <abbr>URL</abbr>. (Unlike with <code>rel="stylesheet"</code>, the <code>type</code> attribute matters here. Don&#8217;t drop it!)
ce99b34 line endings fiddling
Mark Pilgrim authored
225
226 <p>The <code>rel="alternate"</code> link relation has always been a strange hybrid of use cases, <a href=http://www.w3.org/TR/html401/types.html#type-links>even in <abbr>HTML</abbr> 4</a>. In <abbr>HTML5</abbr>, its definition has been clarified and extended to more accurately describe existing web content. As you just saw, using <code>rel="alternate"</code> in conjunction with <code>type=application/atom+xml</code> indicates an Atom feed for the current page. But you can also use <code>rel="alternate"</code> in conjunction with other <code>type</code> attributes to indicate the same content in another format, like <abbr>PDF</abbr>.
227
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
228 <p>HTML5 also puts to rest a long-standing confusion about how to link to translations of documents. <abbr>HTML</abbr> 4 says to use the <code>lang</code> attribute in conjunction with <code>rel="alternate"</code> to specify the language of the linked document, but this is incorrect. The <a href=http://www.w3.org/MarkUp/html4-updates/errata>HTML 4 Errata</a> document lists four outright errors in the <abbr>HTML</abbr> 4 specification. One of these outright errors is how to specify the language of a document linked with <code>rel="alternate"</code> The correct way, described in the <abbr>HTML</abbr> 4 Errata and now in <abbr>HTML5</abbr>, is to use the <code>hreflang</code> attribute. Unfortunately, these errata were never re-integrated into the <abbr>HTML</abbr> 4 spec, because no one in the W3C <abbr>HTML</abbr> Working Group was working on <abbr>HTML</abbr> anymore.
ce99b34 line endings fiddling
Mark Pilgrim authored
229
230 <h3 id=new-relations>Other Link Relations in HTML5</h3>
231
232 <p><code>rel="author"</code> is used to link to information about the author of the page. This can be a <code>mailto:</code> address, though it doesn&#8217;t have to be. It could simply link to a contact form or &#8220;about the author&#8221; page.
233
234 <p class=ss style="width:313px"><img src=i/openclipart.org_johnny_automatic_girl_feeding_birds.png width=313 height=384 alt="girl feeding birds">
235
c9f7fc4 @myakura semantics: update on structure rel values.
myakura authored
236 <p>HTML 4 defined <a href=http://www.w3.org/TR/html401/types.html#type-links><code>rel="start"</code>, <code>rel="prev"</code>, and <code>rel="next"</code></a> to define relations between pages that are part of a series (like chapters of a book, or even posts on a blog). The only one that was ever used correctly was <code>rel="next"</code>. People used <code>rel="previous"</code> instead of <code>rel="prev"</code>; they used <code>rel="begin"</code> and <code>rel="first"</code> instead of <code>rel="start"</code>; they used <code>rel="end"</code> instead of <code>rel="last"</code>.
237 <p>Oh, and &mdash; all by themselves &mdash; they made up <code>rel="up"</code> to point to a &#8220;parent&#8221; page. The best way to think of <code>rel="up"</code> is to look at your breadcrumb navigation (or at least imagine it). Your home page is probably the first page in your breadcrumbs, and the current page is at the tail end. <code>rel="up"</code> points to the next-to-last page in the breadcrumbs.
ce99b34 line endings fiddling
Mark Pilgrim authored
238
c9f7fc4 @myakura semantics: update on structure rel values.
myakura authored
239 <p><abbr>HTML5</abbr> includes <code>rel="next"</code> and <code>rel="prev"</code>, just like <abbr>HTML</abbr> 4, and supports <code>rel="previous"</code> for backward compatibility. The specification once had <code>rel="first"</code>, <code>rel="last"</code>, and <code>rel="up"</code>, too. However, &#8220;<a href=http://lists.w3.org/Archives/Public/public-html/2011Feb/att-0481/issue-118-decision.html>based on the lack of interest from implementors and users</a>&#8221; the HTML Working Group decided to drop these values from the specification.
ce99b34 line endings fiddling
Mark Pilgrim authored
240
90f04e3 updated lots of spec links
Mark Pilgrim authored
241 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>rel="icon"</a> is the <a href=http://code.google.com/webstats/2005-12/linkrels.html>second most popular link relation</a>, after <code>rel="stylesheet"</code>. It is usually found together with <code>shortcut</code>, like so:
ce99b34 line endings fiddling
Mark Pilgrim authored
242
243 <pre><code>&lt;link rel="shortcut icon" href="/favicon.ico"></code></pre>
244
245 <p>All major browsers support this usage to associate a small icon with the page. Usually it&#8217;s displayed in the browser&#8217;s location bar next to the URL, or in the browser tab, or both.
246
90f04e3 updated lots of spec links
Mark Pilgrim authored
247 <p>Also new in <abbr>HTML5</abbr>: the <code>sizes</code> attribute can be used in conjunction with the <code>icon</code> relationship to <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>indicate the size of the referenced icon</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
248
90f04e3 updated lots of spec links
Mark Pilgrim authored
249 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-license>rel="license"</a> was <a href=http://microformats.org/wiki/rel-license>invented by the microformats community</a>. It &#8220;indicates that the referenced document provides the copyright license terms under which the current document is provided.&#8221;
ce99b34 line endings fiddling
Mark Pilgrim authored
250
90f04e3 updated lots of spec links
Mark Pilgrim authored
251 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-nofollow>rel="nofollow"</a> &#8220;indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.&#8221; It was <a href=http://googleblog.blogspot.com/2005/01/preventing-comment-spam.html>invented by Google</a> and <a href=http://microformats.org/wiki/rel-nofollow>standardized within the microformats community</a>. <a href=http://www.wordpress.org>WordPress</a> adds <code>rel="nofollow"</code> to links added by commenters. The thinking was that if &#8220;nofollow&#8221; links did not pass on PageRank, spammers would give up trying to post spam comments on weblogs. That didn&#8217;t happen, but <code>rel="nofollow"</code> persists.
ce99b34 line endings fiddling
Mark Pilgrim authored
252
f272a86 @myakura semantics: update on rel="noreferrer" support.
myakura authored
253 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-noreferrer>rel="noreferrer"</a> &#8220;indicates that no referrer information is to be leaked when following the link.&#8221; <a href=http://webkit.org/blog/907/webkit-nightlies-support-html5-noreferrer-link-relation/>WebKit supports rel="noreferrer"</a> so it works on Google Chome and Safari (and hopefully on other WebKit-based browsers). [<a href=http://wearehugh.com/public/2009/04/rel-noreferrer.html>rel="noreferrer" test case</a>]
ce99b34 line endings fiddling
Mark Pilgrim authored
254
255 <p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:271px"><img src=i/openclipart.org_johnny_automatic_dog_on_chair.png width=271 height=309 alt="dog on chair">
256
90f04e3 updated lots of spec links
Mark Pilgrim authored
257 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-prefetch>rel="prefetch"</a> &#8220;indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource.&#8221; Search engines sometimes add <code>&lt;link rel="prefetch" href="<i>URL of top search result</i>"></code> to the search results page if they feel that the top result is wildly more popular than any other. For example: using Firefox, <a href="http://www.google.com/search?q=cnn">search Google for CNN</a>, view the page source, and search for the keyword <code>prefetch</code>. Mozilla Firefox is the only current browser that supports <code>rel="prefetch"</code>.
ce99b34 line endings fiddling
Mark Pilgrim authored
258
6f48f32 @myakura semantics: Chrome supports rel="search".
myakura authored
259 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-search>rel="search"</a> &#8220;indicates that the referenced document provides an interface specifically for searching the document and its related resources.&#8221; Specifically, if you want <code>rel="search"</code> to do anything useful, it should point to an <a href=http://www.opensearch.org/>OpenSearch</a> document that describes how a browser could construct a URL to search the current site for a given keyword. OpenSearch (and <code>rel="search"</code> links that point to OpenSearch description documents) has been supported in Internet Explorer since version 7, Mozilla Firefox since version 2, and Google Chrome.
ce99b34 line endings fiddling
Mark Pilgrim authored
260
90f04e3 updated lots of spec links
Mark Pilgrim authored
261 <p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-tag>rel="tag"</a> &#8220;indicates that the tag that the referenced document represents applies to the current document.&#8221; Marking up &#8220;tags&#8221; (category keywords) with the <code>rel</code> attribute was <a href=http://www.powazek.com/2005/07/000532.html>invented by Technorati</a> to help them categorize blog posts. Early blogs and tutorials thus referred to them as &#8220;Technorati tags.&#8221; (You read that right: a commercial company convinced the entire world to add metadata that made the company&#8217;s job easier. Nice work if you can get it!) The syntax was later <a href=http://microformats.org/wiki/rel-tag>standardized within the microformats community</a>, where it was simply called <code>rel="tag"</code>. Most blogging systems that allow associating categories, keywords, or tags with individual posts will mark them up with <code>rel="tag"</code> links. Browsers do not do anything special with them; they&#8217;re really designed for search engines to use as a signal of what the page is about.
ce99b34 line endings fiddling
Mark Pilgrim authored
262
263 <p class=a>&#x2767;
264
265 <h2 id=new-elements>New Semantic Elements in HTML5</h2>
266
a486c41 !a number of (still matt's fault)
Mark Pilgrim authored
267 <p><abbr>HTML5</abbr> is not just about making existing markup shorter (although it does a fair amount of that). It also defines new semantic elements.
ce99b34 line endings fiddling
Mark Pilgrim authored
268
269 <dl class=col>
270 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element><code>&lt;section></code></a>
4ab97e6 !various (still matt's fault)
Mark Pilgrim authored
271 <dd>The <code>section</code> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.
ce99b34 line endings fiddling
Mark Pilgrim authored
272 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element><code>&lt;nav></code></a>
4ab97e6 !various (still matt's fault)
Mark Pilgrim authored
273 <dd>The <code>nav</code> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a <code>nav</code> element &mdash; only sections that consist of major navigation blocks are appropriate for the <code>nav</code> element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The <code>footer</code> element alone is sufficient for such cases, without a <code>nav</code> element.
ce99b34 line endings fiddling
Mark Pilgrim authored
274 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element><code>&lt;article></code></a>
275 <dd>The <code>article</code> element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
276 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element><code>&lt;aside></code></a>
277 <dd>The <code>aside</code> element represents a section of a page that consists of content that is tangentially related to the content around the <code>aside</code> element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <code>nav</code> elements, and for other content that is considered separate from the main content of the page.
278 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element><code>&lt;hgroup></code></a>
279 <dd>The <code>hgroup</code> element represents the heading of a section. The element is used to group a set of <code>h1</code>&ndash;<code>h6</code> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
280 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element><code>&lt;header></code></a>
281 <dd>The <code>header</code> element represents a group of introductory or navigational aids. A <code>header</code> element is intended to usually contain the section&#8217;s heading (an <code>h1</code>&ndash;<code>h6</code> element or an <code>hgroup</code> element), but this is not required. The <code>header</code> element can also be used to wrap a section&#8217;s table of contents, a search form, or any relevant logos.
282 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element><code>&lt;footer></code></a>
283 <dd>The <code>footer</code> element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don&#8217;t necessarily have to appear at the end of a section, though they usually do. When the <code>footer</code> element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
284 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element><code>&lt;time></code></a>
285 <dd>The <code>time</code> element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
286 <dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element><code>&lt;mark></code></a>
287 <dd>The <code>mark</code> element represents a run of text in one document marked or highlighted for reference purposes.
288 </dl>
289
290 <p>I know you&#8217;re anxious to start using these new elements, otherwise you wouldn&#8217;t be reading this chapter. But first we need to take a little detour.
291
292 <p class=a>&#x2767;
293
294 <h2 id=unknown-elements>A long digression into how browsers handle unknown elements</h2>
295
76b533a @myakura semantics: the link to nsElementTable.cpp should point to mozilla-cen…
myakura authored
296 <p>Every browser has a master list of <abbr>HTML</abbr> elements that it supports. For example, Mozilla Firefox&#8217;s list is stored in <a href="http://mxr.mozilla.org/mozilla-central/source/parser/htmlparser/src/nsElementTable.cpp">nsElementTable.cpp</a>. Elements not in this list are treated as &#8220;unknown elements.&#8221; There are two fundamental problems with unknown elements:
ce99b34 line endings fiddling
Mark Pilgrim authored
297
298 <ol>
d16abf2 added display:block reset and explanation
Mark Pilgrim authored
299 <li><b>How should the element be styled?</b> By default, <code>&lt;p></code> has spacing on the top and bottom, <code>&lt;blockquote></code> is indented with a left margin, and <code>&lt;h1></code> is displayed in a larger font. But what default styles should be applied to unknown elements?</li>
04fe83f copyedits
Mark Pilgrim authored
300 <li><b>What should the element&#8217;s DOM look like?</b> Mozilla&#8217;s <code>nsElementTable.cpp</code> includes information about what kinds of other elements each element can contain. If you include markup like <code>&lt;p>&lt;p></code>, the second paragraph element implicitly closes the first one, so the elements end up as siblings, not parent-and-child. But if you write <code>&lt;p>&lt;span></code>, the <code>span</code> does not close the paragraph, because Firefox knows that <code>&lt;p></code> is a block element that can contain the inline element <code>&lt;span></code>. So, the <code>&lt;span></code> ends up as a child of the <code>&lt;p></code> in the DOM.</li>
ce99b34 line endings fiddling
Mark Pilgrim authored
301 </ol>
302
d16abf2 added display:block reset and explanation
Mark Pilgrim authored
303 <p>Different browsers answer these questions in different ways. (Shocking, I know.) Of the major browsers, Microsoft Internet Explorer&#8217;s answer to both questions is the most problematic, but every browser needs a little bit of help here.
ce99b34 line endings fiddling
Mark Pilgrim authored
304
d16abf2 added display:block reset and explanation
Mark Pilgrim authored
305 <p>The first question should be relatively simple to answer: don&#8217;t give any special styling to unknown elements. Just let them inherit whatever CSS properties are in effect wherever they appear on the page, and let the page author specify all styling with CSS. And that works, mostly, but there&#8217;s one little gotcha you need to be aware of.
306
307 <div class=pf>
308 <h4>Professor Markup Says</h4>
309 <div class=inner>
310 <blockquote>
311 <p>All browsers render unknown elements inline, <i>i.e.</i> as if they had a <code>display:inline</code> <abbr>CSS</abbr> rule.
312 </blockquote>
313 </div>
314 </div>
315
316 <p>There are several new elements defined in <abbr>HTML5</abbr> which are block-level elements. That is, they can contain other block-level elements, and <abbr>HTML5</abbr>-compliant browsers will style them as <code>display:block</code> by default. If you want to use these elements in older browsers, you will need to define the display style manually:
317
318 <pre><code>article,aside,details,figcaption,figure,
319 footer,header,hgroup,menu,nav,section {
320 display:block;
321 }</code></pre>
322
323 <p>(This code is lifted from Rich Clark&#8217;s <a href=http://html5doctor.com/html-5-reset-stylesheet/><abbr>HTML5</abbr> Reset Stylesheet</a>, which does many other things that are beyond the scope of this chapter.)
324
325 <p>But wait, it gets worse! Prior to version 9, Internet Explorer did not apply <em>any</em> styling on unknown elements. For example, if you had this markup:
ce99b34 line endings fiddling
Mark Pilgrim authored
326
327 <pre><code>&lt;style type="text/css">
328 article { display: block; border: 1px solid red }
329 &lt;/style>
330 ...
331 &lt;article>
332 &lt;h1>Welcome to Initech&lt;/h1>
333 &lt;p>This is your &lt;span>first day&lt;/span>.&lt;/p>
334 &lt;/article></code></pre>
335
1f839bb @myakura semantics: update MSDN links.
myakura authored
336 <p>Internet Explorer (up to and including IE 8) will not treat the <code>&lt;article></code> element as a block-level element, nor will it put a red border around the article. All the style rules are simply ignored. <a href=http://msdn.microsoft.com/en-us/ie/hh410106#_HTML_Parsing>Internet Explorer 9 fixes this problem</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
337
1f839bb @myakura semantics: update MSDN links.
myakura authored
338 <p>The second problem is the DOM that browsers create when they encounter unknown elements. Again, the most problematic browser is older versions of Internet Explorer (before version 9, <a href=http://msdn.microsoft.com/en-us/ie/hh410106#_HTML_Parsing>which fixes this problem too</a>). If IE 8 doesn&#8217;t explicitly recognize the element name, it will insert the element into the DOM <em>as an empty node with no children</em>. All the elements that you would expect to be direct children of the unknown element will actually be inserted as siblings instead.
ce99b34 line endings fiddling
Mark Pilgrim authored
339
d16abf2 added display:block reset and explanation
Mark Pilgrim authored
340 <p>Here is some righteous <abbr>ASCII</abbr> art to illustrate the difference. This is the DOM that <abbr>HTML5</abbr> dictates:
ce99b34 line endings fiddling
Mark Pilgrim authored
341
342 <pre>article
343 |
344 +--h1 (child of article)
345 | |
346 | +--text node "Welcome to Initech"
347 |
348 +--p (child of article, sibling of h1)
349 |
350 +--text node "This is your "
351 |
352 +--span
353 | |
354 | +--text node "first day"
355 |
356 +--text node "."</pre>
357
358 <p>But this is the DOM that Internet Explorer actually creates:
359
360 <pre>article (no children)
361 h1 (sibling of article)
362 |
363 +--text node "Welcome to Initech"
364 p (sibling of h1)
365 |
366 +--text node "This is your "
367 |
368 +--span
369 | |
370 | +--text node "first day"
371 |
372 +--text node "."</pre>
373
374 <p>There is a wonderous workaround for this problem. If you <a href=http://xopus.com/devblog/2008/style-unknown-elements.html>create a dummy <code>&lt;article></code> element</a> with JavaScript before you use it in your page, Internet Explorer will magically recognize the <code>&lt;article></code> element and let you style it with CSS. There is no need to ever insert the dummy element into the <abbr>DOM</abbr>. Simply creating the element once (per page) is enough to teach IE to style the element it doesn&#8217;t recognize.
375
376 <pre><code>&lt;html>
377 &lt;head>
378 &lt;style>
379 article { display: block; border: 1px solid red }
380 &lt;/style>
381 <mark>&lt;script>document.createElement("article");&lt;/script></mark>
382 &lt;/head>
383 &lt;body>
384 &lt;article>
385 &lt;h1>Welcome to Initech&lt;/h1>
386 &lt;p>This is your &lt;span>first day&lt;/span>.&lt;/p>
387 &lt;/article>
388 &lt;/body>
389 &lt;/html></code></pre>
390
391 <p>This works in all versions of Internet Explorer, all the way back to IE 6! We can extend this technique to create dummy copies of all the new <abbr>HTML5</abbr> elements at once &mdash; again, they&#8217;re never inserted into the <abbr>DOM</abbr>, so you&#8217;ll never see these dummy elements &mdash; and then just start using them without having to worry too much about non-HTML5-capable browsers.
392
18b4e36 at time of writing, grr
Mark Pilgrim authored
393 <p>Remy Sharp has done just that, with his aptly named <a href=http://remysharp.com/2009/01/07/html5-enabling-script/><abbr>HTML5</abbr> enabling script</a>. The script has gone through more than a dozen revisions since I started writing this book, but this is the basic idea:
ce99b34 line endings fiddling
Mark Pilgrim authored
394
3473158 lte --> lt [thanks S/N]
Mark Pilgrim authored
395 <pre><code>&lt;!--[if lt IE 9]>
ce99b34 line endings fiddling
Mark Pilgrim authored
396 &lt;script>
397 var e = ("abbr,article,aside,audio,canvas,datalist,details," +
398 "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
399 "progress,section,time,video").split(',');
400 for (var i = 0; i &lt; e.length; i++) {
401 document.createElement(e[i]);
402 }
403 &lt;/script>
404 &lt;![endif]--></code></pre>
405
1f839bb @myakura semantics: update MSDN links.
myakura authored
406 <p>The <code>&lt;!--[if lt IE 9]></code> and <code>&lt;![endif]--></code> bits are <a href="http://msdn.microsoft.com/en-us/library/ms537512">conditional comments</a>. Internet Explorer interprets them like an <code>if</code> statement: &#8220;if the current browser is a version of Internet Explorer less than version 9, then execute this block.&#8221; Every other browser will treat the entire block as an <abbr>HTML</abbr> comment. The net result is that Internet Explorer (up to and including version 8) will execute this script, but other browsers will ignore the script altogether. This makes your page load faster in browsers that don&#8217;t need this hack.
ce99b34 line endings fiddling
Mark Pilgrim authored
407
408 <p>The JavaScript code itself is relatively straightforward. The variable <var>e</var> ends up as an array of strings like <code>"abbr"</code>, <code>"article"</code>, <code>"aside"</code>, and so on. Then we loop through this array and create each of the named elements by calling <code>document.createElement()</code>. But since we ignore the return value, the elements are never inserted into the <abbr>DOM</abbr>. But this is enough to get Internet Explorer to treat these elements the way we want them to be treated, once we actually use them later in the page.
409
04fe83f copyedits
Mark Pilgrim authored
410 <p>That &#8220;later&#8221; bit is important. This script needs to be at the top of your page, preferably in your <code>&lt;head></code> element, not at the bottom. That way, Internet Explorer will execute the script <em>before</em> it parses your tags and attributes. If you put this script at the bottom of your page, it will be too late. Internet Explorer will have already misinterpreted your markup and constructed the wrong <abbr>DOM</abbr>, and it won&#8217;t go back and adjust it just because of this script.
ce99b34 line endings fiddling
Mark Pilgrim authored
411
412 <p>Remy Sharp has &#8220;minified&#8221; this script and <a href=http://code.google.com/p/html5shiv/>hosted it on Google Project Hosting</a>. (In case you were wondering, the script itself is open source and MIT-licensed, so you can use it in any project.) If you like, you can even &#8220;hotlink&#8221; the script by pointing directly to the hosted version, like this:
413
414 <pre><code>&lt;head>
415 &lt;meta charset="utf-8" />
416 &lt;title>My Weblog&lt;/title>
3473158 lte --> lt [thanks S/N]
Mark Pilgrim authored
417 &lt;!--[if lt IE 9]>
ce99b34 line endings fiddling
Mark Pilgrim authored
418 &lt;script <mark>src="<a href=http://html5shiv.googlecode.com/svn/trunk/html5.js>http://html5shiv.googlecode.com/svn/trunk/html5.js</a>"</mark>>&lt;/script>
419 &lt;![endif]-->
420 &lt;/head></code></pre>
421
04fe83f copyedits
Mark Pilgrim authored
422 <p>Now we&#8217;re ready to start using the new semantic elements in <abbr>HTML5</abbr>.
ce99b34 line endings fiddling
Mark Pilgrim authored
423
424 <p class=a>&#x2767;
425
426 <h2 id=header-element>Headers</h2>
427
428 <p class=ss style="width:205"><img src=i/openclipart.org_johnny_automatic_newsboy.png alt="newsboy hawking newspaper" width=205 height=335>
429
430 <p>Let&#8217;s go back to <a href=examples/blog-original.html>our example page</a>. Specifically, let&#8217;s look at just the headers:
431
432 <pre><code>&lt;div id="header">
433 &lt;h1>My Weblog&lt;/h1>
434 &lt;p class="tagline">A lot of effort went into making this effortless.&lt;/p>
435 &lt;/div>
436
437 &hellip;
438
439 &lt;div class="entry">
440 &lt;h2>Travel day&lt;/h2>
441 &lt;/div>
442
443 &hellip;
444
445 &lt;div class="entry">
446 &lt;h2>I'm going to Prague!&lt;/h2>
447 &lt;/div></code></pre>
448
449 <p>There is nothing wrong with this markup. If you like it, you can keep it. It is valid <abbr>HTML5</abbr>. But <abbr>HTML5</abbr> provides some additional semantic elements for headers and sections.
450
597a7c6 word fiddling (this is all matt's fault: http://matt.might.net/articl…
Mark Pilgrim authored
451 <p>First off, let&#8217;s get rid of that <code>&lt;div id="header"></code>. This is a common pattern, but it doesn&#8217;t mean anything. The <code>div</code> element has no defined semantics, and the <code>id</code> attribute has no defined semantics. (User agents are not allowed to infer any meaning from the value of the <code>id</code> attribute.) You could change this to <code>&lt;div id="shazbot"></code> and it would have the same semantic value, <i>i.e.</i>, nothing.
ce99b34 line endings fiddling
Mark Pilgrim authored
452
a486c41 !a number of (still matt's fault)
Mark Pilgrim authored
453 <p><abbr>HTML5</abbr> defines a <code>&lt;header></code> element for this purpose. The <abbr>HTML5</abbr> specification has <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element>real-world examples of using the <code>&lt;header></code> element</a>. Here is what it would look like on <a href=examples/blog-original.html>our example page</a>:
ce99b34 line endings fiddling
Mark Pilgrim authored
454
455 <pre><code>&lt;header>
456 &lt;h1>My Weblog&lt;/h1>
457 &lt;p class="tagline">A lot of effort went into making this effortless.&lt;/p>
458 &hellip;
459 &lt;/header></code></pre>
460
461 <p>That&#8217;s good. It tells anyone who wants to know that this is a header. But what about that tagline? Another common pattern, which up until now had no standard markup. It&#8217;s a difficult thing to mark up. A tagline is like a subheading, but it&#8217;s &#8220;attached&#8221; to the primary heading. That is, it&#8217;s a subheading that doesn&#8217;t create its own section.
462
463 <p>Header elements like <code>&lt;h1></code> and <code>&lt;h2></code> give your page structure. Taken together, they create an outline that you can use to visualize (or navigate) your page. Screenreaders use document outlines to help blind users navigate through your page. There are <a href="http://gsnedders.html5.org/outliner/">online tools</a> and <a href=http://chrispederick.com/work/web-developer/>browser extensions</a> that can help you visualize your document&#8217;s outline.
464
04fe83f copyedits
Mark Pilgrim authored
465 <p>In <abbr>HTML</abbr> 4, <code>&lt;h1></code>&ndash;<code>&lt;h6></code> elements were the <em>only</em> way to create a document outline. The outline on the example page looks like this:
ce99b34 line endings fiddling
Mark Pilgrim authored
466
467 <pre>My Weblog (h1)
f6b9e45 fiddle with ASCII art to make document outline more clear
Mark Pilgrim authored
468 |
469 +--Travel day (h2)
470 |
471 +--I'm going to Prague! (h2)</pre>
ce99b34 line endings fiddling
Mark Pilgrim authored
472
473 <p>That&#8217;s fine, but it means that there&#8217;s no way to mark up the tagline &#8220;A lot of effort went into making this effortless.&#8221; If we tried to mark it up as an <code>&lt;h2></code>, it would add a phantom node to the document outline:
474
475 <pre>My Weblog (h1)
f6b9e45 fiddle with ASCII art to make document outline more clear
Mark Pilgrim authored
476 |
477 +--A lot of effort went into making this effortless. (h2)
478 |
479 +--Travel day (h2)
480 |
481 +--I'm going to Prague! (h2)</pre>
ce99b34 line endings fiddling
Mark Pilgrim authored
482
483 <p>But that&#8217;s not the structure of the document. The tagline does not represent a section; it&#8217;s just a subheading.
484
485 <p>Perhaps we could mark up the tagline as an <code>&lt;h2></code> and mark up each article title as an <code>&lt;h3></code>? No, that&#8217;s even worse:
486
487 <pre>My Weblog (h1)
488 |
f6b9e45 fiddle with ASCII art to make document outline more clear
Mark Pilgrim authored
489 +--A lot of effort went into making this effortless. (h2)
490 |
491 +--Travel day (h3)
492 |
493 +--I'm going to Prague! (h3)</pre>
ce99b34 line endings fiddling
Mark Pilgrim authored
494
04fe83f copyedits
Mark Pilgrim authored
495 <p>Now we still have a phantom node in our document outline, but it has &#8220;stolen&#8221; the children that rightfully belong to the root node. And herein lies the problem: <abbr>HTML</abbr> 4 does not provide a way to mark up a subheading without adding it to the document outline. No matter how we try to shift things around, &#8220;A lot of effort went into making this effortless&#8221; is going to end up in that graph. And that&#8217;s why we ended up with semantically meaningless markup like <code>&lt;p class="tagline"></code>.
ce99b34 line endings fiddling
Mark Pilgrim authored
496
497 <p><abbr>HTML5</abbr> provides a solution for this: the <code>&lt;hgroup></code> element. The <code>&lt;hgroup></code> element acts as a wrapper for two or more <em>related</em> heading elements. What does &#8220;related&#8221; mean? It means that, taken together, they only create a single node in the document outline.
498
499 <p>Given this markup:
500
501 <pre><code>&lt;header>
502 <mark>&lt;hgroup></mark>
503 &lt;h1>My Weblog&lt;/h1>
504 <mark>&lt;h2></mark>A lot of effort went into making this effortless.<mark>&lt;/h2></mark>
505 <mark>&lt;/hgroup></mark>
506 &hellip;
507 &lt;/header>
508
509 &hellip;
510
511 &lt;div class="entry">
512 &lt;h2>Travel day&lt;/h2>
513 &lt;/div>
514
515 &hellip;
516
517 &lt;div class="entry">
518 &lt;h2>I'm going to Prague!&lt;/h2>
519 &lt;/div></code></pre>
520
521 <p>This is the document outline that is created:
522
523 <pre>My Weblog (h1 of its hgroup)
f6b9e45 fiddle with ASCII art to make document outline more clear
Mark Pilgrim authored
524 |
525 +--Travel day (h2)
526 |
527 +--I'm going to Prague! (h2)</pre>
ce99b34 line endings fiddling
Mark Pilgrim authored
528
529 <p>You can test your own pages in the <a href="http://gsnedders.html5.org/outliner/"><abbr>HTML5</abbr> Outliner</a> to ensure that you&#8217;re using the heading elements properly.
530
531 <p class=a>&#x2767;
532
533 <h2 id=article-element>Articles</h2>
534
535 <p>Continuing with <a href=examples/blog-original.html>our example page</a>, let&#8217;s see what we can do about this markup:
536
537 <pre><code>&lt;div class="entry">
538 &lt;p class="post-date">October 22, 2009&lt;/p>
539 &lt;h2>
540 &lt;a href="#"
541 rel="bookmark"
542 title="link to this post">
543 Travel day
544 &lt;/a>
545 &lt;/h2>
546 &hellip;
547 &lt;/div></code></pre>
548
04fe83f copyedits
Mark Pilgrim authored
549 <p>Again, this is valid <abbr>HTML5</abbr>. But <abbr>HTML5</abbr> provides a more specific element for the common case of marking up an article on a page &mdash; the aptly named <code>&lt;article></code> element.
ce99b34 line endings fiddling
Mark Pilgrim authored
550
551 <pre><code><mark>&lt;article></mark>
552 &lt;p class="post-date">October 22, 2009&lt;/p>
553 &lt;h2>
554 &lt;a href="#"
555 rel="bookmark"
556 title="link to this post">
557 Travel day
558 &lt;/a>
559 &lt;/h2>
560 &hellip;
561 <mark>&lt;/article></mark></code></pre>
562
563 <p>Ah, but it&#8217;s not quite that simple. There is one more change you should make. I&#8217;ll show it to you first, then explain it:
564
565 <pre><code>&lt;article>
566 &lt;header>
567 &lt;p class="post-date">October 22, 2009&lt;/p>
568 <mark>&lt;h1></mark>
569 &lt;a href="#"
570 rel="bookmark"
571 title="link to this post">
572 Travel day
573 &lt;/a>
574 <mark>&lt;/h1></mark>
575 &lt;/header>
576 &hellip;
577 &lt;/article></code></pre>
578
579 <p>Did you catch that? I changed the <code>&lt;h2></code> element to an <code>&lt;h1></code>, and wrapped it inside a <code>&lt;header></code> element. You&#8217;ve already seen the <code>&lt;header></code> element in action. Its purpose is to wrap all the elements that form the article&#8217;s header (in this case, the article&#8217;s publication date and title). But&hellip;but&hellip;but&hellip; shouldn&#8217;t you only have one <code>&lt;h1></code> per document? Won&#8217;t this screw up the document outline? No, but to understand why not, we need to back up a step.
580
581 <p>In <abbr>HTML</abbr> 4, the <em>only</em> way to create a document outline was with the <code>&lt;h1></code>&ndash;<code>&lt;h6></code> elements. If you only wanted one root node in your outline, you had to limit yourself to one <code>&lt;h1></code> in your markup. But the <abbr>HTML5</abbr> specification <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections>defines an algorithm for generating a document outline</a> that incorporates the new semantic elements in <abbr>HTML5</abbr>. The <abbr>HTML5</abbr> algorithm says that an <code>&lt;article></code> element creates a new section, that is, a new node in the document outline. And in <abbr>HTML5</abbr>, each section can have its own <code>&lt;h1></code> element.
582
04fe83f copyedits
Mark Pilgrim authored
583 <p>This is a drastic change from <abbr>HTML</abbr> 4, and here&#8217;s why it&#8217;s a good thing. Many web pages are really generated by templates. A bit of content is taken from one source and inserted into the page up here; a bit of content is taken from another source and inserted into the page down there. Many tutorials are structured the same way. &#8220;Here&#8217;s some <abbr>HTML</abbr> markup. Just copy it and paste it into your page.&#8221; That&#8217;s fine for small bits of content, but what if the markup you&#8217;re pasting is an entire section? In that case, the tutorial will read something like this: &#8220;Here&#8217;s some <abbr>HTML</abbr> markup. Just copy it, paste it into a text editor, and fix the heading tags so they match the nesting level of the corresponding heading tags in the page you&#8217;re pasting it into.&#8221;
ce99b34 line endings fiddling
Mark Pilgrim authored
584
04fe83f copyedits
Mark Pilgrim authored
585 <p>Let me put it another way. <abbr>HTML</abbr> 4 has no <em>generic</em> heading element. It has six strictly numbered heading elements, <code>&lt;h1></code>&ndash;<code>&lt;h6></code>, which must be nested in exactly that order. That kind of sucks, especially if your page is &#8220;assembled&#8221; instead of &#8220;authored.&#8221; And this is the problem that <abbr>HTML5</abbr> solves with the new sectioning elements and the new rules for the existing heading elements. If you&#8217;re using the new sectioning elements, I can give you this markup:
ce99b34 line endings fiddling
Mark Pilgrim authored
586
587 <pre><code>&lt;article>
588 &lt;header>
589 &lt;h1>A syndicated post&lt;/h1>
590 &lt;/header>
591 &lt;p>Lorem ipsum blah blah&hellip;&lt;/p>
592 &lt;/article></code></pre>
593
04fe83f copyedits
Mark Pilgrim authored
594 <p>and you can copy it and paste it <em>anywhere in your page</em> without modification. The fact that it contains an <code>&lt;h1></code> element is not a problem, because the entire thing is contained within an <code>&lt;article></code>. The <code>&lt;article></code> element defines a self-contained node in the document outline, the <code>&lt;h1></code> element provides the title for that outline node, and all the other sectioning elements on the page will remain at whatever nesting level they were at before.
ce99b34 line endings fiddling
Mark Pilgrim authored
595
596 <div class=pf>
597 <h4>Professor Markup Says</h4>
598 <div class=inner>
04fe83f copyedits
Mark Pilgrim authored
599 <blockquote><p>As with all things on the web, reality is a little more complicated than I&#8217;m letting on. The new &#8220;explicit&#8221; sectioning elements (like <code>&lt;h1></code> wrapped in <code>&lt;article></code>) may interact in unexpected ways with the old &#8220;implicit&#8221; sectioning elements (<code>&lt;h1></code>&ndash;<code>&lt;h6></code> by themselves). Your life will be simpler if you use one or the other, but not both. If you must use both on the same page, be sure to check the result in <a href=http://gsnedders.html5.org/outliner/>the <abbr>HTML5</abbr> Outliner</a> and verify that your document outline makes sense.
ce99b34 line endings fiddling
Mark Pilgrim authored
600 </blockquote>
601 </div>
602 </div>
603
604 <p class=a>&#x2767;
605
606 <h2 id=time-element>Dates and Times</h2>
607
608 <p class=ss style="float:left;margin:0 30px 0 0"><img src=i/openclipart.org_johnny_automatic_clock_tower.png width=205 height=378 alt="clock tower">
609
610 <p>This is exciting, right? I mean, it&#8217;s not &#8220;skiing down Mount Everest naked while reciting the Star Spangled Banner backwards&#8221; exciting, but it&#8217;s pretty exciting as far as semantic markup goes. Let&#8217;s continue with <a href=examples/blog-original.html>our example page</a>. The next line I want to highlight is this one:
611
612 <pre><code>&lt;div class="entry">
613 <mark>&lt;p class="post-date">October 22, 2009&lt;/p></mark>
614 &lt;h2>Travel day&lt;/h2>
615 &lt;/div></code></pre>
616
617 <p>Same old story, right? A common pattern &mdash; designating the publication date of an article &mdash; that has no semantic markup to back it up, so authors resort to generic markup with custom <code>class</code> attributes. Again, this is valid <abbr>HTML5</abbr>. You&#8217;re not <em>required</em> to change it. But <abbr>HTML5</abbr> does provide a specific solution for this case: the <code>&lt;time></code> element.
618
619 <pre><code>&lt;time datetime="2009-10-22" pubdate>October 22, 2009&lt;/time></code></pre>
620
621 <p>There are three parts to a <code>&lt;time></code> element:
622
623 <ol>
624 <li>A machine-readable timestamp
625 <li>Human-readable text content
626 <li>An optional <code>pubdate</code> flag
627 </ol>
628
629 <p>In this example, the <code>datetime</code> attribute only specifies a date, not a time. The format is a four-digit year, two-digit month, and two-digit day, separated by dashes:
630
631 <pre><code>&lt;time <mark>datetime="2009-10-22"</mark> pubdate>October 22, 2009&lt;/time></code></pre>
632
633 <p>If you want to include a time too, add the letter <code>T</code> after the date, then the time in 24-hour format, then a timezone offset.
634
635 <pre><code>&lt;time datetime="<mark>2009-10-22T13:59:47-04:00</mark>" pubdate>
636 October 22, 2009 1:59pm EDT
637 &lt;/time></code></pre>
638
219de0c @myakura semantics: point to <time> directly for its value examples.
myakura authored
639 <p>(The date/time format is pretty flexible. The <abbr>HTML5</abbr> specification <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#datetime-value>contains examples of valid date/time strings</a>.)
ce99b34 line endings fiddling
Mark Pilgrim authored
640
641 <p>Notice I changed the text content &mdash; the stuff between <code>&lt;time></code> and <code>&lt;/time></code> &mdash; to match the machine-readable timestamp. This is not actually required. The text content can be anything you like, as long as you provide a machine-readable date/timestamp in the <code>datetime</code> attribute. So this is valid <abbr>HTML5</abbr>:
642
643 <pre><code>&lt;time datetime="2009-10-22"><mark>last Thursday</mark>&lt;/time></code></pre>
644
04fe83f copyedits
Mark Pilgrim authored
645 <p>And this is also valid <abbr>HTML5</abbr>:
ce99b34 line endings fiddling
Mark Pilgrim authored
646
647 <pre><code>&lt;time datetime="2009-10-22">&lt;/time></code></pre>
648
04fe83f copyedits
Mark Pilgrim authored
649 <p>The final piece of the puzzle here is the <code>pubdate</code> attribute. It&#8217;s a Boolean attribute, so just add it if you need it, like this:
ce99b34 line endings fiddling
Mark Pilgrim authored
650
651 <pre><code>&lt;time datetime="2009-10-22" <mark>pubdate</mark>>October 22, 2009&lt;/time></code></pre>
652
653 <p>If you dislike &#8220;naked&#8221; attributes, this is also equivalent:
654
655 <pre><code>&lt;time datetime="2009-10-22" <mark>pubdate="pubdate"</mark>>October 22, 2009&lt;/time></code></pre>
656
657 <p>What does the <code>pubdate</code> attribute mean? It means one of two things. If the <code>&lt;time></code> element is in an <code>&lt;article></code> element, it means that this timestamp is the publication date of the article. If the <code>&lt;time></code> element is not in an <code>&lt;article></code> element, it means that this timestamp is the publication date of the entire document.
658
659 <p>Here&#8217;s the entire article, reformulated to take full advantage of <abbr>HTML5</abbr>:
660
661 <pre><code>&lt;article>
662 &lt;header>
663 &lt;time datetime="2009-10-22" pubdate>
664 October 22, 2009
665 &lt;/time>
666 &lt;h1>
667 &lt;a href="#"
668 rel="bookmark"
669 title="link to this post">
670 Travel day
671 &lt;/a>
672 &lt;/h1>
673 &lt;/header>
674 &lt;p>Lorem ipsum dolor sit amet&hellip;&lt;/p>
675 &lt;/article></code></pre>
676
677 <p class=a>&#x2767;
678
679 <h2 id=nav-element>Navigation</h2>
680
681 <p class=ss><img src=i/openclipart.org_johnny_automatic_a_pink.png alt="a man navigating a sailboat on the water" width=345 height=377>
682
683 <p>One of the most important parts of any web site is the navigation bar. CNN.com has &#8220;tabs&#8221; along the top of each page that link to the different news sections &mdash; &#8220;Tech,&#8221; &#8220;Health,&#8221; &#8220;Sports,&#8221; <i class=baa>&amp;</i>c. Google search results pages have a similar strip at the top of the page to try your search in different Google services &mdash; &#8220;Images,&#8221; &#8220;Video,&#8221; &#8220;Maps,&#8221; <i class=baa>&amp;</i>c. And <a href=examples/blog-original.html>our example page</a> has a navigation bar in the header that includes links to different sections of our hypothetical site &mdash; &#8220;home,&#8221; &#8220;blog,&#8221; &#8220;gallery,&#8221; and &#8220;about.&#8221;
684
685 <p>This is how the navigation bar was originally marked up:
686
687 <pre><code>&lt;div id="nav">
688 &lt;ul>
689 &lt;li>&lt;a href="#">home&lt;/a>&lt;/li>
690 &lt;li>&lt;a href="#">blog&lt;/a>&lt;/li>
691 &lt;li>&lt;a href="#">gallery&lt;/a>&lt;/li>
692 &lt;li>&lt;a href="#">about&lt;/a>&lt;/li>
693 &lt;/ul>
694 &lt;/div></code></pre>
695
04fe83f copyedits
Mark Pilgrim authored
696 <p>Again, this is valid <abbr>HTML5</abbr>. But while it&#8217;s marked up as a list of four items, there is nothing about the list that tells you that it&#8217;s part of the site navigation. Visually, you could guess that by the fact that it&#8217;s part of the page header, and by reading the text of the links. But semantically, there is nothing to distinguish this list of links from any other.
ce99b34 line endings fiddling
Mark Pilgrim authored
697
e4c6b32 @myakura diveintoaccessibility.org -> diveintoaccessibility.info
myakura authored
698 <p>Who cares about the semantics of site navigation? For one, <a href=http://diveintoaccessibility.info/>people with disabilities</a>. Why is that? Consider this scenario: your motion is limited, and using a mouse is difficult or impossible. To compensate, you might use a browser add-on that allows you to jump to (or jump past) major navigation links. Or consider this: if your sight is limited, you might use a dedicated program called a &#8220;screenreader&#8221; that uses text-to-speech to speak and summarize web pages. Once you get past the page title, the next important pieces of information about a page are the major navigation links. If you want to navigate quickly, you&#8217;ll tell your screenreader to jump to the navigation bar and start reading. If you want to browse quickly, you might tell your screenreader to jump <em>over</em> the navigation bar and start reading the main content. Either way, being able to determine navigation links programmatically is important.
ce99b34 line endings fiddling
Mark Pilgrim authored
699
04fe83f copyedits
Mark Pilgrim authored
700 <p>So, while there&#8217;s nothing wrong with using <code>&lt;div id="nav"></code> to mark up your site navigation, there&#8217;s nothing particularly right about it either. It&#8217;s suboptimal in ways that affect real people. <abbr>HTML5</abbr> provides a semantic way to mark up navigation sections: the <code>&lt;nav></code> element.
ce99b34 line endings fiddling
Mark Pilgrim authored
701
702 <pre><code><mark>&lt;nav></mark>
703 &lt;ul>
704 &lt;li>&lt;a href="#">home&lt;/a>&lt;/li>
705 &lt;li>&lt;a href="#">blog&lt;/a>&lt;/li>
706 &lt;li>&lt;a href="#">gallery&lt;/a>&lt;/li>
707 &lt;li>&lt;a href="#">about&lt;/a>&lt;/li>
708 &lt;/ul>
709 <mark>&lt;/nav></mark></code></pre>
710
711 <div class=pf>
712 <h4>Ask Professor Markup</h4>
713 <div class=inner>
714 <blockquote class=note>
715 <p><span>&#x261E;</span>Q: Are <a href=http://www.webaim.org/techniques/skipnav/>skip links</a> compatible with the <code>&lt;nav></code> element? Do I still need skip links in <abbr>HTML5</abbr>?<br>
04fe83f copyedits
Mark Pilgrim authored
716 <p>A: Skip links allow readers to skip over navigation sections. They are helpful for disabled users who use third-party software to read a web page aloud and navigate it without a mouse. (<a href=http://www.webaim.org/techniques/skipnav/>Learn how and why to provide skip links</a>.)
717 <p>Once screenreaders are updated to recognize the <code>&lt;nav></code> element, skip links will become obsolete, since the screenreader software will be able to automatically offer to skip over a navigation section marked up with the <code>&lt;nav></code> element. However, it will be a while before all the disabled users on the web upgrade to <abbr>HTML5</abbr>-savvy screenreader software, so you should continue to provide your own skip links to jump over <code>&lt;nav></code> sections.
ce99b34 line endings fiddling
Mark Pilgrim authored
718 </blockquote>
719 </div>
720 </div>
721
722 <p class=a>&#x2767;
723
724 <h2 id=footer-element>Footers</h2>
725
726 <p>At long last, we have arrived at the end of <a href=examples/blog-original.html>our example page</a>. The last thing I want to talk about is the last thing on the page: the footer. The footer was originally marked up like this:
727
728 <pre><code>&lt;div id="footer">
729 &lt;p>&amp;#167;&lt;/p>
730 &lt;p>&amp;#169; 2001&amp;#8211;9 &lt;a href="#">Mark Pilgrim&lt;/a>&lt;/p>
731 &lt;/div></code></pre>
732
733 <p>This is valid <abbr>HTML5</abbr>. If you like it, you can keep it. But <abbr>HTML5</abbr> provides a more specific element for this: the <code>&lt;footer></code> element.
734
735 <pre><code><mark>&lt;footer></mark>
736 &lt;p>&amp;#167;&lt;/p>
737 &lt;p>&amp;#169; 2001&amp;#8211;9 &lt;a href="#">Mark Pilgrim&lt;/a>&lt;/p>
738 <mark>&lt;/footer></mark></code></pre>
739
04fe83f copyedits
Mark Pilgrim authored
740 <p>What&#8217;s appropriate to put in a <code>&lt;footer></code> element? Probably whatever you&#8217;re putting in a <code>&lt;div id="footer"></code> now. OK, that&#8217;s a circular answer. But really, that&#8217;s it. The <abbr>HTML5</abbr> specification says, &#8220;A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.&#8221; That&#8217;s what&#8217;s in this example page: a short copyright statement and a link to an about-the-author page. Looking around at some popular sites, I see lots of footer potential.
ce99b34 line endings fiddling
Mark Pilgrim authored
741
742 <ul>
04fe83f copyedits
Mark Pilgrim authored
743 <li><a href=http://www.cnn.com/>CNN</a> has a footer that contains a copyright statement, links to translations, and links to terms of service, privacy, &#8220;about us,&#8221; &#8220;contact us,&#8221; and &#8220;help&#8221; pages. All totally appropriate <code>&lt;footer></code> material.
744 <li><a href=http://www.google.com/>Google</a> has a famously sparse home page, but at the bottom of it are links to &#8220;Advertising Programs,&#8221; &#8220;Business Solutions,&#8221; and &#8220;About Google&#8221;; a copyright statement; and a link to Google&#8217;s privacy policy. All of that could be wrapped in a <code>&lt;footer></code>.
745 <li><a href=http://diveintomark.org/>My weblog</a> has a footer with links to my other sites, plus a copyright statement. Definitely appropriate for a <code>&lt;footer></code> element. (Note that the links themselves should <em>not</em> be wrapped in a <code>&lt;nav></code> element, because they are not site navigation links; they are just a collection of links to my other projects on other sites.)
ce99b34 line endings fiddling
Mark Pilgrim authored
746 </ul>
747
04fe83f copyedits
Mark Pilgrim authored
748 <p>&#8220;<a href=http://ui-patterns.com/pattern/FatFooter>Fat footers</a>&#8221; are all the rage these days. Take a look at the footer on <a href=http://www.w3.org/>the <abbr>W3C</abbr> site</a>. It contains three columns, labeled &#8220;Navigation,&#8221; &#8220;Contact W3C,&#8221; and &#8220;W3C Updates.&#8221; The markup looks like this, more or less:
ce99b34 line endings fiddling
Mark Pilgrim authored
749
750 <pre><code>&lt;div id="w3c_footer">
751 &lt;div class="w3c_footer-nav">
752 &lt;h3>Navigation&lt;/h3>
753 &lt;ul>
754 &lt;li>&lt;a href="/">Home&lt;/a>&lt;/li>
755 &lt;li>&lt;a href="/standards/">Standards&lt;/a>&lt;/li>
756 &lt;li>&lt;a href="/participate/">Participate&lt;/a>&lt;/li>
757 &lt;li>&lt;a href="/Consortium/membership">Membership&lt;/a>&lt;/li>
758 &lt;li>&lt;a href="/Consortium/">About W3C&lt;/a>&lt;/li>
759 &lt;/ul>
760 &lt;/div>
761 &lt;div class="w3c_footer-nav">
762 &lt;h3>Contact W3C&lt;/h3>
763 &lt;ul>
764 &lt;li>&lt;a href="/Consortium/contact">Contact&lt;/a>&lt;/li>
765 &lt;li>&lt;a href="/Help/">Help and FAQ&lt;/a>&lt;/li>
766 &lt;li>&lt;a href="/Consortium/sup">Donate&lt;/a>&lt;/li>
767 &lt;li>&lt;a href="/Consortium/siteindex">Site Map&lt;/a>&lt;/li>
768 &lt;/ul>
769 &lt;/div>
770 &lt;div class="w3c_footer-nav">
771 &lt;h3>W3C Updates&lt;/h3>
772 &lt;ul>
773 &lt;li>&lt;a href="http://twitter.com/W3C">Twitter&lt;/a>&lt;/li>
774 &lt;li>&lt;a href="http://identi.ca/w3c">Identi.ca&lt;/a>&lt;/li>
775 &lt;/ul>
776 &lt;/div>
777 &lt;p class="copyright">Copyright &copy; 2009 W3C&lt;/p>
778 &lt;/div></code></pre>
779
780 <p>To convert this to semantic <abbr>HTML5</abbr>, I would make the following changes:
781
782 <ul>
783 <li>Convert the outer <code>&lt;div id="w3c_footer"></code> to a <code>&lt;footer></code> element.
784 <li>Convert the first two instances of <code>&lt;div class="w3c_footer-nav"></code> to <code>&lt;nav></code> elements, and the third instance to a <code>&lt;section></code> element.
04fe83f copyedits
Mark Pilgrim authored
785 <li>Convert the <code>&lt;h3></code> headers to <code>&lt;h1></code>, since they&#8217;ll now each be inside a sectioning element. The <code>&lt;nav></code> element creates a section in the document outline, just like the <a href=#article-element><code>&lt;article></code> element</a>.
ce99b34 line endings fiddling
Mark Pilgrim authored
786 </ul>
787
788 <p>The final markup might look something like this:
789
790 <pre><code><mark>&lt;footer></mark>
791 <mark>&lt;nav></mark>
792 <mark>&lt;h1></mark>Navigation<mark>&lt;/h1></mark>
793 &lt;ul>
794 &lt;li>&lt;a href="/">Home&lt;/a>&lt;/li>
795 &lt;li>&lt;a href="/standards/">Standards&lt;/a>&lt;/li>
796 &lt;li>&lt;a href="/participate/">Participate&lt;/a>&lt;/li>
797 &lt;li>&lt;a href="/Consortium/membership">Membership&lt;/a>&lt;/li>
798 &lt;li>&lt;a href="/Consortium/">About W3C&lt;/a>&lt;/li>
799 &lt;/ul>
800 <mark>&lt;/nav></mark>
801 <mark>&lt;nav></mark>
802 <mark>&lt;h1></mark>Contact W3C<mark>&lt;/h1></mark>
803 &lt;ul>
804 &lt;li>&lt;a href="/Consortium/contact">Contact&lt;/a>&lt;/li>
805 &lt;li>&lt;a href="/Help/">Help and FAQ&lt;/a>&lt;/li>
806 &lt;li>&lt;a href="/Consortium/sup">Donate&lt;/a>&lt;/li>
807 &lt;li>&lt;a href="/Consortium/siteindex">Site Map&lt;/a>&lt;/li>
808 &lt;/ul>
809 <mark>&lt;/nav></mark>
810 <mark>&lt;section></mark>
811 <mark>&lt;h1></mark>W3C Updates<mark>&lt;/h1></mark>
812 &lt;ul>
813 &lt;li>&lt;a href="http://twitter.com/W3C">Twitter&lt;/a>&lt;/li>
814 &lt;li>&lt;a href="http://identi.ca/w3c">Identi.ca&lt;/a>&lt;/li>
815 &lt;/ul>
816 <mark>&lt;/section></mark>
817 &lt;p class="copyright">Copyright &copy; 2009 W3C&lt;/p>
818 <mark>&lt;/footer></mark></code></pre>
819
820 <p class=a>&#x2767;
821
822 <h2 id=further-reading>Further Reading</h2>
823
824 <p>Example pages used throughout this chapter:
825
826 <ul>
827 <li><a href=examples/blog-original.html>Original (<abbr>HTML</abbr> 4)</a>
828 <li><a href=examples/blog-html5.html>Modified (<abbr>HTML5</abbr>)</a>
829 </ul>
830
831 <p>On character encoding:
832
833 <ul>
7d5854a @myakura semantics: remove <cite>s as it "must therefore not be used to mark u…
myakura authored
834 <li><a href="http://www.joelonsoftware.com/articles/Unicode.html">The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)</a> by Joel Spolsky
835 <li><a href="http://www.tbray.org/ongoing/When/200x/2003/04/06/Unicode">On the Goodness of Unicode</a>, <a href="http://www.tbray.org/ongoing/When/200x/2003/04/13/Strings">On Character Strings</a>, and <a href="http://www.tbray.org/ongoing/When/200x/2003/04/26/UTF">Characters vs. Bytes</a> by Tim Bray
ce99b34 line endings fiddling
Mark Pilgrim authored
836 </ul>
837
838 <p>On enabling new <abbr>HTML5</abbr> in Internet Explorer:
839
840 <ul>
7d5854a @myakura semantics: remove <cite>s as it "must therefore not be used to mark u…
myakura authored
841 <li><a href=http://xopus.com/devblog/2008/style-unknown-elements.html>How to style unknown elements in IE</a> by Sjoerd Visscher
842 <li><a href=http://ejohn.org/blog/html5-shiv/><abbr>HTML5</abbr> shiv</a> by John Resig
843 <li><a href=http://remysharp.com/2009/01/07/html5-enabling-script/><abbr>HTML5</abbr> enabling script</a> by Remy Sharp
844 <li><a href=http://paulirish.com/2011/the-history-of-the-html5-shiv/>The Story of the <abbr>HTML5</abbr> Shiv</a> by Paul Irish
ce99b34 line endings fiddling
Mark Pilgrim authored
845 </ul>
846
847 <p>On standards modes and doctype sniffing:
848
849 <ul>
7d5854a @myakura semantics: remove <cite>s as it "must therefore not be used to mark u…
myakura authored
850 <li><a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a> by Henri Sivonen. This is the only article you should read on the subject. Any article on doctypes that doesn&#8217;t reference Henri&#8217;s work is guaranteed to be out of date, incomplete, or wrong.
ce99b34 line endings fiddling
Mark Pilgrim authored
851 </ul>
852
04fe83f copyedits
Mark Pilgrim authored
853 <p><abbr>HTML5</abbr>-aware validator:
ce99b34 line endings fiddling
Mark Pilgrim authored
854
855 <ul>
856 <li><a href=http://html5.validator.nu/>html5.validator.nu</a>
857 </ul>
858
859 <p class=a>&#x2767;
860
a312f69 navigation
Mark Pilgrim authored
861 <p>This has been &#8220;What Does It All Mean?&#8221; The <a href=table-of-contents.html>full table of contents</a> has more if you&#8217;d like to keep reading.
862
ce99b34 line endings fiddling
Mark Pilgrim authored
863 <div class=pf>
864 <h4>Did You Know?</h4>
865 <div class=moneybags>
7ff039a now available, apparently
Mark Pilgrim authored
866 <blockquote><p>In association with Google Press, O&#8217;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 &#8220;HTML5: Up &amp; Running,&#8221; and it is available now. This chapter is included in the paid edition.
867 <p>If you liked this chapter and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&amp;tag=diveintomark-20&amp;creativeASIN=0596806027">buy &#8220;HTML5: Up &amp; Running&#8221; with this affiliate link</a> or <a href=http://oreilly.com/catalog/9780596806033>buy an electronic edition directly from O&#8217;Reilly</a>. You&#8217;ll get a book, and I&#8217;ll get a buck. I do not currently accept direct donations.
ce99b34 line endings fiddling
Mark Pilgrim authored
868 </blockquote>
869 </div>
870 </div>
871
29e9fdc updated copyright info and unified title strategy
Mark Pilgrim authored
872 <p class=c>Copyright MMIX&ndash;MMXI <a href=about.html>Mark Pilgrim</a>
ce99b34 line endings fiddling
Mark Pilgrim authored
873
575d210 @jonathantneal Updated the search engine to reflect the new .info URL
jonathantneal authored
874 <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&trade;">&nbsp;<input type=submit name=sa value=Search></div></form>
ce99b34 line endings fiddling
Mark Pilgrim authored
875 <script src=j/jquery.js></script>
876 <script src=j/dih5.js></script>
Something went wrong with that request. Please try again.