[html5] r7709 - [e] (0) Add some examples of outlines. Fixing https://www.w3.org/Bugs/Public/sho [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Feb 7 23:06:48 PST 2013
Author: ianh
Date: 2013-02-07 23:06:47 -0800 (Thu, 07 Feb 2013)
New Revision: 7709
Modified:
complete.html
index
source
Log:
[e] (0) Add some examples of outlines.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=20068
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2013-02-08 03:47:46 UTC (rev 7708)
+++ complete.html 2013-02-08 07:06:47 UTC (rev 7709)
@@ -481,7 +481,8 @@
<li><a href=#the-address-element><span class=secno>4.4.10 </span>The <code>address</code> element</a></li>
<li><a href=#headings-and-sections><span class=secno>4.4.11 </span>Headings and sections</a>
<ol>
- <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></li>
+ <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></li>
+ <li><a href=#sample-outlines><span class=secno>4.4.11.2 </span>Sample outlines</a></ol></li>
<li><a href=#usage-summary-0><span class=secno>4.4.12 </span>Usage summary</a>
<ol>
<li><a href=#article-or-section?><span class=secno>4.4.12.1 </span>Article or section?</a></ol></ol></li>
@@ -17539,7 +17540,293 @@
</div>
+ <h5 id=sample-outlines><span class=secno>4.4.11.2 </span>Sample outlines</h5>
+ <p><i>This section is non-normative.</i></p>
+
+ <div class=example>
+
+ <p>The following document shows a straight-forward application of the <a href=#outline>outline</a>
+ algorithm. First, here is the document, which is a book with very short chapters and
+ subsections:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<h2>Earning money</h2>
+<p>Earning money is good.</p>
+<h3>Getting a job</h3>
+<p>To earn money you typically need a job.</p>
+<h2>Spending money</h2>
+<p>Spending is what money is mainly used for.</p>
+<h3>Cheap things</h3>
+<p>Buying cheap things often not cost-effective.</p>
+<h3>Expensive things</h3>
+<p>The most expensive thing is often not the most cost-effective either.</p>
+<h2>Investing money</h2>
+<p>You can lend your money to other people.</p>
+<h2>Losing money</h2>
+<p>If you spend money or invest money, sooner or later you will lose money.
+<h3>Poor judgement</h3>
+<p>Usually if you lose money it's because you made a mistake.</p></pre>
+
+ <p>This book would form the following outline:</p>
+
+ <ol class=brief><li> The Tax Book
+ <ol class=brief><li> Earning money
+ <ol class=brief><li> Getting a job
+ </ol><li> Spending money
+ <ol class=brief><li> Cheap things
+ <li> Expensive things
+ </ol><li> Investing money
+ <li> Losing money
+ <ol class=brief><li> Poor judgement
+ </ol></ol></ol><p>Notice that the <code><a href=#the-title-element>title</a></code> element does not participate in the outline.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here is a similar document, but this time using <code><a href=#the-section-element>section</a></code> elements to get the same
+ effect:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<section>
+ <h1>Earning money</h1>
+ <p>Earning money is good.</p>
+ <section>
+ <h1>Getting a job</h1>
+ <p>To earn money you typically need a job.</p>
+ </section>
+</section>
+<section>
+ <h1>Spending money</h1>
+ <p>Spending is what money is mainly used for.</p>
+ <section>
+ <h1>Cheap things</h1>
+ <p>Buying cheap things often not cost-effective.</p>
+ </section>
+ <section>
+ <h1>Expensive things</h1>
+ <p>The most expensive thing is often not the most cost-effective either.</p>
+ </section>
+</section>
+<section>
+ <h1>Investing money</h1>
+ <p>You can lend your money to other people.</p>
+</section>
+<section>
+ <h1>Losing money</h1>
+ <p>If you spend money or invest money, sooner or later you will lose money.
+ <section>
+ <h1>Poor judgement</h1>
+ <p>Usually if you lose money it's because you made a mistake.</p>
+ </section>
+</section></pre>
+
+ <p>This book would form the same outline:</p>
+
+ <ol class=brief><li> The Tax Book
+ <ol class=brief><li> Earning money
+ <ol class=brief><li> Getting a job
+ </ol><li> Spending money
+ <ol class=brief><li> Cheap things
+ <li> Expensive things
+ </ol><li> Investing money
+ <li> Losing money
+ <ol class=brief><li> Poor judgement
+ </ol></ol></ol></div>
+
+ <div class=example>
+
+ <p>A document can contain multiple top-level headings:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<h1>Apples</h1>
+<p>Pomaceous.</p>
+<h1>Bananas</h1>
+<p>Edible.</p>
+<h1>Carambola</h1>
+<p>Star.</p></pre>
+
+ <p>This would form the following simple outline consisting of three top-level sections:</p>
+
+ <ol class=brief><li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol><p>Effectively, the <code><a href=#the-body-element>body</a></code> element is split into three.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Mixing both the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> model and the
+ <code><a href=#the-section-element>section</a></code>/<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> model can lead to some unintuitive results.</p>
+
+ <p>Consider for example the following, which is just the previous example but with the contents
+ of the (implied) <code><a href=#the-body-element>body</a></code> wrapped in a <code><a href=#the-section-element>section</a></code>:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<section>
+ <h1>Apples</h1>
+ <p>Pomaceous.</p>
+ <h1>Bananas</h1>
+ <p>Edible.</p>
+ <h1>Carambola</h1>
+ <p>Star.</p>
+</section></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> <i>(untitled page)</i>
+ <ol class=brief><li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol></ol><p>This result is described as <i>unintuitive</i> because it results in three subsections even
+ though there's only one <code><a href=#the-section-element>section</a></code> element. Effectively, the <code><a href=#the-section-element>section</a></code> is
+ split into three, just like the implied <code><a href=#the-body-element>body</a></code> element in the previous example.</p>
+
+ <p>(In this example, "<i>(untitled page)</i>" is the implied heading for the <code><a href=#the-body-element>body</a></code>
+ element, since it has no explicit heading.)</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Headings never rise above other sections. Thus, in the following example, the first
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> does not actually describe the page header; it describes the header for the
+ second half of the page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Feathers on The Site of Encyclopedic Knowledge</title>
+<section>
+ <h1>A plea from our caretakers</h1>
+ <p>Please, we beg of you, send help! We're stuck in the server room!</p>
+</section>
+<h1>Feathers</h1>
+<p>Epidermal growths.</p>
+</pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> <i>(untitled page)</i>
+ <ol class=brief><li> A plea from our caretakers
+ </ol><li> Feathers
+ </ol></div>
+
+ <div class=example>
+
+ <p>Thus, when an <code><a href=#the-article-element>article</a></code> element starts with a <code><a href=#the-nav-element>nav</a></code> block and only later
+ has its heading, the result is that the <code><a href=#the-nav-element>nav</a></code> block is not part of the same section as
+ the rest of the <code><a href=#the-article-element>article</a></code> in the outline. For instance, take this document:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>We're adopting a child! — Ray's blog</title>
+<h1>Ray's blog</h1>
+<article>
+ <header>
+ <nav>
+ <a href="?t=-1d">Yesterday</a>;
+ <a href="?t=-7d">Last week</a>;
+ <a href="?t=-1m">Last month</a>
+ </nav>
+ <h1>We're adopting a child!</h1>
+ </header>
+ <main>
+ <p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.</p>
+ </main>
+</article></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> Ray's blog
+ <ol class=brief><li> <i>Untitled article</i>
+ <ol class=brief><li> <i>Untitled navigation section</i>
+ </ol><li> We're adopting a child!
+ </ol></ol><p>Also worthy of note in this example is that the <code><a href=#the-header-element>header</a></code> and <code><a href=#the-main-element>main</a></code>
+ elements have no effect whatsoever on the document outline.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>The <code><a href=#the-hgroup-element>hgroup</a></code> element can be used for subheadings. For example:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Chronotype: CS Student</title>
+<hgroup>
+ <h1> The morning </h1>
+ <h2> 06:00 to 12:00 </h2>
+</hgroup>
+<p>We sleep.</p>
+<hgroup>
+ <h1> The afternoon </h1>
+ <h2> 12:00 to 18:00 </h2>
+</hgroup>
+<p>We study.</p>
+<hgroup>
+ <h2>Additional Commentary</h2>
+ <h3>Because not all this is necessarily true</h3>
+ <h6>Ok it's almost certainly not true</h6>
+</hgroup>
+<p>Yeah we probably play, rather than study.</p>
+<hgroup>
+ <h1> The evening </h1>
+ <h2> 18:00 to 00:00 </h2>
+</hgroup>
+<p>We play.</p>
+<hgroup>
+ <h1> The night </h1>
+ <h2> 00:00 to 06:00 </h2>
+</hgroup>
+<p>We play some more.</p></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> The morning <small>06:00 to 12:00</small>
+ <li> The afternoon <small>12:00 to 18:00</small>
+ <ol class=brief><li> Additional Commentary <small>Because not all this is necessarily true <small>Ok it's almost certainly not true</small></small>
+ </ol><li> The evening <small>18:00 to 00:00</small>
+ <li> The night <small>00:00 to 06:00</small>
+ </ol><p>Exactly how this is represented by user agents, as most interface issues, is left as a matter
+ of implementation preference, but the key part is that the <code><a href=#the-hgroup-element>hgroup</a></code>'s descendant
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements are what form the element's heading. Thus, the
+ following would be equally valid:</p>
+
+ <ol class=brief><li> The morning — 06:00 to 12:00
+ <li> The afternoon — 12:00 to 18:00
+ <ol class=brief><li> Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
+ </ol><li> The evening — 18:00 to 00:00
+ <li> The night — 00:00 to 06:00
+ </ol><p>But so would the following:</p>
+
+ <ol class=brief><li> The morning
+ <li> The afternoon
+ <ol class=brief><li> Additional Commentary
+ </ol><li> The evening
+ <li> The night
+ </ol><p>The following would also be valid, though maybe less practical in most contexts:</p>
+
+ <ol class=brief><li> <p>The morning
+ <p> 06:00 to 12:00
+ <li> <p>The afternoon
+ <p> 12:00 to 18:00
+ <ol class=brief><li> <p> Additional Commentary
+ <p> Because not all this is necessarily true
+ <p> Ok it's almost certainly not true
+ </ol><li> <p>The evening
+ <p> 18:00 to 00:00
+ <li> <p>The night
+ <p> 00:00 to 06:00
+ </ol></div>
+
+
<h4 id=usage-summary-0><span class=secno>4.4.12 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
Modified: index
===================================================================
--- index 2013-02-08 03:47:46 UTC (rev 7708)
+++ index 2013-02-08 07:06:47 UTC (rev 7709)
@@ -481,7 +481,8 @@
<li><a href=#the-address-element><span class=secno>4.4.10 </span>The <code>address</code> element</a></li>
<li><a href=#headings-and-sections><span class=secno>4.4.11 </span>Headings and sections</a>
<ol>
- <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></li>
+ <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></li>
+ <li><a href=#sample-outlines><span class=secno>4.4.11.2 </span>Sample outlines</a></ol></li>
<li><a href=#usage-summary-0><span class=secno>4.4.12 </span>Usage summary</a>
<ol>
<li><a href=#article-or-section?><span class=secno>4.4.12.1 </span>Article or section?</a></ol></ol></li>
@@ -17539,7 +17540,293 @@
</div>
+ <h5 id=sample-outlines><span class=secno>4.4.11.2 </span>Sample outlines</h5>
+ <p><i>This section is non-normative.</i></p>
+
+ <div class=example>
+
+ <p>The following document shows a straight-forward application of the <a href=#outline>outline</a>
+ algorithm. First, here is the document, which is a book with very short chapters and
+ subsections:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<h2>Earning money</h2>
+<p>Earning money is good.</p>
+<h3>Getting a job</h3>
+<p>To earn money you typically need a job.</p>
+<h2>Spending money</h2>
+<p>Spending is what money is mainly used for.</p>
+<h3>Cheap things</h3>
+<p>Buying cheap things often not cost-effective.</p>
+<h3>Expensive things</h3>
+<p>The most expensive thing is often not the most cost-effective either.</p>
+<h2>Investing money</h2>
+<p>You can lend your money to other people.</p>
+<h2>Losing money</h2>
+<p>If you spend money or invest money, sooner or later you will lose money.
+<h3>Poor judgement</h3>
+<p>Usually if you lose money it's because you made a mistake.</p></pre>
+
+ <p>This book would form the following outline:</p>
+
+ <ol class=brief><li> The Tax Book
+ <ol class=brief><li> Earning money
+ <ol class=brief><li> Getting a job
+ </ol><li> Spending money
+ <ol class=brief><li> Cheap things
+ <li> Expensive things
+ </ol><li> Investing money
+ <li> Losing money
+ <ol class=brief><li> Poor judgement
+ </ol></ol></ol><p>Notice that the <code><a href=#the-title-element>title</a></code> element does not participate in the outline.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Here is a similar document, but this time using <code><a href=#the-section-element>section</a></code> elements to get the same
+ effect:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<section>
+ <h1>Earning money</h1>
+ <p>Earning money is good.</p>
+ <section>
+ <h1>Getting a job</h1>
+ <p>To earn money you typically need a job.</p>
+ </section>
+</section>
+<section>
+ <h1>Spending money</h1>
+ <p>Spending is what money is mainly used for.</p>
+ <section>
+ <h1>Cheap things</h1>
+ <p>Buying cheap things often not cost-effective.</p>
+ </section>
+ <section>
+ <h1>Expensive things</h1>
+ <p>The most expensive thing is often not the most cost-effective either.</p>
+ </section>
+</section>
+<section>
+ <h1>Investing money</h1>
+ <p>You can lend your money to other people.</p>
+</section>
+<section>
+ <h1>Losing money</h1>
+ <p>If you spend money or invest money, sooner or later you will lose money.
+ <section>
+ <h1>Poor judgement</h1>
+ <p>Usually if you lose money it's because you made a mistake.</p>
+ </section>
+</section></pre>
+
+ <p>This book would form the same outline:</p>
+
+ <ol class=brief><li> The Tax Book
+ <ol class=brief><li> Earning money
+ <ol class=brief><li> Getting a job
+ </ol><li> Spending money
+ <ol class=brief><li> Cheap things
+ <li> Expensive things
+ </ol><li> Investing money
+ <li> Losing money
+ <ol class=brief><li> Poor judgement
+ </ol></ol></ol></div>
+
+ <div class=example>
+
+ <p>A document can contain multiple top-level headings:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<h1>Apples</h1>
+<p>Pomaceous.</p>
+<h1>Bananas</h1>
+<p>Edible.</p>
+<h1>Carambola</h1>
+<p>Star.</p></pre>
+
+ <p>This would form the following simple outline consisting of three top-level sections:</p>
+
+ <ol class=brief><li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol><p>Effectively, the <code><a href=#the-body-element>body</a></code> element is split into three.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Mixing both the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> model and the
+ <code><a href=#the-section-element>section</a></code>/<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> model can lead to some unintuitive results.</p>
+
+ <p>Consider for example the following, which is just the previous example but with the contents
+ of the (implied) <code><a href=#the-body-element>body</a></code> wrapped in a <code><a href=#the-section-element>section</a></code>:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<section>
+ <h1>Apples</h1>
+ <p>Pomaceous.</p>
+ <h1>Bananas</h1>
+ <p>Edible.</p>
+ <h1>Carambola</h1>
+ <p>Star.</p>
+</section></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> <i>(untitled page)</i>
+ <ol class=brief><li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol></ol><p>This result is described as <i>unintuitive</i> because it results in three subsections even
+ though there's only one <code><a href=#the-section-element>section</a></code> element. Effectively, the <code><a href=#the-section-element>section</a></code> is
+ split into three, just like the implied <code><a href=#the-body-element>body</a></code> element in the previous example.</p>
+
+ <p>(In this example, "<i>(untitled page)</i>" is the implied heading for the <code><a href=#the-body-element>body</a></code>
+ element, since it has no explicit heading.)</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Headings never rise above other sections. Thus, in the following example, the first
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> does not actually describe the page header; it describes the header for the
+ second half of the page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Feathers on The Site of Encyclopedic Knowledge</title>
+<section>
+ <h1>A plea from our caretakers</h1>
+ <p>Please, we beg of you, send help! We're stuck in the server room!</p>
+</section>
+<h1>Feathers</h1>
+<p>Epidermal growths.</p>
+</pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> <i>(untitled page)</i>
+ <ol class=brief><li> A plea from our caretakers
+ </ol><li> Feathers
+ </ol></div>
+
+ <div class=example>
+
+ <p>Thus, when an <code><a href=#the-article-element>article</a></code> element starts with a <code><a href=#the-nav-element>nav</a></code> block and only later
+ has its heading, the result is that the <code><a href=#the-nav-element>nav</a></code> block is not part of the same section as
+ the rest of the <code><a href=#the-article-element>article</a></code> in the outline. For instance, take this document:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>We're adopting a child! — Ray's blog</title>
+<h1>Ray's blog</h1>
+<article>
+ <header>
+ <nav>
+ <a href="?t=-1d">Yesterday</a>;
+ <a href="?t=-7d">Last week</a>;
+ <a href="?t=-1m">Last month</a>
+ </nav>
+ <h1>We're adopting a child!</h1>
+ </header>
+ <main>
+ <p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.</p>
+ </main>
+</article></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> Ray's blog
+ <ol class=brief><li> <i>Untitled article</i>
+ <ol class=brief><li> <i>Untitled navigation section</i>
+ </ol><li> We're adopting a child!
+ </ol></ol><p>Also worthy of note in this example is that the <code><a href=#the-header-element>header</a></code> and <code><a href=#the-main-element>main</a></code>
+ elements have no effect whatsoever on the document outline.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>The <code><a href=#the-hgroup-element>hgroup</a></code> element can be used for subheadings. For example:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Chronotype: CS Student</title>
+<hgroup>
+ <h1> The morning </h1>
+ <h2> 06:00 to 12:00 </h2>
+</hgroup>
+<p>We sleep.</p>
+<hgroup>
+ <h1> The afternoon </h1>
+ <h2> 12:00 to 18:00 </h2>
+</hgroup>
+<p>We study.</p>
+<hgroup>
+ <h2>Additional Commentary</h2>
+ <h3>Because not all this is necessarily true</h3>
+ <h6>Ok it's almost certainly not true</h6>
+</hgroup>
+<p>Yeah we probably play, rather than study.</p>
+<hgroup>
+ <h1> The evening </h1>
+ <h2> 18:00 to 00:00 </h2>
+</hgroup>
+<p>We play.</p>
+<hgroup>
+ <h1> The night </h1>
+ <h2> 00:00 to 06:00 </h2>
+</hgroup>
+<p>We play some more.</p></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class=brief><li> The morning <small>06:00 to 12:00</small>
+ <li> The afternoon <small>12:00 to 18:00</small>
+ <ol class=brief><li> Additional Commentary <small>Because not all this is necessarily true <small>Ok it's almost certainly not true</small></small>
+ </ol><li> The evening <small>18:00 to 00:00</small>
+ <li> The night <small>00:00 to 06:00</small>
+ </ol><p>Exactly how this is represented by user agents, as most interface issues, is left as a matter
+ of implementation preference, but the key part is that the <code><a href=#the-hgroup-element>hgroup</a></code>'s descendant
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements are what form the element's heading. Thus, the
+ following would be equally valid:</p>
+
+ <ol class=brief><li> The morning — 06:00 to 12:00
+ <li> The afternoon — 12:00 to 18:00
+ <ol class=brief><li> Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
+ </ol><li> The evening — 18:00 to 00:00
+ <li> The night — 00:00 to 06:00
+ </ol><p>But so would the following:</p>
+
+ <ol class=brief><li> The morning
+ <li> The afternoon
+ <ol class=brief><li> Additional Commentary
+ </ol><li> The evening
+ <li> The night
+ </ol><p>The following would also be valid, though maybe less practical in most contexts:</p>
+
+ <ol class=brief><li> <p>The morning
+ <p> 06:00 to 12:00
+ <li> <p>The afternoon
+ <p> 12:00 to 18:00
+ <ol class=brief><li> <p> Additional Commentary
+ <p> Because not all this is necessarily true
+ <p> Ok it's almost certainly not true
+ </ol><li> <p>The evening
+ <p> 18:00 to 00:00
+ <li> <p>The night
+ <p> 00:00 to 06:00
+ </ol></div>
+
+
<h4 id=usage-summary-0><span class=secno>4.4.12 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
Modified: source
===================================================================
--- source 2013-02-08 03:47:46 UTC (rev 7708)
+++ source 2013-02-08 07:06:47 UTC (rev 7709)
@@ -18413,7 +18413,355 @@
</div>
+ <h5>Sample outlines</h5>
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <div class="example">
+
+ <p>The following document shows a straight-forward application of the <span>outline</span>
+ algorithm. First, here is the document, which is a book with very short chapters and
+ subsections:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<h2>Earning money</h2>
+<p>Earning money is good.</p>
+<h3>Getting a job</h3>
+<p>To earn money you typically need a job.</p>
+<h2>Spending money</h2>
+<p>Spending is what money is mainly used for.</p>
+<h3>Cheap things</h3>
+<p>Buying cheap things often not cost-effective.</p>
+<h3>Expensive things</h3>
+<p>The most expensive thing is often not the most cost-effective either.</p>
+<h2>Investing money</h2>
+<p>You can lend your money to other people.</p>
+<h2>Losing money</h2>
+<p>If you spend money or invest money, sooner or later you will lose money.
+<h3>Poor judgement</h3>
+<p>Usually if you lose money it's because you made a mistake.</p></pre>
+
+ <p>This book would form the following outline:</p>
+
+ <ol class="brief">
+ <li> The Tax Book
+ <ol class="brief">
+ <li> Earning money
+ <ol class="brief">
+ <li> Getting a job
+ </ol>
+ <li> Spending money
+ <ol class="brief">
+ <li> Cheap things
+ <li> Expensive things
+ </ol>
+ <li> Investing money
+ <li> Losing money
+ <ol class="brief">
+ <li> Poor judgement
+ </ol>
+ </ol>
+ </ol>
+
+ <p>Notice that the <code>title</code> element does not participate in the outline.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>Here is a similar document, but this time using <code>section</code> elements to get the same
+ effect:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>The Tax Book (all in one page)</title>
+<h1>The Tax Book</h1>
+<section>
+ <h1>Earning money</h1>
+ <p>Earning money is good.</p>
+ <section>
+ <h1>Getting a job</h1>
+ <p>To earn money you typically need a job.</p>
+ </section>
+</section>
+<section>
+ <h1>Spending money</h1>
+ <p>Spending is what money is mainly used for.</p>
+ <section>
+ <h1>Cheap things</h1>
+ <p>Buying cheap things often not cost-effective.</p>
+ </section>
+ <section>
+ <h1>Expensive things</h1>
+ <p>The most expensive thing is often not the most cost-effective either.</p>
+ </section>
+</section>
+<section>
+ <h1>Investing money</h1>
+ <p>You can lend your money to other people.</p>
+</section>
+<section>
+ <h1>Losing money</h1>
+ <p>If you spend money or invest money, sooner or later you will lose money.
+ <section>
+ <h1>Poor judgement</h1>
+ <p>Usually if you lose money it's because you made a mistake.</p>
+ </section>
+</section></pre>
+
+ <p>This book would form the same outline:</p>
+
+ <ol class="brief">
+ <li> The Tax Book
+ <ol class="brief">
+ <li> Earning money
+ <ol class="brief">
+ <li> Getting a job
+ </ol>
+ <li> Spending money
+ <ol class="brief">
+ <li> Cheap things
+ <li> Expensive things
+ </ol>
+ <li> Investing money
+ <li> Losing money
+ <ol class="brief">
+ <li> Poor judgement
+ </ol>
+ </ol>
+ </ol>
+
+ </div>
+
+ <div class="example">
+
+ <p>A document can contain multiple top-level headings:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<h1>Apples</h1>
+<p>Pomaceous.</p>
+<h1>Bananas</h1>
+<p>Edible.</p>
+<h1>Carambola</h1>
+<p>Star.</p></pre>
+
+ <p>This would form the following simple outline consisting of three top-level sections:</p>
+
+ <ol class="brief">
+ <li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol>
+
+ <p>Effectively, the <code>body</code> element is split into three.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>Mixing both the <code>h1</code>–<code>h6</code> model and the
+ <code>section</code>/<code>h1</code> model can lead to some unintuitive results.</p>
+
+ <p>Consider for example the following, which is just the previous example but with the contents
+ of the (implied) <code>body</code> wrapped in a <code>section</code>:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Alphabetic Fruit</title>
+<section>
+ <h1>Apples</h1>
+ <p>Pomaceous.</p>
+ <h1>Bananas</h1>
+ <p>Edible.</p>
+ <h1>Carambola</h1>
+ <p>Star.</p>
+</section></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class="brief">
+ <li> <i>(untitled page)</i>
+ <ol class="brief">
+ <li> Apples
+ <li> Bananas
+ <li> Carambola
+ </ol>
+ </ol>
+
+ <p>This result is described as <i>unintuitive</i> because it results in three subsections even
+ though there's only one <code>section</code> element. Effectively, the <code>section</code> is
+ split into three, just like the implied <code>body</code> element in the previous example.</p>
+
+ <p>(In this example, "<i>(untitled page)</i>" is the implied heading for the <code>body</code>
+ element, since it has no explicit heading.)</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>Headings never rise above other sections. Thus, in the following example, the first
+ <code>h1</code> does not actually describe the page header; it describes the header for the
+ second half of the page:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Feathers on The Site of Encyclopedic Knowledge</title>
+<section>
+ <h1>A plea from our caretakers</h1>
+ <p>Please, we beg of you, send help! We're stuck in the server room!</p>
+</section>
+<h1>Feathers</h1>
+<p>Epidermal growths.</p>
+</pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class="brief">
+ <li> <i>(untitled page)</i>
+ <ol class="brief">
+ <li> A plea from our caretakers
+ </ol>
+ <li> Feathers
+ </ol>
+
+ </div>
+
+ <div class="example">
+
+ <p>Thus, when an <code>article</code> element starts with a <code>nav</code> block and only later
+ has its heading, the result is that the <code>nav</code> block is not part of the same section as
+ the rest of the <code>article</code> in the outline. For instance, take this document:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>We're adopting a child! — Ray's blog</title>
+<h1>Ray's blog</h1>
+<article>
+ <header>
+ <nav>
+ <a href="?t=-1d">Yesterday</a>;
+ <a href="?t=-7d">Last week</a>;
+ <a href="?t=-1m">Last month</a>
+ </nav>
+ <h1>We're adopting a child!</h1>
+ </header>
+ <main>
+ <p>As of today, Janine and I have signed the papers to become
+ the proud parents of baby Diane! We've been looking forward to
+ this day for weeks.</p>
+ </main>
+</article></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class="brief">
+ <li> Ray's blog
+ <ol class="brief">
+ <li> <i>Untitled article</i>
+ <ol class="brief">
+ <li> <i>Untitled navigation section</i>
+ </ol>
+ <li> We're adopting a child!
+ </ol>
+ </ol>
+
+ <p>Also worthy of note in this example is that the <code>header</code> and <code>main</code>
+ elements have no effect whatsoever on the document outline.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>The <code>hgroup</code> element can be used for subheadings. For example:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Chronotype: CS Student</title>
+<hgroup>
+ <h1> The morning </h1>
+ <h2> 06:00 to 12:00 </h2>
+</hgroup>
+<p>We sleep.</p>
+<hgroup>
+ <h1> The afternoon </h1>
+ <h2> 12:00 to 18:00 </h2>
+</hgroup>
+<p>We study.</p>
+<hgroup>
+ <h2>Additional Commentary</h2>
+ <h3>Because not all this is necessarily true</h3>
+ <h6>Ok it's almost certainly not true</h6>
+</hgroup>
+<p>Yeah we probably play, rather than study.</p>
+<hgroup>
+ <h1> The evening </h1>
+ <h2> 18:00 to 00:00 </h2>
+</hgroup>
+<p>We play.</p>
+<hgroup>
+ <h1> The night </h1>
+ <h2> 00:00 to 06:00 </h2>
+</hgroup>
+<p>We play some more.</p></pre>
+
+ <p>The resulting outline would be:</p>
+
+ <ol class="brief">
+ <li> The morning <small>06:00 to 12:00</small>
+ <li> The afternoon <small>12:00 to 18:00</small>
+ <ol class="brief">
+ <li> Additional Commentary <small>Because not all this is necessarily true <small>Ok it's almost certainly not true</small></small>
+ </ol>
+ <li> The evening <small>18:00 to 00:00</small>
+ <li> The night <small>00:00 to 06:00</small>
+ </ol>
+
+ <p>Exactly how this is represented by user agents, as most interface issues, is left as a matter
+ of implementation preference, but the key part is that the <code>hgroup</code>'s descendant
+ <code>h1</code>–<code>h6</code> elements are what form the element's heading. Thus, the
+ following would be equally valid:</p>
+
+ <ol class="brief">
+ <li> The morning — 06:00 to 12:00
+ <li> The afternoon — 12:00 to 18:00
+ <ol class="brief">
+ <li> Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
+ </ol>
+ <li> The evening — 18:00 to 00:00
+ <li> The night — 00:00 to 06:00
+ </ol>
+
+ <p>But so would the following:</p>
+
+ <ol class="brief">
+ <li> The morning
+ <li> The afternoon
+ <ol class="brief">
+ <li> Additional Commentary
+ </ol>
+ <li> The evening
+ <li> The night
+ </ol>
+
+ <p>The following would also be valid, though maybe less practical in most contexts:</p>
+
+ <ol class="brief">
+ <li> <p>The morning
+ <p> 06:00 to 12:00
+ <li> <p>The afternoon
+ <p> 12:00 to 18:00
+ <ol class="brief">
+ <li> <p> Additional Commentary
+ <p> Because not all this is necessarily true
+ <p> Ok it's almost certainly not true
+ </ol>
+ <li> <p>The evening
+ <p> 18:00 to 00:00
+ <li> <p>The night
+ <p> 00:00 to 06:00
+ </ol>
+
+ </div>
+
+
<h4>Usage summary</h4>
<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
More information about the Commit-Watchers
mailing list