[html5] r3330 - [e] (0) Add some exposition around <div> and <section>. (bug 6771)

[whatwg at whatwg.org]

Author: ianh
Date: 2009-06-28 01:26:58 -0700 (Sun, 28 Jun 2009)
New Revision: 3330

Modified:
   index
   source
Log:
[e] (0) Add some exposition around <div> and <section>. (bug 6771)

Modified: index
===================================================================
--- index	2009-06-26 09:37:58 UTC (rev 3329)
+++ index	2009-06-28 08:26:58 UTC (rev 3330)
@@ -67,7 +67,7 @@
   <div class=head>
    <p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <h1>HTML 5</h1>
-   <h2 class="no-num no-toc" id=draft-standard-—-date:-01-jan-1901>Draft Standard — 26 June 2009</h2>
+   <h2 class="no-num no-toc" id=draft-standard-—-date:-01-jan-1901>Draft Standard — 28 June 2009</h2>
    <p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
    <p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -11683,6 +11683,14 @@
 
   </div>
 
+  <p class=note>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 appropriate only if the element's
+  contents would be listed explicitly in the document's
+  <a href=#outline>outline</a>.</p>
+
   <div class=example>
 
    <p>In the following example, we see an article (part of a larger
@@ -39808,9 +39816,42 @@
   instead of more appropriate elements leads to poor accessibility for
   readers and poor maintainability for authors.</p>
 
+  <div class=example>
 
+   <p>For example, a blog post would be marked up using
+   <code><a href=#the-article-element>article</a></code>, a chapter using <code><a href=#the-section-element>section</a></code>, a
+   page's navigation aids using <code><a href=#the-nav-element>nav</a></code>, and a group of form
+   controls using <code><a href=#the-fieldset-element>fieldset</a></code>.</p>
 
+   <p>On the other hand, <code><a href=#the-div-element>div</a></code> elements can be useful for
+   stylistic purposes or to wrap multiple paragraphs within a section
+   that are all to be annotated in a similar way. In the following
+   example, we see <code><a href=#the-div-element>div</a></code> elements used as a way to set the
+   language of two paragraphs at once, instead of setting the language
+   on the two paragraph elements separately:</p>
 
+   <pre><article lang="en-US">
+ <h1>My use of language and my cats</h1>
+ <p>My cat's behavior hasn't changed much since her absence, except
+ that she plays her new physique to the neighbors regularly, in an
+ attempt to get pets.</p>
+ <div lang="en-GB">
+  <p>My other cat, coloured black and white, is a sweetie. He followed
+  us to the pool today, walking down the pavement with us. Yesterday
+  he apparently visited our neighbours. I wonder if he recognises that
+  their flat is a mirror image of ours.</p>
+  <p>Hm, I just noticed that in the last paragraph I used British
+  English. But I'm supposed to write in American English. So I
+  shouldn't say "pavement" or "flat" or "colour"...</p>
+ </div>
+ <p>I should say "sidewalk" and "apartment" and "color"!</p>
+</article></pre>
+
+  </div>
+
+
+
+
   <div class=impl>
 
   <h3 id=matching-html-elements-using-selectors><span class=secno>4.13 </span>Matching HTML elements using selectors</h3>

Modified: source
===================================================================
--- source	2009-06-26 09:37:58 UTC (rev 3329)
+++ source	2009-06-28 08:26:58 UTC (rev 3330)
@@ -12364,6 +12364,14 @@
 
   </div>
 
+  <p class="note">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 appropriate only if the element's
+  contents would be listed explicitly in the document's
+  <span>outline</span>.</p>
+
   <div class="example">
 
    <p>In the following example, we see an article (part of a larger
@@ -44782,9 +44790,42 @@
   instead of more appropriate elements leads to poor accessibility for
   readers and poor maintainability for authors.</p>
 
+  <div class="example">
 
+   <p>For example, a blog post would be marked up using
+   <code>article</code>, a chapter using <code>section</code>, a
+   page's navigation aids using <code>nav</code>, and a group of form
+   controls using <code>fieldset</code>.</p>
 
+   <p>On the other hand, <code>div</code> elements can be useful for
+   stylistic purposes or to wrap multiple paragraphs within a section
+   that are all to be annotated in a similar way. In the following
+   example, we see <code>div</code> elements used as a way to set the
+   language of two paragraphs at once, instead of setting the language
+   on the two paragraph elements separately:</p>
 
+   <pre><article lang="en-US">
+ <h1>My use of language and my cats</h1>
+ <p>My cat's behavior hasn't changed much since her absence, except
+ that she plays her new physique to the neighbors regularly, in an
+ attempt to get pets.</p>
+ <div lang="en-GB">
+  <p>My other cat, coloured black and white, is a sweetie. He followed
+  us to the pool today, walking down the pavement with us. Yesterday
+  he apparently visited our neighbours. I wonder if he recognises that
+  their flat is a mirror image of ours.</p>
+  <p>Hm, I just noticed that in the last paragraph I used British
+  English. But I'm supposed to write in American English. So I
+  shouldn't say "pavement" or "flat" or "colour"...</p>
+ </div>
+ <p>I should say "sidewalk" and "apartment" and "color"!</p>
+</article></pre>
+
+  </div>
+
+
+
+
   <div class="impl">
 
   <h3>Matching HTML elements using selectors</h3>