hixie: Add a big example to <p> to help authors who want to use logical paragraphs rather than structural ones. (whatwg r6887)

hixie: Add a big example to <p> to help authors who want to use logical
paragraphs rather than structural ones. (whatwg r6887)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.5484&r2=1.5485&f=h
http://html5.org/tools/web-apps-tracker?from=6886&to=6887

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.5484
retrieving revision 1.5485
diff -u -d -r1.5484 -r1.5485
--- Overview.html 10 Jan 2012 23:31:58 -0000 1.5484
+++ Overview.html 10 Jan 2012 23:49:41 -0000 1.5485
@@ -10508,7 +10508,7 @@
    half of the second paragraph. It straddles the paragraphs and the
    heading.</p>
 
-   <pre>&lt;aside&gt;
+   <pre>&lt;header&gt;
  Welcome!
  &lt;a href="about.html"&gt;
   This is home of...
@@ -10516,19 +10516,19 @@
   The Lockheed Martin multirole jet fighter aircraft!
  &lt;/a&gt;
  This page discusses the F-16 Fighting Falcon's innermost secrets.
-&lt;/aside&gt;</pre>
+&lt;/header&gt;</pre>
 
    <p>Here is another way of marking this up, this time showing the
    paragraphs explicitly, and splitting the one link element into
    three:</p>
 
-   <pre>&lt;aside&gt;
+   <pre>&lt;header&gt;
  &lt;p&gt;Welcome! &lt;a href="about.html"&gt;This is home of...&lt;/a&gt;&lt;/p&gt;
  &lt;h1&gt;&lt;a href="about.html"&gt;The Falcons!&lt;/a&gt;&lt;/h1&gt;
  &lt;p&gt;&lt;a href="about.html"&gt;The Lockheed Martin multirole jet
  fighter aircraft!&lt;/a&gt; This page discusses the F-16 Fighting
  Falcon's innermost secrets.&lt;/p&gt;
-&lt;/aside&gt;</pre>
+&lt;/header&gt;</pre>
 
   </div><div class="example">
 
@@ -15959,6 +15959,63 @@
  &lt;/footer&gt;
 &lt;/section&gt;</pre>
 
+  </div><div class="note">
+
+   <p>List elements (in particular, <code><a href="#the-ol-element">ol</a></code> and
+   <code><a href="#the-ul-element">ul</a></code> elements) cannot be children of <code><a href="#the-p-element">p</a></code>
+   elements. When a sentence contains a bulleted list, therefore, one
+   might wonder how it should be marked up.</p>
+
+   <div class="example">
+    <p>For instance, this fantastic sentence has bullets relating to</p>
+    <ul><li>wizards,
+     <li>faster-than-light travel, and
+     <li>telepathy,
+    </ul><p>and is further discussed below.</p>
+   </div>
+
+   <p>The solution is to realise that a <i><a href="#paragraph">paragraph</a></i>, in HTML
+   terms, is not a logical concept, but a structural one. In the
+   fantastic example above, there are actually <em>five</em> <a href="#paragraph" title="paragraph">paragraphs</a> as defined by this
+   speciication: one before the list, one for each bullet, and one
+   after the list.</p>
+
+   <div class="example">
+
+    <p>The markup for the above example could therefore be:</p>
+
+    <pre>&lt;p&gt;For instance, this fantastic sentence has bullets relating to&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;wizards,
+ &lt;li&gt;faster-than-light travel, and
+ &lt;li&gt;telepathy,
+&lt;/ul&gt;
+&lt;p&gt;and is further discussed below.&lt;/p&gt;</pre>
+
+   </div>
+
+   <p>Authors wishing to conveniently style such "logical" paragraphs
+   consisting of multiple "structural" paragraphs can use the
+   <code><a href="#the-div-element">div</a></code> element instead of the <code><a href="#the-p-element">p</a></code> element.</p>
+
+   <div class="example">
+
+    <p>Thus for instance the above example could become the following:</p>
+
+    <pre>&lt;div&gt;For instance, this fantastic sentence has bullets relating to
+&lt;ul&gt;
+ &lt;li&gt;wizards,
+ &lt;li&gt;faster-than-light travel, and
+ &lt;li&gt;telepathy,
+&lt;/ul&gt;
+and is further discussed below.&lt;/div&gt;</pre>
+
+    <p>This example still has five structural paragraphs, but now the
+    author can style just the <code><a href="#the-div-element">div</a></code> instead of having to
+    consider each part of the example separately.</p>
+
+   </div>
+
   </div><h4 id="the-hr-element"><span class="secno">4.5.2 </span>The <dfn><code>hr</code></dfn> element</h4><dl class="element"><dt>Categories</dt>
    <dd><a href="#flow-content">Flow content</a>.</dd>
    <dt>Contexts in which this element can be used:</dt>

Received on Tuesday, 10 January 2012 23:50:00 UTC