Skip to content

Commit

Permalink
[e] (0) Move <br> and <wbr> into the text-level semantics section.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@4957 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Apr 2, 2010
1 parent 33fc385 commit f4b9e49
Show file tree
Hide file tree
Showing 3 changed files with 415 additions and 389 deletions.
280 changes: 144 additions & 136 deletions complete.html
View file
Expand Up @@ -434,19 +434,17 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<ol>
<li><a href=#the-p-element><span class=secno>4.5.1 </span>The <code>p</code> element</a></li>
<li><a href=#the-hr-element><span class=secno>4.5.2 </span>The <code>hr</code> element</a></li>
<li><a href=#the-br-element><span class=secno>4.5.3 </span>The <code>br</code> element</a></li>
<li><a href=#the-wbr-element><span class=secno>4.5.4 </span>The <code>wbr</code> element</a></li>
<li><a href=#the-pre-element><span class=secno>4.5.5 </span>The <code>pre</code> element</a></li>
<li><a href=#the-blockquote-element><span class=secno>4.5.6 </span>The <code>blockquote</code> element</a></li>
<li><a href=#the-ol-element><span class=secno>4.5.7 </span>The <code>ol</code> element</a></li>
<li><a href=#the-ul-element><span class=secno>4.5.8 </span>The <code>ul</code> element</a></li>
<li><a href=#the-li-element><span class=secno>4.5.9 </span>The <code>li</code> element</a></li>
<li><a href=#the-dl-element><span class=secno>4.5.10 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.11 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.12 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.13 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.14 </span>The <code>figcaption</code> element</a></li>
<li><a href=#the-div-element><span class=secno>4.5.15 </span>The <code>div</code> element</a></ol></li>
<li><a href=#the-pre-element><span class=secno>4.5.3 </span>The <code>pre</code> element</a></li>
<li><a href=#the-blockquote-element><span class=secno>4.5.4 </span>The <code>blockquote</code> element</a></li>
<li><a href=#the-ol-element><span class=secno>4.5.5 </span>The <code>ol</code> element</a></li>
<li><a href=#the-ul-element><span class=secno>4.5.6 </span>The <code>ul</code> element</a></li>
<li><a href=#the-li-element><span class=secno>4.5.7 </span>The <code>li</code> element</a></li>
<li><a href=#the-dl-element><span class=secno>4.5.8 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.9 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.10 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.11 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.12 </span>The <code>figcaption</code> element</a></li>
<li><a href=#the-div-element><span class=secno>4.5.13 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
Expand All @@ -471,7 +469,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<li><a href=#the-rp-element><span class=secno>4.6.20 </span>The <code>rp</code> element</a></li>
<li><a href=#the-bdo-element><span class=secno>4.6.21 </span>The <code>bdo</code> element</a></li>
<li><a href=#the-span-element><span class=secno>4.6.22 </span>The <code>span</code> element</a></li>
<li><a href=#usage-summary><span class=secno>4.6.23 </span>Usage summary</a></ol></li>
<li><a href=#the-br-element><span class=secno>4.6.23 </span>The <code>br</code> element</a></li>
<li><a href=#the-wbr-element><span class=secno>4.6.24 </span>The <code>wbr</code> element</a></li>
<li><a href=#usage-summary><span class=secno>4.6.25 </span>Usage summary</a></ol></li>
<li><a href=#edits><span class=secno>4.7 </span>Edits</a>
<ol>
<li><a href=#the-ins-element><span class=secno>4.7.1 </span>The <code>ins</code> element</a></li>
Expand Down Expand Up @@ -15980,117 +15980,7 @@ <h4 id=the-hr-element><span class=secno>4.5.2 </span>The <dfn><code>hr</code></d
</div>



<h4 id=the-br-element><span class=secno>4.5.3 </span>The <dfn><code>br</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class=idl>interface <dfn id=htmlbrelement>HTMLBRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href=#the-br-element>br</a></code> element <a href=#represents>represents</a> a line
break.</p>

<p><code><a href=#the-br-element>br</a></code> elements must be used only for line breaks that
are actually part of the content, as in poems or addresses.</p>

<div class=example>

<p>The following example is correct usage of the <code><a href=#the-br-element>br</a></code>
element:</p>

<pre>&lt;p&gt;P. Sherman&lt;br&gt;
42 Wallaby Way&lt;br&gt;
Sydney&lt;/p&gt;</pre>

</div>

<p><code><a href=#the-br-element>br</a></code> elements must not be used for separating thematic
groups in a paragraph.</p>

<div class=example>

<p>The following examples are non-conforming, as they abuse the
<code><a href=#the-br-element>br</a></code> element:</p>

<pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

<pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

<p>Here are alternatives to the above, which are correct:</p>

<pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

<pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

</div>

<p>If a <a href=#paragraph>paragraph</a> consists of nothing but a single
<code><a href=#the-br-element>br</a></code> element, it represents a placeholder blank line
(e.g. as in a template). Such blank lines must not be used for
presentation purposes.</p>

