[html5] r6704 - [e] (0) Tweak some text and add an example to try to clarify some confusion. Fix [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Oct 19 15:42:55 PDT 2011
Author: ianh
Date: 2011-10-19 15:42:54 -0700 (Wed, 19 Oct 2011)
New Revision: 6704
Modified:
complete.html
index
source
Log:
[e] (0) Tweak some text and add an example to try to clarify some confusion.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=14058
Modified: complete.html
===================================================================
--- complete.html 2011-10-19 22:20:41 UTC (rev 6703)
+++ complete.html 2011-10-19 22:42:54 UTC (rev 6704)
@@ -16769,9 +16769,9 @@
<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>
@@ -16857,8 +16857,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><a href=#the-article-element>article</a></code> element as part of an even
+ larger document containing other books.</p>
+ <pre><article class="book">
+ <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; }
+ </style>
+ <header>
+ <hgroup>
+ <h1>My Book</h1>
+ <h2>A sample with not much content</h2>
+ </hgroup>
+ <p><small>Published by Dummy Publicorp Ltd.</small></p>
+ </header>
+ <section class="chapter">
+ <h1>My First Chapter</h1>
+ <p>This is the first of my chapters. It doesn't say much.</p>
+ <p>But it has two paragraphs!</p>
+ </section>
+ <section class="chapter">
+ <h1>It Continutes: The Second Chapter</h1>
+ <p>Bla dee bla, dee bla dee bla. Boom.</p>
+ </section>
+ <section class="chapter">
+ <h1>Chapter Three: A Further Example</h1>
+ <p>It's not like a battle between brightness and earthtones would go
+ unnoticed.</p>
+ <p>But it might ruin my story.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix A: Overview of Examples</h1>
+ <p>These are demonstrations.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix B: Some Closing Remarks</h1>
+ <p>Hopefully this long example shows that you <em>can</em> style
+ sections, so long as they are used to indicate actual sections.</p>
+ </section>
+</article></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>
Modified: index
===================================================================
--- index 2011-10-19 22:20:41 UTC (rev 6703)
+++ index 2011-10-19 22:42:54 UTC (rev 6704)
@@ -16769,9 +16769,9 @@
<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>
@@ -16857,8 +16857,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><a href=#the-article-element>article</a></code> element as part of an even
+ larger document containing other books.</p>
+ <pre><article class="book">
+ <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; }
+ </style>
+ <header>
+ <hgroup>
+ <h1>My Book</h1>
+ <h2>A sample with not much content</h2>
+ </hgroup>
+ <p><small>Published by Dummy Publicorp Ltd.</small></p>
+ </header>
+ <section class="chapter">
+ <h1>My First Chapter</h1>
+ <p>This is the first of my chapters. It doesn't say much.</p>
+ <p>But it has two paragraphs!</p>
+ </section>
+ <section class="chapter">
+ <h1>It Continutes: The Second Chapter</h1>
+ <p>Bla dee bla, dee bla dee bla. Boom.</p>
+ </section>
+ <section class="chapter">
+ <h1>Chapter Three: A Further Example</h1>
+ <p>It's not like a battle between brightness and earthtones would go
+ unnoticed.</p>
+ <p>But it might ruin my story.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix A: Overview of Examples</h1>
+ <p>These are demonstrations.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix B: Some Closing Remarks</h1>
+ <p>Hopefully this long example shows that you <em>can</em> style
+ sections, so long as they are used to indicate actual sections.</p>
+ </section>
+</article></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>
Modified: source
===================================================================
--- source 2011-10-19 22:20:41 UTC (rev 6703)
+++ source 2011-10-19 22:42:54 UTC (rev 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><article class="book">
+ <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; }
+ </style>
+ <header>
+ <hgroup>
+ <h1>My Book</h1>
+ <h2>A sample with not much content</h2>
+ </hgroup>
+ <p><small>Published by Dummy Publicorp Ltd.</small></p>
+ </header>
+ <section class="chapter">
+ <h1>My First Chapter</h1>
+ <p>This is the first of my chapters. It doesn't say much.</p>
+ <p>But it has two paragraphs!</p>
+ </section>
+ <section class="chapter">
+ <h1>It Continutes: The Second Chapter</h1>
+ <p>Bla dee bla, dee bla dee bla. Boom.</p>
+ </section>
+ <section class="chapter">
+ <h1>Chapter Three: A Further Example</h1>
+ <p>It's not like a battle between brightness and earthtones would go
+ unnoticed.</p>
+ <p>But it might ruin my story.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix A: Overview of Examples</h1>
+ <p>These are demonstrations.</p>
+ </section>
+ <section class="appendix">
+ <h1>Appendix B: Some Closing Remarks</h1>
+ <p>Hopefully this long example shows that you <em>can</em> style
+ sections, so long as they are used to indicate actual sections.</p>
+ </section>
+</article></pre>
+
+ </div>
+
+
+
<h4>The <dfn><code>nav</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list