Add some exposition around <div> and <section>. (bug 6771) (whatwg r3330)

Add some exposition around <div> and <section>. (bug 6771) (whatwg
r3330)
http://www.w3.org/Bugs/Public/show_bug.cgi?id=6771

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2469&r2=1.2470&f=h
http://html5.org/tools/web-apps-tracker?from=3329&to=3330

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2469
retrieving revision 1.2470
diff -u -d -r1.2469 -r1.2470
--- Overview.html 26 Jun 2009 09:38:03 -0000 1.2469
+++ Overview.html 28 Jun 2009 08:27:04 -0000 1.2470
@@ -167,7 +167,7 @@
    <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
    <!--ZZZ:-->
    <!--<h2 class="no-num no-toc">W3C Working Draft 23 April 2009</h2>-->
-   <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 26 June 2009</h2>
+   <h2 class="no-num no-toc" id="editor-s-draft-date-1-january-1970">Editor's Draft 28 June 2009</h2>
    <!--:ZZZ-->
    <dl><!-- ZZZ: update the month/day (twice), (un)comment out
     <dt>This Version:</dt>
@@ -260,7 +260,7 @@
   track.
   <!--ZZZ:-->
   <!--This specification is the 23 April 2009 Working Draft.-->
-  This specification is the 26 June 2009 Editor's Draft.
+  This specification is the 28 June 2009 Editor's Draft.
   <!--:ZZZ-->
   </p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href="http://www.whatwg.org/">WHATWG</a>. The two specifications are
   identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of)
@@ -10290,7 +10290,13 @@
   <p>The <dfn id="dom-section-cite" title="dom-section-cite"><code>cite</code></dfn> DOM
   attribute must <a href="#reflect">reflect</a> the element's <code title="attr-section-cite"><a href="#attr-section-cite">cite</a></code> content attribute.</p>
 
-  </div><div class="example">
+  </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>.<div class="example">
 
    <p>In the following example, we see an article (part of a larger
    Web page) about apples, containing two short sections.</p>
@@ -35450,7 +35456,38 @@
   <code><a href="#the-div-element">div</a></code> element as an element of last resort, for when no
   other element is suitable. Use of the <code><a href="#the-div-element">div</a></code> element
   instead of more appropriate elements leads to poor accessibility for
-  readers and poor maintainability for authors.<div class="impl">
+  readers and poor maintainability for authors.<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>&lt;article lang="en-US"&gt;
+ &lt;h1&gt;My use of language and my cats&lt;/h1&gt;
+ &lt;p&gt;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.&lt;/p&gt;
+ &lt;div lang="en-GB"&gt;
+  &lt;p&gt;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.&lt;/p&gt;
+  &lt;p&gt;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"...&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;p&gt;I should say "sidewalk" and "apartment" and "color"!&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+  </div><div class="impl">
 
   <h3 id="matching-html-elements-using-selectors"><span class="secno">4.13 </span>Matching HTML elements using selectors</h3>

Received on Sunday, 28 June 2009 08:28:09 UTC