<div class=impl>

<p>Any content inside <code><a href=#the-br-element>br</a></code> elements must not be
considered part of the surrounding text.</p>

<p>A <code><a href=#the-br-element>br</a></code> element does not separate paragraphs for the
purposes of the Unicode bidirectional algorithm. <a href=#refsBIDI>[BIDI]</a></p>

</div>


<h4 id=the-wbr-element><span class=secno>4.5.4 </span>The <dfn><code>wbr</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-wbr-element>wbr</a></code> element <a href=#represents>represents</a> a line break
opportunity.</p>

<div class=example>

<p>In the following example, someone is quoted as saying something
which, for effect, is written as one long word. However, to ensure
that the text can be wrapped in a readable fashion, the individual
words in the quote are separated using a <code><a href=#the-wbr-element>wbr</a></code>
element.</p>

<pre>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>

</div>

<div class=impl>

<p>Any content inside <code><a href=#the-wbr-element>wbr</a></code> elements must not be
considered part of the surrounding text.</p>

</div>


<h4 id=the-pre-element><span class=secno>4.5.5 </span>The <dfn><code>pre</code></dfn> element</h4>
<h4 id=the-pre-element><span class=secno>4.5.3 </span>The <dfn><code>pre</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16195,7 +16085,7 @@ <h4 id=the-pre-element><span class=secno>4.5.5 </span>The <dfn><code>pre</code><



<h4 id=the-blockquote-element><span class=secno>4.5.6 </span>The <dfn><code>blockquote</code></dfn> element</h4>
<h4 id=the-blockquote-element><span class=secno>4.5.4 </span>The <dfn><code>blockquote</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16304,7 +16194,7 @@ <h4 id=the-blockquote-element><span class=secno>4.5.6 </span>The <dfn><code>bloc



<h4 id=the-ol-element><span class=secno>4.5.7 </span>The <dfn><code>ol</code></dfn> element</h4>
<h4 id=the-ol-element><span class=secno>4.5.5 </span>The <dfn><code>ol</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16406,7 +16296,7 @@ <h4 id=the-ol-element><span class=secno>4.5.7 </span>The <dfn><code>ol</code></d
</div>


<h4 id=the-ul-element><span class=secno>4.5.8 </span>The <dfn><code>ul</code></dfn> element</h4>
<h4 id=the-ul-element><span class=secno>4.5.6 </span>The <dfn><code>ul</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16461,7 +16351,7 @@ <h4 id=the-ul-element><span class=secno>4.5.8 </span>The <dfn><code>ul</code></d
</div>


<h4 id=the-li-element><span class=secno>4.5.9 </span>The <dfn><code>li</code></dfn> element</h4>
<h4 id=the-li-element><span class=secno>4.5.7 </span>The <dfn><code>li</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
Expand Down Expand Up @@ -16559,7 +16449,7 @@ <h4 id=the-li-element><span class=secno>4.5.9 </span>The <dfn><code>li</code></d



<h4 id=the-dl-element><span class=secno>4.5.10 </span>The <dfn><code>dl</code></dfn> element</h4>
<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>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16710,7 +16600,7 @@ <h4 id=the-dl-element><span class=secno>4.5.10 </span>The <dfn><code>dl</code></



<h4 id=the-dt-element><span class=secno>4.5.11 </span>The <dfn><code>dt</code></dfn> element</h4>
<h4 id=the-dt-element><span class=secno>4.5.9 </span>The <dfn><code>dt</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
Expand Down Expand Up @@ -16753,7 +16643,7 @@ <h4 id=the-dt-element><span class=secno>4.5.11 </span>The <dfn><code>dt</code></



<h4 id=the-dd-element><span class=secno>4.5.12 </span>The <dfn><code>dd</code></dfn> element</h4>
<h4 id=the-dd-element><span class=secno>4.5.10 </span>The <dfn><code>dd</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
Expand Down Expand Up @@ -16791,7 +16681,7 @@ <h4 id=the-dd-element><span class=secno>4.5.12 </span>The <dfn><code>dd</code></
</div>


<h4 id=the-figure-element><span class=secno>4.5.13 </span>The <dfn><code>figure</code></dfn> element</h4>
<h4 id=the-figure-element><span class=secno>4.5.11 </span>The <dfn><code>figure</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -16921,7 +16811,7 @@ <h4 id=the-figure-element><span class=secno>4.5.13 </span>The <dfn><code>figure<
</div>


<h4 id=the-figcaption-element><span class=secno>4.5.14 </span>The <dfn><code>figcaption</code></dfn> element</h4>
<h4 id=the-figcaption-element><span class=secno>4.5.12 </span>The <dfn><code>figcaption</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd>None.</dd>
Expand All @@ -16940,7 +16830,7 @@ <h4 id=the-figcaption-element><span class=secno>4.5.14 </span>The <dfn><code>fig



