Skip to content
Permalink
Browse files

[e] (0) Tweak some text and add an example to try to clarify some con…

…fusion.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=14058

git-svn-id: http://svn.whatwg.org/webapps@6704 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Oct 19, 2011
1 parent 2bfc95e commit 6fb8411b21cbf03558cccbbf514de54954ed31ce
Showing with 156 additions and 9 deletions.
  1. +52 −3 complete.html
  2. +52 −3 index
  3. +52 −3 source

<p class=note id=use-div-for-wrappers>The <code><a href=#the-section-element>section</a></code>
element is not a generic container element. When an element is
needed for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element
instead. A general rule is that the <code><a href=#the-section-element>section</a></code> element is
needed only for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element instead.
A general rule is that the <code><a href=#the-section-element>section</a></code> element is
appropriate only if the element's contents would be listed
explicitly in the document's <a href=#outline>outline</a>.</p>


</div>

<div class=example>

<p>In this example, a book author has marked up some sections as
chapters and some as appendices, and uses CSS to style the headers
in these two classes of section differently. The whole book is
wrapped in an <code><a href=#the-article-element>article</a></code> element as part of an even
larger document containing other books.</p>

<pre>&lt;article class="book"&gt;
&lt;style&gt;
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
&lt;/style&gt;
&lt;header&gt;
&lt;hgroup&gt;
&lt;h1&gt;My Book&lt;/h1&gt;
&lt;h2&gt;A sample with not much content&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;p&gt;&lt;small&gt;Published by Dummy Publicorp Ltd.&lt;/small&gt;&lt;/p&gt;
&lt;/header&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;My First Chapter&lt;/h1&gt;
&lt;p&gt;This is the first of my chapters. It doesn't say much.&lt;/p&gt;
&lt;p&gt;But it has two paragraphs!&lt;/p&gt;
&lt;/section&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;It Continutes: The Second Chapter&lt;/h1&gt;
&lt;p&gt;Bla dee bla, dee bla dee bla. Boom.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;Chapter Three: A Further Example&lt;/h1&gt;
&lt;p&gt;It's not like a battle between brightness and earthtones would go
unnoticed.&lt;/p&gt;
&lt;p&gt;But it might ruin my story.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="appendix"&gt;
&lt;h1&gt;Appendix A: Overview of Examples&lt;/h1&gt;
&lt;p&gt;These are demonstrations.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="appendix"&gt;
&lt;h1&gt;Appendix B: Some Closing Remarks&lt;/h1&gt;
&lt;p&gt;Hopefully this long example shows that you &lt;em&gt;can&lt;/em&gt; style
sections, so long as they are used to indicate actual sections.&lt;/p&gt;
&lt;/section&gt;
&lt;/article&gt;</pre>

</div>



<h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>
55 index

<p class=note id=use-div-for-wrappers>The <code><a href=#the-section-element>section</a></code>
element is not a generic container element. When an element is
needed for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element
instead. A general rule is that the <code><a href=#the-section-element>section</a></code> element is
needed only for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code><a href=#the-div-element>div</a></code> element instead.
A general rule is that the <code><a href=#the-section-element>section</a></code> element is
appropriate only if the element's contents would be listed
explicitly in the document's <a href=#outline>outline</a>.</p>


</div>

<div class=example>

<p>In this example, a book author has marked up some sections as
chapters and some as appendices, and uses CSS to style the headers
in these two classes of section differently. The whole book is
wrapped in an <code><a href=#the-article-element>article</a></code> element as part of an even
larger document containing other books.</p>

<pre>&lt;article class="book"&gt;
&lt;style&gt;
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
&lt;/style&gt;
&lt;header&gt;
&lt;hgroup&gt;
&lt;h1&gt;My Book&lt;/h1&gt;
&lt;h2&gt;A sample with not much content&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;p&gt;&lt;small&gt;Published by Dummy Publicorp Ltd.&lt;/small&gt;&lt;/p&gt;
&lt;/header&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;My First Chapter&lt;/h1&gt;
&lt;p&gt;This is the first of my chapters. It doesn't say much.&lt;/p&gt;
&lt;p&gt;But it has two paragraphs!&lt;/p&gt;
&lt;/section&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;It Continutes: The Second Chapter&lt;/h1&gt;
&lt;p&gt;Bla dee bla, dee bla dee bla. Boom.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="chapter"&gt;
&lt;h1&gt;Chapter Three: A Further Example&lt;/h1&gt;
&lt;p&gt;It's not like a battle between brightness and earthtones would go
unnoticed.&lt;/p&gt;
&lt;p&gt;But it might ruin my story.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="appendix"&gt;
&lt;h1&gt;Appendix A: Overview of Examples&lt;/h1&gt;
&lt;p&gt;These are demonstrations.&lt;/p&gt;
&lt;/section&gt;
&lt;section class="appendix"&gt;
&lt;h1&gt;Appendix B: Some Closing Remarks&lt;/h1&gt;
&lt;p&gt;Hopefully this long example shows that you &lt;em&gt;can&lt;/em&gt; style
sections, so long as they are used to indicate actual sections.&lt;/p&gt;
&lt;/section&gt;
&lt;/article&gt;</pre>

</div>



<h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>
55 source

<p class="note" id="use-div-for-wrappers">The <code>section</code>
element is not a generic container element. When an element is
needed for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code>div</code> element
instead. A general rule is that the <code>section</code> element is
needed only for styling purposes or as a convenience for scripting,
authors are encouraged to use the <code>div</code> element instead.
A general rule is that the <code>section</code> element is
appropriate only if the element's contents would be listed
explicitly in the document's <span>outline</span>.</p>


</div>

<div class="example">

<p>In this example, a book author has marked up some sections as
chapters and some as appendices, and uses CSS to style the headers
in these two classes of section differently. The whole book is
wrapped in an <code>article</code> element as part of an even
larger document containing other books.</p>

<pre>&lt;article class="book">
&lt;style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
&lt;/style>
&lt;header>
&lt;hgroup>
&lt;h1>My Book&lt;/h1>
&lt;h2>A sample with not much content&lt;/h2>
&lt;/hgroup>
&lt;p>&lt;small>Published by Dummy Publicorp Ltd.&lt;/small>&lt;/p>
&lt;/header>
&lt;section class="chapter">
&lt;h1>My First Chapter&lt;/h1>
&lt;p>This is the first of my chapters. It doesn't say much.&lt;/p>
&lt;p>But it has two paragraphs!&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>It Continutes: The Second Chapter&lt;/h1>
&lt;p>Bla dee bla, dee bla dee bla. Boom.&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>Chapter Three: A Further Example&lt;/h1>
&lt;p>It's not like a battle between brightness and earthtones would go
unnoticed.&lt;/p>
&lt;p>But it might ruin my story.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix A: Overview of Examples&lt;/h1>
&lt;p>These are demonstrations.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix B: Some Closing Remarks&lt;/h1>
&lt;p>Hopefully this long example shows that you &lt;em>can&lt;/em> style
sections, so long as they are used to indicate actual sections.&lt;/p>
&lt;/section>
&lt;/article></pre>

</div>



<h4>The <dfn><code>nav</code></dfn> element</h4>

0 comments on commit 6fb8411

Please sign in to comment.
You can’t perform that action at this time.