hixie: Tweak some text and add an example to try to clarify some confusion. (whatwg r6704)

hixie: Tweak some text and add an example to try to clarify some
confusion. (whatwg r6704)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.5374&r2=1.5375&f=h
http://html5.org/tools/web-apps-tracker?from=6703&to=6704

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.5374
retrieving revision 1.5375
diff -u -d -r1.5374 -r1.5375
--- Overview.html 19 Oct 2011 22:24:28 -0000 1.5374
+++ Overview.html 19 Oct 2011 22:46:41 -0000 1.5375
@@ -13855,9 +13855,9 @@
   element when it would make sense to syndicate the contents of the
   element.<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>.<div class="example">
 
@@ -13937,6 +13937,53 @@
  &gt;&lt;/Body
 &gt;&lt;/Html&gt;</pre>
 
+  </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><dl class="element"><dt>Categories</dt>
    <dd><a href="#flow-content">Flow content</a>.</dd>
    <dd><a href="#sectioning-content">Sectioning content</a>.</dd>

Received on Wednesday, 19 October 2011 22:47:38 UTC