<h4 id=the-div-element><span class=secno>4.5.15 </span>The <dfn><code>div</code></dfn> element</h4>
<h4 id=the-div-element><span class=secno>4.5.13 </span>The <dfn><code>div</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
Expand Down Expand Up @@ -18909,7 +18799,117 @@ <h4 id=the-span-element><span class=secno>4.6.22 </span>The <dfn><code>span</cod



<h4 id=usage-summary><span class=secno>4.6.23 </span>Usage summary</h4>
<h4 id=the-br-element><span class=secno>4.6.23 </span>The <dfn><code>br</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class=idl>interface <dfn id=htmlbrelement>HTMLBRElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href=#the-br-element>br</a></code> element <a href=#represents>represents</a> a line
break.</p>

<p><code><a href=#the-br-element>br</a></code> elements must be used only for line breaks that
are actually part of the content, as in poems or addresses.</p>

<div class=example>

<p>The following example is correct usage of the <code><a href=#the-br-element>br</a></code>
element:</p>

<pre>&lt;p&gt;P. Sherman&lt;br&gt;
42 Wallaby Way&lt;br&gt;
Sydney&lt;/p&gt;</pre>

</div>

<p><code><a href=#the-br-element>br</a></code> elements must not be used for separating thematic
groups in a paragraph.</p>

<div class=example>

<p>The following examples are non-conforming, as they abuse the
<code><a href=#the-br-element>br</a></code> element:</p>

<pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;br&gt;
&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

<pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;br&gt;
&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

<p>Here are alternatives to the above, which are correct:</p>

<pre>&lt;p&gt;&lt;a ...&gt;34 comments.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a ...&gt;Add a comment.&lt;/a&gt;&lt;/p&gt;</pre>

<pre>&lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Address: &lt;input name="address"&gt;&lt;/label&gt;&lt;/p&gt;</pre>

</div>

<p>If a <a href=#paragraph>paragraph</a> consists of nothing but a single
<code><a href=#the-br-element>br</a></code> element, it represents a placeholder blank line
(e.g. as in a template). Such blank lines must not be used for
presentation purposes.</p>

<div class=impl>

<p>Any content inside <code><a href=#the-br-element>br</a></code> elements must not be
considered part of the surrounding text.</p>

<p>A <code><a href=#the-br-element>br</a></code> element does not separate paragraphs for the
purposes of the Unicode bidirectional algorithm. <a href=#refsBIDI>[BIDI]</a></p>

</div>


<h4 id=the-wbr-element><span class=secno>4.6.24 </span>The <dfn><code>wbr</code></dfn> element</h4>

<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-wbr-element>wbr</a></code> element <a href=#represents>represents</a> a line break
opportunity.</p>

<div class=example>

<p>In the following example, someone is quoted as saying something
which, for effect, is written as one long word. However, to ensure
that the text can be wrapped in a readable fashion, the individual
words in the quote are separated using a <code><a href=#the-wbr-element>wbr</a></code>
element.</p>

<pre>&lt;p&gt;So then he pointed at the tiger and screamed
"there&lt;wbr&gt;is&lt;wbr&gt;no&lt;wbr&gt;way&lt;wbr&gt;you&lt;wbr&gt;are&lt;wbr&gt;ever&lt;wbr&gt;going&lt;wbr&gt;to&lt;wbr&gt;catch&lt;wbr&gt;me"!&lt;/p&gt;</pre>

</div>

<div class=impl>

<p>Any content inside <code><a href=#the-wbr-element>wbr</a></code> elements must not be
considered part of the surrounding text.</p>

</div>



<h4 id=usage-summary><span class=secno>4.6.25 </span>Usage summary</h4>

<p><i>This section is non-normative.</i></p>

Expand Down Expand Up @@ -19000,6 +19000,14 @@ <h4 id=usage-summary><span class=secno>4.6.23 </span>Usage summary</h4>
<td>Other
<td><pre class=example>In French we call it <strong>&lt;span lang="fr"&gt;sirop de sureau&lt;/span&gt;</strong>.</pre>

<tr><td><code><a href=#the-br-element>br</a></code>
<td>Line break
<td><pre class=example>Simply Orange Juice Company<strong>&lt;br&gt;</strong>Apopka, FL 32703<strong>&lt;br&gt;</strong>U.S.A.</pre>

<tr><td><code><a href=#the-wbr-element>wbr</a></code>
<td>Line breaking opportunity
<td><pre class=example>www.simply<strong>&lt;wbr&gt;</strong>orange<strong>&lt;wbr&gt;</strong>juice.com</pre>

</table><h3 id=edits><span class=secno>4.7 </span>Edits</h3>

<p>The <code><a href=#the-ins-element>ins</a></code> and <code><a href=#the-del-element>del</a></code> elements represent
Expand Down

0 comments on commit f4b9e49

Please sign in to comment.