HTML5 Tracker

Short URL: http://html5.org/r/6704

Index: source
===================================================================
--- source	(revision 6703)
+++ source	(revision 6704)
@@ -17873,9 +17873,9 @@
 
   <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>
 
@@ -17961,8 +17961,57 @@
 
   </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>
 
   <dl class="element">

Previous | Next