[html5] r6887 - [e] (0) Add a big example to <p> to help authors who want to use logical paragra [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jan 10 15:49:37 PST 2012
Author: ianh
Date: 2012-01-10 15:49:36 -0800 (Tue, 10 Jan 2012)
New Revision: 6887
Modified:
complete.html
index
source
Log:
[e] (0) Add a big example to <p> to help authors who want to use logical paragraphs rather than structural ones.
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2012-01-10 23:31:53 UTC (rev 6886)
+++ complete.html 2012-01-10 23:49:36 UTC (rev 6887)
@@ -12710,7 +12710,7 @@
half of the second paragraph. It straddles the paragraphs and the
heading.</p>
- <pre><aside>
+ <pre><header>
Welcome!
<a href="about.html">
This is home of...
@@ -12718,19 +12718,19 @@
The Lockheed Martin multirole jet fighter aircraft!
</a>
This page discusses the F-16 Fighting Falcon's innermost secrets.
-</aside></pre>
+</header></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><aside>
+ <pre><header>
<p>Welcome! <a href="about.html">This is home of...</a></p>
<h1><a href="about.html">The Falcons!</a></h1>
<p><a href="about.html">The Lockheed Martin multirole jet
fighter aircraft!</a> This page discusses the F-16 Fighting
Falcon's innermost secrets.</p>
-</aside></pre>
+</header></pre>
</div>
@@ -19025,7 +19025,67 @@
</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><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></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><div>For instance, this fantastic sentence has bullets relating to
+<ul>
+ <li>wizards,
+ <li>faster-than-light travel, and
+ <li>telepathy,
+</ul>
+and is further discussed below.</div></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>
@@ -19714,6 +19774,8 @@
+
+
<h4 id=the-dl-element><span class=secno>4.5.8 </span>The <dfn><code>dl</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
Modified: index
===================================================================
--- index 2012-01-10 23:31:53 UTC (rev 6886)
+++ index 2012-01-10 23:49:36 UTC (rev 6887)
@@ -12710,7 +12710,7 @@
half of the second paragraph. It straddles the paragraphs and the
heading.</p>
- <pre><aside>
+ <pre><header>
Welcome!
<a href="about.html">
This is home of...
@@ -12718,19 +12718,19 @@
The Lockheed Martin multirole jet fighter aircraft!
</a>
This page discusses the F-16 Fighting Falcon's innermost secrets.
-</aside></pre>
+</header></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><aside>
+ <pre><header>
<p>Welcome! <a href="about.html">This is home of...</a></p>
<h1><a href="about.html">The Falcons!</a></h1>
<p><a href="about.html">The Lockheed Martin multirole jet
fighter aircraft!</a> This page discusses the F-16 Fighting
Falcon's innermost secrets.</p>
-</aside></pre>
+</header></pre>
</div>
@@ -19025,7 +19025,67 @@
</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><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></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><div>For instance, this fantastic sentence has bullets relating to
+<ul>
+ <li>wizards,
+ <li>faster-than-light travel, and
+ <li>telepathy,
+</ul>
+and is further discussed below.</div></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>
@@ -19714,6 +19774,8 @@
+
+
<h4 id=the-dl-element><span class=secno>4.5.8 </span>The <dfn><code>dl</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
Modified: source
===================================================================
--- source 2012-01-10 23:31:53 UTC (rev 6886)
+++ source 2012-01-10 23:49:36 UTC (rev 6887)
@@ -13277,7 +13277,7 @@
half of the second paragraph. It straddles the paragraphs and the
heading.</p>
- <pre><aside>
+ <pre><header>
Welcome!
<a href="about.html">
This is home of...
@@ -13285,19 +13285,19 @@
The Lockheed Martin multirole jet fighter aircraft!
</a>
This page discusses the F-16 Fighting Falcon's innermost secrets.
-</aside></pre>
+</header></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><aside>
+ <pre><header>
<p>Welcome! <a href="about.html">This is home of...</a></p>
<h1><a href="about.html">The Falcons!</a></h1>
<p><a href="about.html">The Lockheed Martin multirole jet
fighter aircraft!</a> This page discusses the F-16 Fighting
Falcon's innermost secrets.</p>
-</aside></pre>
+</header></pre>
</div>
@@ -20399,7 +20399,70 @@
</div>
+ <div class="note">
+ <p>List elements (in particular, <code>ol</code> and
+ <code>ul</code> elements) cannot be children of <code>p</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>paragraph</i>, in HTML
+ terms, is not a logical concept, but a structural one. In the
+ fantastic example above, there are actually <em>five</em> <span
+ title="paragraph">paragraphs</span> 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><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></pre>
+
+ </div>
+
+ <p>Authors wishing to conveniently style such "logical" paragraphs
+ consisting of multiple "structural" paragraphs can use the
+ <code>div</code> element instead of the <code>p</code> element.</p>
+
+ <div class="example">
+
+ <p>Thus for instance the above example could become the following:</p>
+
+ <pre><div>For instance, this fantastic sentence has bullets relating to
+<ul>
+ <li>wizards,
+ <li>faster-than-light travel, and
+ <li>telepathy,
+</ul>
+and is further discussed below.</div></pre>
+
+ <p>This example still has five structural paragraphs, but now the
+ author can style just the <code>div</code> instead of having to
+ consider each part of the example separately.</p>
+
+ </div>
+
+ </div>
+
+
+
<h4>The <dfn><code>hr</code></dfn> element</h4>
<dl class="element">
@@ -21137,6 +21200,8 @@
+
+
<h4>The <dfn><code>dl</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list