Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

.org -> .info #9

Merged
merged 2 commits into from

2 participants

@myakura

This fixes number of links referring to diveintohtml5.org or diveintoaccessibility.org.

@jonathantneal jonathantneal merged commit 3682a88 into from
@myakura

Thanks @jonathantneal !
I've just read #8 that the repo is moving to divintomark/diveintohtml5, would you mind merging the change there? or is it easier for you to me re-PR'ing there?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 26, 2012
  1. @myakura

    diveintohtml5.org -> .info

    myakura authored
  2. @myakura
This page is out of date. Refresh to see the latest.
View
2  canvas.html
@@ -577,7 +577,7 @@ <h2 id=halma>A Complete, Live Example</h2>
<p style="margin-top:0;font-style:normal" class="legend">Moves: <span id=halmamovecount>0</span>
-<p>How does it work? I&#8217;m so glad you asked. I won&#8217;t show <em>all</em> the code here. (You can see it at <a href=examples/halma.js>diveintohtml5.org/examples/halma.js</a>.) I&#8217;ll skip over most of the gameplay code itself, but I want to highlight a few parts of the code that deal with actually drawing on the canvas and responding to mouse clicks on the canvas element.
+<p>How does it work? I&#8217;m so glad you asked. I won&#8217;t show <em>all</em> the code here. (You can see it at <a href=examples/halma.js>diveintohtml5.info/examples/halma.js</a>.) I&#8217;ll skip over most of the gameplay code itself, but I want to highlight a few parts of the code that deal with actually drawing on the canvas and responding to mouse clicks on the canvas element.
<p>During page load, we initialize the game by setting the dimensions of the <code>&lt;canvas></code> itself and storing a reference to its drawing context.
View
4 examples/event.html
@@ -17,7 +17,7 @@
<article>
<h1>Google Developer Day 2009</h1>
<img class="me" width="300" height="200"
- src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
+ src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
<p>Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and &#8220;office hours&#8221; on web technologies like Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.</p>
<p>
@@ -37,7 +37,7 @@
<article>
<h1>ConFoo.ca 2010</h1>
<img class="me" width="256" height="256"
- src="http://diveintohtml5.org/examples/html5-fist.png"
+ src="http://diveintohtml5.info/examples/html5-fist.png"
alt="[clenched fist with 'HTML5' on knuckles]">
<p>PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal are proud to announce the first edition of the Confoo.ca conference. International experts in Java, .Net, PHP, Python and Ruby will present solutions for developers and project managers.</p>
<p>2010 March 10&ndash;12</p>
View
2  examples/person-plus-microdata.html
@@ -24,7 +24,7 @@
</header>
<section itemscope itemtype="http://data-vocabulary.org/Person">
<img itemprop="photo" class="me" width="204" height="250"
- src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
+ src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
<h1>Contact Information</h1>
View
2  examples/person.html
@@ -24,7 +24,7 @@
</header>
<section>
<img class="me" width="204" height="250"
- src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
+ src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
<h1>Contact Information</h1>
View
26 extensibility.html
@@ -163,7 +163,7 @@ <h2 id=person>Marking Up People</h2>
<pre><code>&lt;section>
&lt;img width="204" height="250"
- src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
+ src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
&lt;h1>Contact Information&lt;/h1>
@@ -218,7 +218,7 @@ <h2 id=person>Marking Up People</h2>
<p>The first thing in <a href=examples/person-plus-microdata.html>this sample &#8220;about&#8221; page</a> is a picture of me. Naturally, it&#8217;s marked up with an <code>&lt;img></code> element. To declare that this <code>&lt;img></code> element is my profile picture, all we need to do is add <code>itemprop="photo"</code> to the <code>&lt;img></code> element.
<pre><code> &lt;img <mark>itemprop="photo"</mark> width="204" height="250"
- src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
+ src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]"></code></pre>
<p class=follow>[Follow along! Before: <a href=examples/person.html>person.html</a>, after: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
@@ -230,7 +230,7 @@ <h2 id=person>Marking Up People</h2>
<blockquote>
<p>This person [explicit, from <code>&lt;section itemscope itemtype="..."></code>]
<p>is pictured at [explicit, from <code>&lt;img itemprop="photo"></code>]
-<p><code>http://diveintohtml5.org/examples/2000_05_mark.jpg</code> [implicit, from <code>&lt;img src></code> attribute]
+<p><code>http://diveintohtml5.info/examples/2000_05_mark.jpg</code> [implicit, from <code>&lt;img src></code> attribute]
</blockquote>
<p>The subject only needs to be defined once, by putting <code>itemscope</code> and <code>itemtype</code> attributes on the outermost <code>&lt;section></code> element. The verb is defined by putting the <code>itemprop="photo"</code> attribute on the <code>&lt;img></code> element. The object of the sentence doesn&#8217;t need any special markup at all, because the <a href=#property-values><abbr>HTML5</abbr> microdata data model</a> says that the property value of an <code>&lt;img></code> element is its <code>src</code> attribute.
@@ -372,7 +372,7 @@ <h3 id=rich-snippets>Introducing Google Rich Snippets</h3>
<pre><samp>Item
<b>Type</b>: http://data-vocabulary.org/person
- photo = http://diveintohtml5.org/examples/2000_05_mark.jpg
+ photo = http://diveintohtml5.info/examples/2000_05_mark.jpg
name = Mark Pilgrim
title = Developer advocate
affiliation = Google, Inc.
@@ -399,7 +399,7 @@ <h3 id=rich-snippets>Introducing Google Rich Snippets</h3>
<span class=fakeinfo>Anytown PA - Developer advocate - Google, Inc.</span><br>
<span class=fakeexcerpt>Excerpt from the page will show up here.<br>
Excerpt from the page will show up here.</span><br>
-<span class=fakeurl>diveintohtml5.org/examples/person-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
+<span class=fakeurl>diveintohtml5.info/examples/person-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>
<p>The first line, &#8220;About Mark Pilgrim,&#8221; is actually the title of the page, given in the <code>&lt;title></code> element. That&#8217;s not terribly exciting; Google does that for every page. But the second line is full of information taken directly from the microdata annotations we added to the page. &#8220;Anytown PA&#8221; was part of the <a href=#address>mailing address</a>, marked up with the <code>http://data-vocabulary.org/Address</code> vocabulary. &#8220;Developer advocate&#8221; and &#8220;Google, Inc.&#8221; were two properties from the <code>http://data-vocabulary.org/Person</code> vocabulary (<code>title</code> and <code>affiliation</code>, respectively).
@@ -553,7 +553,7 @@ <h2 id=event>Marking Up Events</h2>
<pre><code>&lt;article>
&lt;h1>Google Developer Day 2009&lt;/h1>
&lt;img width="300" height="200"
- src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
+ src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
&lt;p>
Google Developer Days are a chance to learn about Google
@@ -608,11 +608,11 @@ <h2 id=event>Marking Up Events</h2>
<p>This event listing has a photo, which can be marked up with the <code>photo</code> property. As you would expect, the photo is already marked up with an <code>&lt;img></code> element. Like <a href=#person-photo>the <code>photo</code> property in the Person vocabulary</a>, an Event photo is a <abbr>URL</abbr>. Since the <a href=#property-values><abbr>HTML5</abbr> microdata data model</a> says that the property value of an <code>&lt;img></code> element is its <code>src</code> attribute, the only thing we need to do is add the <code>itemprop</code> attribute to the <code>&lt;img></code> element.
<pre><code> &lt;img <mark>itemprop="photo"</mark> width="300" height="200"
- src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
+ src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]"></code></pre>
<p class=follow>[Follow along! Before: <a href=examples/event.html>event.html</a>, after: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
-<p>In English, this says, &#8220;The photo for this event is at <code>http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg</code>.&#8221;
+<p>In English, this says, &#8220;The photo for this event is at <code>http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg</code>.&#8221;
<p>Next up is a longer description of the event, which is just a pargaraph of freeform text.
@@ -701,13 +701,13 @@ <h2 id=event>Marking Up Events</h2>
<h3 id=event-rich-snippets>The Return of Google Rich Snippets</h3>
-<p><a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/event-plus-microdata.html">According to Google&#8217;s Rich Snippets Testing Tool</a>, this is the information that Google&#8217;s crawlers will glean from <a href=examples/event-plus-microdata.html>our sample event listing page</a>:
+<p><a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.info/examples/event-plus-microdata.html">According to Google&#8217;s Rich Snippets Testing Tool</a>, this is the information that Google&#8217;s crawlers will glean from <a href=examples/event-plus-microdata.html>our sample event listing page</a>:
<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Event
summary = Google Developer Day 2009
eventType = conference
- photo = http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg
+ photo = http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg
description = Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and office hours on web technologies like Goo...
startDate = 2009-11-06T08:30+01:00
endDate = 2009-11-06T20:30+01:00
@@ -747,7 +747,7 @@ <h3 id=event-rich-snippets>The Return of Google Rich Snippets</h3>
<tr><td class=padright><a href=http://code.google.com/intl/cs/events/developerday/2009/home.html>Google Developer Day 2009</a><td class="fakeinfo padright">Fri, Nov 6<td class=fakeinfo>Congress Center, Praha 4, Czech Republic
<tr><td class=padright><a href=http://confoo.ca/en>ConFoo.ca 2010</a><td class="fakeinfo padright">Wed, Mar 10<td class=fakeinfo>Hilton Montreal Bonaventure, Montréal, Québec, Canada
</table>
-<p><span class=fakeurl>diveintohtml5.org/examples/event-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
+<p><span class=fakeurl>diveintohtml5.info/examples/event-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>
<p>After the page title and auto-generated excerpt text, Google starts using the microdata markup we added to the page to display a little table of events. Note the date format: &#8220;Fri, Nov 6.&#8221; That is not a string that appeared anywhere in our <abbr>HTML</abbr> or microdata markup. We used two fully qualified <abbr>ISO</abbr>-formatted strings, <code>2009-11-06T08:30+01:00</code> and <code>2009-11-06T20:30+01:00</code>. Google took those two dates, figured out that they were on the same day, and decided to display a single date in a more friendly format.
@@ -865,7 +865,7 @@ <h2 id=review>Marking Up Reviews</h2>
<p>In English, this says &#8220;the product I&#8217;m reviewing has a rating value of 9 on a scale of 0&ndash;10.&#8221;
-<p>Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the &#8220;raw data&#8221; that the <a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/review-plus-microdata.html">Google Rich Snippets tool extracted from my microdata-enhanced review</a>:
+<p>Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the &#8220;raw data&#8221; that the <a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.info/examples/review-plus-microdata.html">Google Rich Snippets tool extracted from my microdata-enhanced review</a>:
<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Review
@@ -900,7 +900,7 @@ <h2 id=review>Marking Up Reviews</h2>
<span class=fakeinfo><span class=fakestar>&#x2605;&#x2605;&#x2605;&#x2605;&#x2606;</span> Review by Mark Pilgrim - Mar 31, 2010</span><br>
<span class=fakeexcerpt>Excerpt from the page will show up here.<br>
Excerpt from the page will show up here.</span><br>
-<span class=fakeurl>diveintohtml5.org/examples/review-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
+<span class=fakeurl>diveintohtml5.info/examples/review-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>
<p>Angle brackets don&#8217;t impress me much, but I have to admit, that&#8217;s pretty cool.
View
18 history.html
@@ -110,12 +110,12 @@ <h2 id=how>The How</h2>
<pre><code>function swapPhoto(href) {
var req = new XMLHttpRequest();
req.open("GET",
- "http://diveintohtml5.org/examples/history/gallery/" +
+ "http://diveintohtml5.info/examples/history/gallery/" +
href.split("/").pop(),
false);
req.send(null);</code></pre>
-<p>Here is a sample of the markup returned by <code><a href=http://diveintohtml5.org/examples/history/gallery/casey.html>http://diveintohtml5.org/examples/history/gallery/casey.html</a></code>. (You can verify this in your browser by visiting that <abbr>URL</abbr> directly.)
+<p>Here is a sample of the markup returned by <code><a href=examples/history/gallery/casey.html>http://diveintohtml5.info/examples/history/gallery/casey.html</a></code>. (You can verify this in your browser by visiting that <abbr>URL</abbr> directly.)
<pre><code>&lt;p class="photonav">
&lt;a id="photonext" href="brandy.html">Next &amp;gt;&lt;/a>
@@ -170,16 +170,16 @@ <h2 id=how>The How</h2>
<p>To help you visualize this, let&#8217;s step through the entire illusion from the beginning to the end:
<ul>
-<li>User loads <code><a href=http://diveintohtml5.org/examples/history/fer.html>http://diveintohtml5.org/examples/history/fer.html</a></code>, sees story and a photo of Fer.
-<li>User clicks the link labeled &#8220;Next,&#8221; an <code>&lt;a></code> element whose <code>href</code> property is <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code>.
-<li>Instead of navigating <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code> with a full page refresh, the custom <code>click</code> handler on the <code>&lt;a></code> element traps the click and executes its own code.
-<li>Our custom <code>click</code> handler calls the <code>swapPhoto()</code> function, which creates an <code>XMLHttpRequest</code> object to synchronously download the <abbr>HTML</abbr> snippet located at <code><a href=http://diveintohtml5.org/examples/history/gallery/casey.html>http://diveintohtml5.org/examples/history/<strong>gallery</strong>/casey.html</a></code>.
+<li>User loads <code><a href=examples/history/fer.html>http://diveintohtml5.info/examples/history/fer.html</a></code>, sees story and a photo of Fer.
+<li>User clicks the link labeled &#8220;Next,&#8221; an <code>&lt;a></code> element whose <code>href</code> property is <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code>.
+<li>Instead of navigating <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code> with a full page refresh, the custom <code>click</code> handler on the <code>&lt;a></code> element traps the click and executes its own code.
+<li>Our custom <code>click</code> handler calls the <code>swapPhoto()</code> function, which creates an <code>XMLHttpRequest</code> object to synchronously download the <abbr>HTML</abbr> snippet located at <code><a href=examples/history/gallery/casey.html>http://diveintohtml5.info/examples/history/<strong>gallery</strong>/casey.html</a></code>.
<li>The <code>swapPhoto()</code> function sets the <code>innerHTML</code> property of the photo gallery wrapper (an <code>&lt;aside></code> element), thereby replacing the captioned photo of Fer with a captioned photo of Casey.
-<li>Finally, our custom <code>click</code> handler calls the <code>history.pushState()</code> function to manually change the <abbr>URL</abbr> in the browser&#8217;s location bar to <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code>.
+<li>Finally, our custom <code>click</code> handler calls the <code>history.pushState()</code> function to manually change the <abbr>URL</abbr> in the browser&#8217;s location bar to <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code>.
<li>User clicks the browser&#8217;s back button.
-<li>The browser notices that a <abbr>URL</abbr> has been manually pushed onto the history stack (by the <code>history.pushState()</code> function). Instead of navigating to the previous <abbr>URL</abbr> and redrawing the entire page, the browser simply updates the location bar to the previous <abbr>URL</abbr> (<code><a href=http://diveintohtml5.org/examples/history/fer.html>http://diveintohtml5.org/examples/history/fer.html</a></code>) and fires a <code>popstate</code> event.
+<li>The browser notices that a <abbr>URL</abbr> has been manually pushed onto the history stack (by the <code>history.pushState()</code> function). Instead of navigating to the previous <abbr>URL</abbr> and redrawing the entire page, the browser simply updates the location bar to the previous <abbr>URL</abbr> (<code><a href=examples/history/fer.html>http://diveintohtml5.info/examples/history/fer.html</a></code>) and fires a <code>popstate</code> event.
<li>Our custom <code>popstate</code> handler calls the <code>swapPhoto()</code> function again, this time with the previous <abbr>URL</abbr> that by now is already visible in the browser&#8217;s location bar.
-<li>Again using <code>XMLHttpRequest</code>, the <code>swapPhoto()</code> function downloads a snippet of <abbr>HTML</abbr> located at <code><a href=http://diveintohtml5.org/examples/history/gallery/fer.html>http://diveintohtml5.org/examples/history/<strong>gallery</strong>/fer.html</a></code> and sets the <code>innerHTML</code> property of the <code>&lt;aside></code> wrapper element, thereby replacing the captioned photo of Casey with a captioned photo of Fer.
+<li>Again using <code>XMLHttpRequest</code>, the <code>swapPhoto()</code> function downloads a snippet of <abbr>HTML</abbr> located at <code><a href=examples/history/gallery/fer.html>http://diveintohtml5.info/examples/history/<strong>gallery</strong>/fer.html</a></code> and sets the <code>innerHTML</code> property of the <code>&lt;aside></code> wrapper element, thereby replacing the captioned photo of Casey with a captioned photo of Fer.
</ul>
<p>The illusion is complete. All visible evidence (the content of the page, and the <abbr>URL</abbr> in the location bar) suggests to the user that they have navigated forward one page and backward one page. But no full page refresh ever occurred &mdash; it was all a meticulously executed illusion.
View
4 past.html
@@ -103,7 +103,7 @@ <h2 id=history-of-the-img-element>A long digression into how standards are made<
<p>I don&#8217;t much like adding more functionality to the <code>&lt;A></code> tag, but the idea here is to maintain compatibility with browsers that can not honour the <code>INCLUDE</code> parameter. The intention is that browsers which do understand <code>INCLUDE</code>, replace the anchor text (in this case &#8220;See photo&#8221;) with the included document (picture), while older or dumber browsers ignore the <code>INCLUDE</code> tag completely.
</blockquote>
-<p>This proposal was never implemented, although the idea of providing text if an image is missing is <a href="http://diveintoaccessibility.org/day_23_providing_text_equivalents_for_images.html">an important accessibility technique</a> that was missing from Marc&#8217;s initial <code>&lt;IMG></code> proposal. Years later, this feature was bolted on as the <a href="http://www.w3.org/TR/html4/struct/objects.html#h-13.8"><code>&lt;img alt></code> attribute</a>, which Netscape promptly broke by <a href="http://www.cs.tut.fi/~jkorpela/html/alt.html#tooltip">erroneously treating it as a tooltip</a>.
+<p>This proposal was never implemented, although the idea of providing text if an image is missing is <a href="http://diveintoaccessibility.info/day_23_providing_text_equivalents_for_images.html">an important accessibility technique</a> that was missing from Marc&#8217;s initial <code>&lt;IMG></code> proposal. Years later, this feature was bolted on as the <a href="http://www.w3.org/TR/html4/struct/objects.html#h-13.8"><code>&lt;img alt></code> attribute</a>, which Netscape promptly broke by <a href="http://www.cs.tut.fi/~jkorpela/html/alt.html#tooltip">erroneously treating it as a tooltip</a>.
<p>A few hours after Tony posted his message, <a href="http://1997.webhistory.org/www.lists/www-talk.1993q1/0186.html"><cite>Tim Berners-Lee</cite> responded</a>:
@@ -117,7 +117,7 @@ <h2 id=history-of-the-img-element>A long digression into how standards are made<
<p>[I] see that using this as a method for selectable icons means nesting anchors. Hmmm. But I hadn&#8217;t wanted a special tag.
</blockquote>
-<p>This proposal was never implemented, but the <code>rel</code> attribute is <a href="http://diveintohtml5.org/semantics.html#link">still around</a>.
+<p>This proposal was never implemented, but the <code>rel</code> attribute is <a href="semantics.html#link">still around</a>.
<p><a href="http://1997.webhistory.org/www.lists/www-talk.1993q1/0188.html"><cite>Jim Davis</cite> added</a>:
View
2  semantics.html
@@ -702,7 +702,7 @@ <h2 id=nav-element>Navigation</h2>
<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.
-<p>Who cares about the semantics of site navigation? For one, <a href=http://diveintoaccessibility.org/>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.
+<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.
<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.
View
2  video.html
@@ -755,7 +755,7 @@ <h2 id=example>A Complete, Live Example</h2>
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
- <param name="flashvars" value='config={"clip":{"url":"http://diveintohtml5.org/i/pr6.mp4","autoPlay":false,"autoBuffering":true}}' />
+ <param name="flashvars" value='config={"clip":{"url":"http://diveintohtml5.info/i/pr6.mp4","autoPlay":false,"autoBuffering":true}}' />
<p>Download video as <a href=i/pr6.mp4>MP4</a>, <a href=i/pr6.webm>WebM</a>, or <a href=i/pr6.ogv>Ogg</a>.</p>
</object>
</video>
Something went wrong with that request. Please try again.