Browse files

[acgiow] (1) Add <u> to HTML and WebVTT.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10838

git-svn-id: http://svn.whatwg.org/webapps@6004 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent e0ede20 commit 4cf0cdcf02889d5f75b1f8803e94070968de1a4d @Hixie Hixie committed Apr 13, 2011
Showing with 367 additions and 77 deletions.
  1. +126 −33 complete.html
  2. +2 −0 images/content-venn.svg
  3. +126 −33 index
  4. +113 −11 source
View
159 complete.html
@@ -534,16 +534,17 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<li><a href=#the-sub-and-sup-elements><span class=secno>4.6.15 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
<li><a href=#the-i-element><span class=secno>4.6.16 </span>The <code>i</code> element</a></li>
<li><a href=#the-b-element><span class=secno>4.6.17 </span>The <code>b</code> element</a></li>
- <li><a href=#the-mark-element><span class=secno>4.6.18 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-ruby-element><span class=secno>4.6.19 </span>The <code>ruby</code> element</a></li>
- <li><a href=#the-rt-element><span class=secno>4.6.20 </span>The <code>rt</code> element</a></li>
- <li><a href=#the-rp-element><span class=secno>4.6.21 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdi-element><span class=secno>4.6.22 </span>The <code>bdi</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
- <li><a href=#the-br-element><span class=secno>4.6.25 </span>The <code>br</code> element</a></li>
- <li><a href=#the-wbr-element><span class=secno>4.6.26 </span>The <code>wbr</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.27 </span>Usage summary</a></ol></li>
+ <li><a href=#the-u-element><span class=secno>4.6.18 </span>The <code>u</code> element</a></li>
+ <li><a href=#the-mark-element><span class=secno>4.6.19 </span>The <code>mark</code> element</a></li>
+ <li><a href=#the-ruby-element><span class=secno>4.6.20 </span>The <code>ruby</code> element</a></li>
+ <li><a href=#the-rt-element><span class=secno>4.6.21 </span>The <code>rt</code> element</a></li>
+ <li><a href=#the-rp-element><span class=secno>4.6.22 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-bdi-element><span class=secno>4.6.23 </span>The <code>bdi</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.24 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.25 </span>The <code>span</code> element</a></li>
+ <li><a href=#the-br-element><span class=secno>4.6.26 </span>The <code>br</code> element</a></li>
+ <li><a href=#the-wbr-element><span class=secno>4.6.27 </span>The <code>wbr</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.28 </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>
@@ -2068,7 +2069,7 @@ <h4 id=presentational-markup><span class=secno>1.10.1 </span>Presentational mark
<p>It is also worth noting that some elements that were previously
presentational have been redefined in this specification to be
media-independent: <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>, <code><a href=#the-hr-element>hr</a></code>,
- <code><a href=#the-s-element>s</a></code>, and <code><a href=#the-small-element>small</a></code>.</p>
+ <code><a href=#the-s-element>s</a></code>, <code><a href=#the-small-element>small</a></code>, and <code><a href=#the-u-element>u</a></code>.</p>
<h4 id=syntax-errors><span class=secno>1.10.2 </span>Syntax errors</h4>
@@ -10804,6 +10805,7 @@ <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>
<li><code><a href=#the-table-element>table</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
<li><code><a href=#the-time-element>time</a></code></li>
+ <li><code><a href=#the-u-element>u</a></code></li>
<li><code><a href=#the-ul-element>ul</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
@@ -10919,6 +10921,7 @@ <h6 id=heading-content-0><span class=secno>3.2.5.1.4 </span>Heading content</h6>
<li><code><a href=#svg>svg</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
<li><code><a href=#the-time-element>time</a></code></li>
+ <li><code><a href=#the-u-element>u</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
<li><code><a href=#the-wbr-element>wbr</a></code></li>
@@ -20313,9 +20316,9 @@ <h4 id=the-i-element><span class=secno>4.6.16 </span>The <dfn><code>i</code></df
</dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> a span of text
in an alternate voice or mood, or otherwise offset from the normal
prose, such as a taxonomic designation, a technical term, an
- idiomatic phrase from another language, a thought, a ship name, or
- some other prose whose typical typographic presentation is
- italicized.</p>
+ idiomatic phrase from another language, a thought, a ship name in
+ Western texts, or some other prose whose typical typographic
+ presentation is italicized.</p>
<p>Terms in languages different from the main text should be
annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
@@ -20432,7 +20435,46 @@ <h4 id=the-b-element><span class=secno>4.6.17 </span>The <dfn><code>b</code></df
- <h4 id=the-mark-element><span class=secno>4.6.18 </span>The <dfn><code>mark</code></dfn> element</h4>
+ <h4 id=the-u-element><span class=secno>4.6.18 </span>The <dfn><code>u</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 can be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</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-u-element>u</a></code> element <a href=#represents>represents</a> a span of text
+ with an unarticulated, though explicitly rendered, non-textual
+ annotation, such as labeling the text as being a proper name in
+ Chinese text (a Chinese proper name mark), or labeling the text as
+ being misspelt.</p>
+
+ <p>In most cases, another element is likely to be more appropriate:
+ for marking stress emphasis, the <code><a href=#the-em-element>em</a></code> element should be
+ used; for marking key words or phrases either the <code><a href=#the-b-element>b</a></code>
+ element or the <code><a href=#the-mark-element>mark</a></code> element should be used, depending
+ on the context; for marking book titles, the <code><a href=#the-cite-element>cite</a></code>
+ element should be used<!-- even for the Chinese wavy underline 'book
+ title mark' -->; for labeling text with explicit textual
+ annotations, the <code><a href=#the-ruby-element>ruby</a></code> element should be used; for
+ labeling ship names in Western texts, the <code><a href=#the-i-element>i</a></code> element
+ should be used.</p>
+
+ <p class=note>The default rendering of the <code><a href=#the-u-element>u</a></code> element
+ in visual presentations clashes with the conventional rendering of
+ hyperlinks (underlining). Authors are encouraged to avoid using the
+ <code><a href=#the-u-element>u</a></code> element where it could be confused for a
+ hyperlink.</p>
+
+
+
+
+ <h4 id=the-mark-element><span class=secno>4.6.19 </span>The <dfn><code>mark</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20467,6 +20509,9 @@ <h4 id=the-mark-element><span class=secno>4.6.18 </span>The <dfn><code>mark</cod
&lt;/blockquote&gt;
&lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
the person writing this quote is clearly not American.&lt;/p&gt;</pre>
+ <p>(If the goal was to mark the element as misspelt, however, the
+ <code><a href=#the-u-element>u</a></code> element, possibly with a class, would be more
+ appropriate.</p>
</div>
<div class=example>
@@ -20577,7 +20622,7 @@ <h4 id=the-mark-element><span class=secno>4.6.18 </span>The <dfn><code>mark</cod
</div>
- <h4 id=the-ruby-element><span class=secno>4.6.19 </span>The <dfn><code>ruby</code></dfn> element</h4>
+ <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20656,7 +20701,7 @@ <h4 id=the-ruby-element><span class=secno>4.6.19 </span>The <dfn><code>ruby</cod
<!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
- <h4 id=the-rt-element><span class=secno>4.6.20 </span>The <dfn><code>rt</code></dfn> element</h4>
+ <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -20686,7 +20731,7 @@ <h4 id=the-rt-element><span class=secno>4.6.20 </span>The <dfn><code>rt</code></
</div>
- <h4 id=the-rp-element><span class=secno>4.6.21 </span>The <dfn><code>rp</code></dfn> element</h4>
+ <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -20735,7 +20780,7 @@ <h4 id=the-rp-element><span class=secno>4.6.21 </span>The <dfn><code>rp</code></
</div>
- <h4 id=the-bdi-element><span class=secno>4.6.22 </span>The <dfn><code>bdi</code></dfn> element</h4>
+ <h4 id=the-bdi-element><span class=secno>4.6.23 </span>The <dfn><code>bdi</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20799,7 +20844,7 @@ <h4 id=the-bdi-element><span class=secno>4.6.22 </span>The <dfn><code>bdi</code>
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdo-element><span class=secno>4.6.24 </span>The <dfn><code>bdo</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20849,7 +20894,7 @@ <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code>
- <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.25 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20888,7 +20933,7 @@ <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</cod
- <h4 id=the-br-element><span class=secno>4.6.25 </span>The <dfn><code>br</code></dfn> element</h4>
+ <h4 id=the-br-element><span class=secno>4.6.26 </span>The <dfn><code>br</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20970,7 +21015,7 @@ <h4 id=the-br-element><span class=secno>4.6.25 </span>The <dfn><code>br</code></
</div>
- <h4 id=the-wbr-element><span class=secno>4.6.26 </span>The <dfn><code>wbr</code></dfn> element</h4>
+ <h4 id=the-wbr-element><span class=secno>4.6.27 </span>The <dfn><code>wbr</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21008,7 +21053,7 @@ <h4 id=the-wbr-element><span class=secno>4.6.26 </span>The <dfn><code>wbr</code>
- <h4 id=usage-summary><span class=secno>4.6.27 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.28 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -21087,6 +21132,10 @@ <h4 id=usage-summary><span class=secno>4.6.27 </span>Usage summary</h4>
<td>Keywords
<td><pre class=example>Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>
+ <tr><td><code><a href=#the-u-element>u</a></code>
+ <td>Annotations
+ <td><pre class=example>The mixture of apple juice and &lt;u class="spelling"&gt;eldeflower&lt;/u&gt; juice is very pleasant.</pre>
+
<tr><td><code><a href=#the-mark-element>mark</a></code>
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
@@ -30980,6 +31029,7 @@ <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
<ul><li>A <a href=#webvtt-cue-class-span>WebVTT cue class span</a>.</li>
<li>A <a href=#webvtt-cue-italics-span>WebVTT cue italics span</a>.</li>
<li>A <a href=#webvtt-cue-bold-span>WebVTT cue bold span</a>.</li>
+ <li>A <a href=#webvtt-cue-underline-span>WebVTT cue underline span</a>.</li>
<li>A <a href=#webvtt-cue-ruby-span>WebVTT cue ruby span</a>.</li>
<li>A <a href=#webvtt-cue-voice-span>WebVTT cue voice span</a>.</li>
@@ -31014,6 +31064,12 @@ <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
annotation, <a href=#webvtt-cue-internal-text>WebVTT cue internal text</a> representing the
boldened text, and a <a href=#webvtt-cue-span-end-tag>WebVTT cue span end tag</a> "<code title="">b</code>".</p>
+ <p>A <dfn id=webvtt-cue-underline-span>WebVTT cue underline span</dfn> consists of a <a href=#webvtt-cue-span-start-tag>WebVTT
+ cue span start tag</a> "<code title="">u</code>" that disallows
+ an annotation, <a href=#webvtt-cue-internal-text>WebVTT cue internal text</a> representing
+ the underlined text, and a <a href=#webvtt-cue-span-end-tag>WebVTT cue span end tag</a>
+ "<code title="">u</code>".</p>
+
<p>A <dfn id=webvtt-cue-ruby-span>WebVTT cue ruby span</dfn> consists of the following
components, in the order given:</p>
@@ -31816,6 +31872,12 @@ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
bold span</a>) in <a href=#webvtt-cue-text>WebVTT cue text</a>.</p>
</dd>
+ <dt><dfn id=webvtt-underline-object title="WebVTT Underline Object">WebVTT Underline Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of underline text (a <a href=#webvtt-cue-underline-span>WebVTT cue
+ underline span</a>) in <a href=#webvtt-cue-text>WebVTT cue text</a>.</p>
+ </dd>
+
<dt><dfn id=webvtt-ruby-object title="WebVTT Ruby Object">WebVTT Ruby Objects</dfn></dt>
<dd>
<p>These represent spans of ruby (a <a href=#webvtt-cue-ruby-span>WebVTT cue
@@ -31925,6 +31987,12 @@ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
Object">Attach</a> a <a href=#webvtt-bold-object>WebVTT Bold Object</a>.</p>
</dd>
+ <dt>If the tag name is "<code title="">u</code>"</dt>
+ <dd>
+ <p><a href=#attach-a-webvtt-internal-node-object title="attach a WebVTT Internal Node
+ Object">Attach</a> a <a href=#webvtt-underline-object>WebVTT Underline Object</a>.</p>
+ </dd>
+
<dt>If the tag name is "<code title="">ruby</code>"</dt>
<dd>
<p><a href=#attach-a-webvtt-internal-node-object title="attach a WebVTT Internal Node
@@ -31978,6 +32046,10 @@ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
a <a href=#webvtt-bold-object>WebVTT Bold Object</a>.</li>
<li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">u</code>" and <var title="">current</var> is
+ a <a href=#webvtt-underline-object>WebVTT Underline Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
is "<code title="">ruby</code>" and <var title="">current</var> is
a <a href=#webvtt-ruby-object>WebVTT Ruby Object</a>.</li>
@@ -32366,6 +32438,8 @@ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-i-element>i</a></code>".
<tr><td><a href=#webvtt-bold-object>WebVTT Bold Object</a>
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-b-element>b</a></code>".
+ <tr><td><a href=#webvtt-underline-object>WebVTT Underline Object</a>
+ <td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-u-element>u</a></code>".
<tr><td><a href=#webvtt-ruby-object>WebVTT Ruby Object</a>
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-ruby-element>ruby</a></code>".
<tr><td><a href=#webvtt-ruby-text-object>WebVTT Ruby Text Object</a>
@@ -80764,7 +80838,7 @@ <h5 id=the-insertion-mode><span class=secno>13.2.3.1 </span>The insertion mode</
<code><a href=#the-em-element>em</a></code>, <code><a href=#font>font</a></code>, <code><a href=#the-i-element>i</a></code>,
<code><a href=#nobr>nobr</a></code>, <code><a href=#the-s-element>s</a></code>, <code><a href=#the-small-element>small</a></code>,
<code><a href=#strike>strike</a></code>, <code><a href=#the-strong-element>strong</a></code>, <code><a href=#tt>tt</a></code>, and
- <code><a href=#u>u</a></code>.</dd>
+ <code><a href=#the-u-element>u</a></code>.</dd>
<dt><dfn id=ordinary>Ordinary</dfn></dt>
<dd><p>All other elements found while parsing an HTML
@@ -89918,9 +89992,13 @@ <h5 id=webvtt-cue-text-rendering-rules><span class=secno>15.3.2.1 </span><dfn>We
<p>The 'font-style' property on <a href=#webvtt-italic-object title="WebVTT Italic
Object">WebVTT Italic Objects</a> must be set to 'italic'.</p>
+
<p>The 'font-weight' property on <a href=#webvtt-bold-object title="WebVTT Bold
Object">WebVTT Bold Objects</a> must be set to 'bold'.</p>
+ <p>The 'text-decoration' property on <a href=#webvtt-underline-object title="WebVTT Underline
+ Object">WebVTT Underline Objects</a> must be set to 'underline'.</p>
+
<p>The 'display' property on <a href=#webvtt-ruby-object title="WebVTT Ruby Object">WebVTT
Ruby Objects</a> must be set to 'ruby'. <a href=#refsCSSRUBY>[CSSRUBY]</a></p>
@@ -90038,6 +90116,9 @@ <h6 id="the-'::cue'-pseudo-element"><span class=secno>15.3.2.3.1 </span>The '::c
<tr><td><a href=#webvtt-bold-object title="WebVTT Bold Object">WebVTT Bold Objects</a>
<td><code title="">b</code>
+ <tr><td><a href=#webvtt-underline-object title="WebVTT Underline Object">WebVTT Underline Objects</a>
+ <td><code title="">u</code>
+
<tr><td><a href=#webvtt-ruby-object title="WebVTT Ruby Object">WebVTT Ruby Objects</a>
<td><code title="">ruby</code>
@@ -91670,7 +91751,6 @@ <h3 id=non-conforming-features><span class=secno>16.2 </span>Non-conforming feat
<dt><dfn id=nobr><code>nobr</code></dfn></dt>
<dt><dfn id=spacer><code>spacer</code></dfn></dt>
<dt><dfn id=tt><code>tt</code></dfn></dt>
- <dt><dfn id=u><code>u</code></dfn></dt>
<dd>
@@ -91682,12 +91762,12 @@ <h3 id=non-conforming-features><span class=secno>16.2 </span>Non-conforming feat
code, consider the <code><a href=#the-code-element>code</a></code> element; and for computer
output, consider the <code><a href=#the-samp-element>samp</a></code> element.</p>
- <p>Similarly, if the <code><a href=#u>u</a></code> element is being used to
- indicate emphasis, consider using the <code><a href=#the-em-element>em</a></code> element; if
- it is being used for marking up keywords, consider the
- <code><a href=#the-b-element>b</a></code> element; and if it is being used for highlighting
- text for reference purposes, consider the <code><a href=#the-mark-element>mark</a></code>
- element.</p>
+ <p>Similarly, if the <code><a href=#big>big</a></code> element is being used to
+ denote a heading, consider using the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element; if
+ it is being used for marking up important passages, consider the
+ <code><a href=#the-strong-element>strong</a></code> element; and if it is being used for
+ highlighting text for reference purposes, consider the
+ <code><a href=#the-mark-element>mark</a></code> element.</p>
<p>See also the <a href=#usage-summary>text-level semantics
usage summary</a> for more suggestions with examples.</p>
@@ -94835,7 +94915,15 @@ <h3 class=no-num id=elements-1>Elements</h3>
<code title=attr-track-src><a href=#attr-track-src>src</a></code>;
<code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
<td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
- </tr><!--KEEP-START w3c-html--><!--TT--><tr><th><code><a href=#the-ul-element>ul</a></code></th>
+ </tr><!--KEEP-START w3c-html--><!--TT--><tr><th><code><a href=#the-u-element>u</a></code></th>
+ <td>Keywords</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
+ <tr><th><code><a href=#the-ul-element>ul</a></code></th>
<td>List</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
<td><a href=#flow-content title="Flow content">flow</a></td>
@@ -94982,6 +95070,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<code><a href=#the-table-element>table</a></code>;
<code><a href=#the-textarea-element>textarea</a></code>;
<code><a href=#the-time-element>time</a></code>;
+ <code><a href=#the-u-element>u</a></code>;
<code><a href=#the-ul-element>ul</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
@@ -95061,6 +95150,7 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<code><a href=#svg>svg</a></code>;
<code><a href=#the-textarea-element>textarea</a></code>;
<code><a href=#the-time-element>time</a></code>;
+ <code><a href=#the-u-element>u</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
<code><a href=#the-wbr-element>wbr</a></code>;
@@ -96614,6 +96704,9 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
<!--KEEP-START w3c-html--><!--TT-->
+ <tr><td> <code><a href=#the-u-element>u</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-ul-element>ul</a></code>
<td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
View
2 images/content-venn.svg
@@ -99,6 +99,7 @@
<li><code>table</code></li>
<li><code>textarea</code></li>
<li><code>time</code></li>
+ <li><code>u</code></li>
<li><code>ul</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
@@ -245,6 +246,7 @@
<li><code>svg</code></li>
<li><code>textarea</code></li>
<li><code>time</code></li>
+ <li><code>u</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
View
159 index
@@ -542,16 +542,17 @@
<li><a href=#the-sub-and-sup-elements><span class=secno>4.6.15 </span>The <code>sub</code> and <code>sup</code> elements</a></li>
<li><a href=#the-i-element><span class=secno>4.6.16 </span>The <code>i</code> element</a></li>
<li><a href=#the-b-element><span class=secno>4.6.17 </span>The <code>b</code> element</a></li>
- <li><a href=#the-mark-element><span class=secno>4.6.18 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-ruby-element><span class=secno>4.6.19 </span>The <code>ruby</code> element</a></li>
- <li><a href=#the-rt-element><span class=secno>4.6.20 </span>The <code>rt</code> element</a></li>
- <li><a href=#the-rp-element><span class=secno>4.6.21 </span>The <code>rp</code> element</a></li>
- <li><a href=#the-bdi-element><span class=secno>4.6.22 </span>The <code>bdi</code> element</a></li>
- <li><a href=#the-bdo-element><span class=secno>4.6.23 </span>The <code>bdo</code> element</a></li>
- <li><a href=#the-span-element><span class=secno>4.6.24 </span>The <code>span</code> element</a></li>
- <li><a href=#the-br-element><span class=secno>4.6.25 </span>The <code>br</code> element</a></li>
- <li><a href=#the-wbr-element><span class=secno>4.6.26 </span>The <code>wbr</code> element</a></li>
- <li><a href=#usage-summary><span class=secno>4.6.27 </span>Usage summary</a></ol></li>
+ <li><a href=#the-u-element><span class=secno>4.6.18 </span>The <code>u</code> element</a></li>
+ <li><a href=#the-mark-element><span class=secno>4.6.19 </span>The <code>mark</code> element</a></li>
+ <li><a href=#the-ruby-element><span class=secno>4.6.20 </span>The <code>ruby</code> element</a></li>
+ <li><a href=#the-rt-element><span class=secno>4.6.21 </span>The <code>rt</code> element</a></li>
+ <li><a href=#the-rp-element><span class=secno>4.6.22 </span>The <code>rp</code> element</a></li>
+ <li><a href=#the-bdi-element><span class=secno>4.6.23 </span>The <code>bdi</code> element</a></li>
+ <li><a href=#the-bdo-element><span class=secno>4.6.24 </span>The <code>bdo</code> element</a></li>
+ <li><a href=#the-span-element><span class=secno>4.6.25 </span>The <code>span</code> element</a></li>
+ <li><a href=#the-br-element><span class=secno>4.6.26 </span>The <code>br</code> element</a></li>
+ <li><a href=#the-wbr-element><span class=secno>4.6.27 </span>The <code>wbr</code> element</a></li>
+ <li><a href=#usage-summary><span class=secno>4.6.28 </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>
@@ -2070,7 +2071,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
<p>It is also worth noting that some elements that were previously
presentational have been redefined in this specification to be
media-independent: <code><a href=#the-b-element>b</a></code>, <code><a href=#the-i-element>i</a></code>, <code><a href=#the-hr-element>hr</a></code>,
- <code><a href=#the-s-element>s</a></code>, and <code><a href=#the-small-element>small</a></code>.</p>
+ <code><a href=#the-s-element>s</a></code>, <code><a href=#the-small-element>small</a></code>, and <code><a href=#the-u-element>u</a></code>.</p>
<h4 id=syntax-errors><span class=secno>1.10.2 </span>Syntax errors</h4>
@@ -10806,6 +10807,7 @@ background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>
<li><code><a href=#the-table-element>table</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
<li><code><a href=#the-time-element>time</a></code></li>
+ <li><code><a href=#the-u-element>u</a></code></li>
<li><code><a href=#the-ul-element>ul</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
@@ -10921,6 +10923,7 @@ background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>
<li><code><a href=#svg>svg</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
<li><code><a href=#the-time-element>time</a></code></li>
+ <li><code><a href=#the-u-element>u</a></code></li>
<li><code><a href=#the-var-element>var</a></code></li>
<li><code><a href=#video>video</a></code></li>
<li><code><a href=#the-wbr-element>wbr</a></code></li>
@@ -20315,9 +20318,9 @@ For example, the 10th point has coordinate
</dl><p>The <code><a href=#the-i-element>i</a></code> element <a href=#represents>represents</a> a span of text
in an alternate voice or mood, or otherwise offset from the normal
prose, such as a taxonomic designation, a technical term, an
- idiomatic phrase from another language, a thought, a ship name, or
- some other prose whose typical typographic presentation is
- italicized.</p>
+ idiomatic phrase from another language, a thought, a ship name in
+ Western texts, or some other prose whose typical typographic
+ presentation is italicized.</p>
<p>Terms in languages different from the main text should be
annotated with <code title=attr-lang><a href=#attr-lang>lang</a></code> attributes (or,
@@ -20434,7 +20437,46 @@ brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre
- <h4 id=the-mark-element><span class=secno>4.6.18 </span>The <dfn><code>mark</code></dfn> element</h4>
+ <h4 id=the-u-element><span class=secno>4.6.18 </span>The <dfn><code>u</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 can be used:</dt>
+ <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</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-u-element>u</a></code> element <a href=#represents>represents</a> a span of text
+ with an unarticulated, though explicitly rendered, non-textual
+ annotation, such as labeling the text as being a proper name in
+ Chinese text (a Chinese proper name mark), or labeling the text as
+ being misspelt.</p>
+
+ <p>In most cases, another element is likely to be more appropriate:
+ for marking stress emphasis, the <code><a href=#the-em-element>em</a></code> element should be
+ used; for marking key words or phrases either the <code><a href=#the-b-element>b</a></code>
+ element or the <code><a href=#the-mark-element>mark</a></code> element should be used, depending
+ on the context; for marking book titles, the <code><a href=#the-cite-element>cite</a></code>
+ element should be used<!-- even for the Chinese wavy underline 'book
+ title mark' -->; for labeling text with explicit textual
+ annotations, the <code><a href=#the-ruby-element>ruby</a></code> element should be used; for
+ labeling ship names in Western texts, the <code><a href=#the-i-element>i</a></code> element
+ should be used.</p>
+
+ <p class=note>The default rendering of the <code><a href=#the-u-element>u</a></code> element
+ in visual presentations clashes with the conventional rendering of
+ hyperlinks (underlining). Authors are encouraged to avoid using the
+ <code><a href=#the-u-element>u</a></code> element where it could be confused for a
+ hyperlink.</p>
+
+
+
+
+ <h4 id=the-mark-element><span class=secno>4.6.19 </span>The <dfn><code>mark</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20469,6 +20511,9 @@ brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre
&lt;/blockquote&gt;
&lt;p lang="en-US"&gt;As we can tell from the &lt;em&gt;spelling&lt;/em&gt; of the word,
the person writing this quote is clearly not American.&lt;/p&gt;</pre>
+ <p>(If the goal was to mark the element as misspelt, however, the
+ <code><a href=#the-u-element>u</a></code> element, possibly with a class, would be more
+ appropriate.</p>
</div>
<div class=example>
@@ -20579,7 +20624,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-ruby-element><span class=secno>4.6.19 </span>The <dfn><code>ruby</code></dfn> element</h4>
+ <h4 id=the-ruby-element><span class=secno>4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20658,7 +20703,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
<!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
- <h4 id=the-rt-element><span class=secno>4.6.20 </span>The <dfn><code>rt</code></dfn> element</h4>
+ <h4 id=the-rt-element><span class=secno>4.6.21 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -20688,7 +20733,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-rp-element><span class=secno>4.6.21 </span>The <dfn><code>rp</code></dfn> element</h4>
+ <h4 id=the-rp-element><span class=secno>4.6.22 </span>The <dfn><code>rp</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd>None.</dd>
@@ -20737,7 +20782,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-bdi-element><span class=secno>4.6.22 </span>The <dfn><code>bdi</code></dfn> element</h4>
+ <h4 id=the-bdi-element><span class=secno>4.6.23 </span>The <dfn><code>bdi</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20801,7 +20846,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
</div>
- <h4 id=the-bdo-element><span class=secno>4.6.23 </span>The <dfn><code>bdo</code></dfn> element</h4>
+ <h4 id=the-bdo-element><span class=secno>4.6.24 </span>The <dfn><code>bdo</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20851,7 +20896,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
- <h4 id=the-span-element><span class=secno>4.6.24 </span>The <dfn><code>span</code></dfn> element</h4>
+ <h4 id=the-span-element><span class=secno>4.6.25 </span>The <dfn><code>span</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20890,7 +20935,7 @@ wormhole connection.&lt;/mark&gt;&lt;/p&gt;</pre>
- <h4 id=the-br-element><span class=secno>4.6.25 </span>The <dfn><code>br</code></dfn> element</h4>
+ <h4 id=the-br-element><span class=secno>4.6.26 </span>The <dfn><code>br</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -20972,7 +21017,7 @@ Sydney&lt;/p&gt;</pre>
</div>
- <h4 id=the-wbr-element><span class=secno>4.6.26 </span>The <dfn><code>wbr</code></dfn> element</h4>
+ <h4 id=the-wbr-element><span class=secno>4.6.27 </span>The <dfn><code>wbr</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -21010,7 +21055,7 @@ Sydney&lt;/p&gt;</pre>
- <h4 id=usage-summary><span class=secno>4.6.27 </span>Usage summary</h4>
+ <h4 id=usage-summary><span class=secno>4.6.28 </span>Usage summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -21089,6 +21134,10 @@ Sydney&lt;/p&gt;</pre>
<td>Keywords
<td><pre class=example>Take a <strong>&lt;b&gt;lemon&lt;/b&gt;</strong> and squeeze it with a <strong>&lt;b&gt;juicer&lt;/b&gt;</strong>.</pre>
+ <tr><td><code><a href=#the-u-element>u</a></code>
+ <td>Annotations
+ <td><pre class=example>The mixture of apple juice and &lt;u class="spelling"&gt;eldeflower&lt;/u&gt; juice is very pleasant.</pre>
+
<tr><td><code><a href=#the-mark-element>mark</a></code>
<td>Highlight
<td><pre class=example>Elderflower cordial, with one <strong>&lt;mark&gt;part&lt;/mark&gt;</strong> cordial to ten <strong>&lt;mark&gt;part&lt;/mark&gt;</strong>s water, stands a<strong>&lt;mark&gt;part&lt;/mark&gt;</strong> from the rest.</pre>
@@ -30985,6 +31034,7 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
<ul><li>A <a href=#webvtt-cue-class-span>WebVTT cue class span</a>.</li>
<li>A <a href=#webvtt-cue-italics-span>WebVTT cue italics span</a>.</li>
<li>A <a href=#webvtt-cue-bold-span>WebVTT cue bold span</a>.</li>
+ <li>A <a href=#webvtt-cue-underline-span>WebVTT cue underline span</a>.</li>
<li>A <a href=#webvtt-cue-ruby-span>WebVTT cue ruby span</a>.</li>
<li>A <a href=#webvtt-cue-voice-span>WebVTT cue voice span</a>.</li>
@@ -31019,6 +31069,12 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
annotation, <a href=#webvtt-cue-internal-text>WebVTT cue internal text</a> representing the
boldened text, and a <a href=#webvtt-cue-span-end-tag>WebVTT cue span end tag</a> "<code title="">b</code>".</p>
+ <p>A <dfn id=webvtt-cue-underline-span>WebVTT cue underline span</dfn> consists of a <a href=#webvtt-cue-span-start-tag>WebVTT
+ cue span start tag</a> "<code title="">u</code>" that disallows
+ an annotation, <a href=#webvtt-cue-internal-text>WebVTT cue internal text</a> representing
+ the underlined text, and a <a href=#webvtt-cue-span-end-tag>WebVTT cue span end tag</a>
+ "<code title="">u</code>".</p>
+
<p>A <dfn id=webvtt-cue-ruby-span>WebVTT cue ruby span</dfn> consists of the following
components, in the order given:</p>
@@ -31821,6 +31877,12 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
bold span</a>) in <a href=#webvtt-cue-text>WebVTT cue text</a>.</p>
</dd>
+ <dt><dfn id=webvtt-underline-object title="WebVTT Underline Object">WebVTT Underline Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of underline text (a <a href=#webvtt-cue-underline-span>WebVTT cue
+ underline span</a>) in <a href=#webvtt-cue-text>WebVTT cue text</a>.</p>
+ </dd>
+
<dt><dfn id=webvtt-ruby-object title="WebVTT Ruby Object">WebVTT Ruby Objects</dfn></dt>
<dd>
<p>These represent spans of ruby (a <a href=#webvtt-cue-ruby-span>WebVTT cue
@@ -31930,6 +31992,12 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
Object">Attach</a> a <a href=#webvtt-bold-object>WebVTT Bold Object</a>.</p>
</dd>
+ <dt>If the tag name is "<code title="">u</code>"</dt>
+ <dd>
+ <p><a href=#attach-a-webvtt-internal-node-object title="attach a WebVTT Internal Node
+ Object">Attach</a> a <a href=#webvtt-underline-object>WebVTT Underline Object</a>.</p>
+ </dd>
+
<dt>If the tag name is "<code title="">ruby</code>"</dt>
<dd>
<p><a href=#attach-a-webvtt-internal-node-object title="attach a WebVTT Internal Node
@@ -31983,6 +32051,10 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
a <a href=#webvtt-bold-object>WebVTT Bold Object</a>.</li>
<li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">u</code>" and <var title="">current</var> is
+ a <a href=#webvtt-underline-object>WebVTT Underline Object</a>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
is "<code title="">ruby</code>" and <var title="">current</var> is
a <a href=#webvtt-ruby-object>WebVTT Ruby Object</a>.</li>
@@ -32371,6 +32443,8 @@ interface <dfn id=texttrackcue>TextTrackCue</dfn> {
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-i-element>i</a></code>".
<tr><td><a href=#webvtt-bold-object>WebVTT Bold Object</a>
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-b-element>b</a></code>".
+ <tr><td><a href=#webvtt-underline-object>WebVTT Underline Object</a>
+ <td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-u-element>u</a></code>".
<tr><td><a href=#webvtt-ruby-object>WebVTT Ruby Object</a>
<td><code><a href=#htmlelement>HTMLElement</a></code> element node with <code title=dom-Node-localName><a href=#dom-node-localname>localName</a></code> "<code><a href=#the-ruby-element>ruby</a></code>".
<tr><td><a href=#webvtt-ruby-text-object>WebVTT Ruby Text Object</a>
@@ -76725,7 +76799,7 @@ interface <dfn id=messageport>MessagePort</dfn> {
<code><a href=#the-em-element>em</a></code>, <code><a href=#font>font</a></code>, <code><a href=#the-i-element>i</a></code>,
<code><a href=#nobr>nobr</a></code>, <code><a href=#the-s-element>s</a></code>, <code><a href=#the-small-element>small</a></code>,
<code><a href=#strike>strike</a></code>, <code><a href=#the-strong-element>strong</a></code>, <code><a href=#tt>tt</a></code>, and
- <code><a href=#u>u</a></code>.</dd>
+ <code><a href=#the-u-element>u</a></code>.</dd>
<dt><dfn id=ordinary>Ordinary</dfn></dt>
<dd><p>All other elements found while parsing an HTML
@@ -85879,9 +85953,13 @@ iframe:not([seamless]) { border: 2px inset; }
<p>The 'font-style' property on <a href=#webvtt-italic-object title="WebVTT Italic
Object">WebVTT Italic Objects</a> must be set to 'italic'.</p>
+
<p>The 'font-weight' property on <a href=#webvtt-bold-object title="WebVTT Bold
Object">WebVTT Bold Objects</a> must be set to 'bold'.</p>
+ <p>The 'text-decoration' property on <a href=#webvtt-underline-object title="WebVTT Underline
+ Object">WebVTT Underline Objects</a> must be set to 'underline'.</p>
+
<p>The 'display' property on <a href=#webvtt-ruby-object title="WebVTT Ruby Object">WebVTT
Ruby Objects</a> must be set to 'ruby'. <a href=#refsCSSRUBY>[CSSRUBY]</a></p>
@@ -85999,6 +86077,9 @@ iframe:not([seamless]) { border: 2px inset; }
<tr><td><a href=#webvtt-bold-object title="WebVTT Bold Object">WebVTT Bold Objects</a>
<td><code title="">b</code>
+ <tr><td><a href=#webvtt-underline-object title="WebVTT Underline Object">WebVTT Underline Objects</a>
+ <td><code title="">u</code>
+
<tr><td><a href=#webvtt-ruby-object title="WebVTT Ruby Object">WebVTT Ruby Objects</a>
<td><code title="">ruby</code>
@@ -87631,7 +87712,6 @@ if (s = prompt('What is your name?')) {
<dt><dfn id=nobr><code>nobr</code></dfn></dt>
<dt><dfn id=spacer><code>spacer</code></dfn></dt>
<dt><dfn id=tt><code>tt</code></dfn></dt>
- <dt><dfn id=u><code>u</code></dfn></dt>
<dd>
@@ -87643,12 +87723,12 @@ if (s = prompt('What is your name?')) {
code, consider the <code><a href=#the-code-element>code</a></code> element; and for computer
output, consider the <code><a href=#the-samp-element>samp</a></code> element.</p>
- <p>Similarly, if the <code><a href=#u>u</a></code> element is being used to
- indicate emphasis, consider using the <code><a href=#the-em-element>em</a></code> element; if
- it is being used for marking up keywords, consider the
- <code><a href=#the-b-element>b</a></code> element; and if it is being used for highlighting
- text for reference purposes, consider the <code><a href=#the-mark-element>mark</a></code>
- element.</p>
+ <p>Similarly, if the <code><a href=#big>big</a></code> element is being used to
+ denote a heading, consider using the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element; if
+ it is being used for marking up important passages, consider the
+ <code><a href=#the-strong-element>strong</a></code> element; and if it is being used for
+ highlighting text for reference purposes, consider the
+ <code><a href=#the-mark-element>mark</a></code> element.</p>
<p>See also the <a href=#usage-summary>text-level semantics
usage summary</a> for more suggestions with examples.</p>
@@ -90796,7 +90876,15 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<code title=attr-track-src><a href=#attr-track-src>src</a></code>;
<code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
<td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
- </tr><!--KEEP-START w3c-html--><!--TT--><tr><th><code><a href=#the-ul-element>ul</a></code></th>
+ </tr><!--KEEP-START w3c-html--><!--TT--><tr><th><code><a href=#the-u-element>u</a></code></th>
+ <td>Keywords</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#phrasing-content title="Phrasing content">phrasing</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
+ <tr><th><code><a href=#the-ul-element>ul</a></code></th>
<td>List</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
<td><a href=#flow-content title="Flow content">flow</a></td>
@@ -90943,6 +91031,7 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<code><a href=#the-table-element>table</a></code>;
<code><a href=#the-textarea-element>textarea</a></code>;
<code><a href=#the-time-element>time</a></code>;
+ <code><a href=#the-u-element>u</a></code>;
<code><a href=#the-ul-element>ul</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
@@ -91022,6 +91111,7 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<code><a href=#svg>svg</a></code>;
<code><a href=#the-textarea-element>textarea</a></code>;
<code><a href=#the-time-element>time</a></code>;
+ <code><a href=#the-u-element>u</a></code>;
<code><a href=#the-var-element>var</a></code>;
<code><a href=#video>video</a></code>;
<code><a href=#the-wbr-element>wbr</a></code>;
@@ -92575,6 +92665,9 @@ interface <a href=#htmldocument>HTMLDocument</a> {
<td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
<!--KEEP-START w3c-html--><!--TT-->
+ <tr><td> <code><a href=#the-u-element>u</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-ul-element>ul</a></code>
<td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
View
124 source
@@ -926,7 +926,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
<p>It is also worth noting that some elements that were previously
presentational have been redefined in this specification to be
media-independent: <code>b</code>, <code>i</code>, <code>hr</code>,
- <code>s</code>, and <code>small</code>.</p>
+ <code>s</code>, <code>small</code>, and <code>u</code>.</p>
<h4>Syntax errors</h4>
@@ -11164,6 +11164,7 @@ background: transparent">blue&lt;/span>.&lt;/p></pre>
<li><code>table</code></li>
<li><code>textarea</code></li>
<li><code>time</code></li>
+ <li><code>u</code></li>
<li><code>ul</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
@@ -11292,6 +11293,7 @@ background: transparent">blue&lt;/span>.&lt;/p></pre>
<li><code>svg</code></li>
<li><code>textarea</code></li>
<li><code>time</code></li>
+ <li><code>u</code></li>
<li><code>var</code></li>
<li><code>video</code></li>
<li><code>wbr</code></li>
@@ -21780,9 +21782,9 @@ For example, the 10th point has coordinate
<p>The <code>i</code> element <span>represents</span> a span of text
in an alternate voice or mood, or otherwise offset from the normal
prose, such as a taxonomic designation, a technical term, an
- idiomatic phrase from another language, a thought, a ship name, or
- some other prose whose typical typographic presentation is
- italicized.</p>
+ idiomatic phrase from another language, a thought, a ship name in
+ Western texts, or some other prose whose typical typographic
+ presentation is italicized.</p>
<p>Terms in languages different from the main text should be
annotated with <code title="attr-lang">lang</code> attributes (or,
@@ -21904,6 +21906,48 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
+ <h4>The <dfn><code>u</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Contexts in which this element can be used:</dt>
+ <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Phrasing content</span>.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl>
+
+ <p>The <code>u</code> element <span>represents</span> a span of text
+ with an unarticulated, though explicitly rendered, non-textual
+ annotation, such as labeling the text as being a proper name in
+ Chinese text (a Chinese proper name mark), or labeling the text as
+ being misspelt.</p>
+
+ <p>In most cases, another element is likely to be more appropriate:
+ for marking stress emphasis, the <code>em</code> element should be
+ used; for marking key words or phrases either the <code>b</code>
+ element or the <code>mark</code> element should be used, depending
+ on the context; for marking book titles, the <code>cite</code>
+ element should be used<!-- even for the Chinese wavy underline 'book
+ title mark' -->; for labeling text with explicit textual
+ annotations, the <code>ruby</code> element should be used; for
+ labeling ship names in Western texts, the <code>i</code> element
+ should be used.</p>
+
+ <p class="note">The default rendering of the <code>u</code> element
+ in visual presentations clashes with the conventional rendering of
+ hyperlinks (underlining). Authors are encouraged to avoid using the
+ <code>u</code> element where it could be confused for a
+ hyperlink.</p>
+
+
+
+
<h4>The <dfn><code>mark</code></dfn> element</h4>
<dl class="element">
@@ -21944,6 +21988,9 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
&lt;/blockquote>
&lt;p lang="en-US">As we can tell from the &lt;em>spelling&lt;/em> of the word,
the person writing this quote is clearly not American.&lt;/p></pre>
+ <p>(If the goal was to mark the element as misspelt, however, the
+ <code>u</code> element, possibly with a class, would be more
+ appropriate.</p>
</div>
<div class="example">
@@ -22620,6 +22667,11 @@ Sydney&lt;/p&gt;</pre>
<td><pre class="example">Take a <strong>&lt;b>lemon&lt;/b></strong> and squeeze it with a <strong>&lt;b>juicer&lt;/b></strong>.</pre>
<tr>
+ <td><code>u</code>
+ <td>Annotations
+ <td><pre class="example">The mixture of apple juice and &lt;u class="spelling">eldeflower&lt;/u&gt; juice is very pleasant.</pre>
+
+ <tr>
<td><code>mark</code>
<td>Highlight
<td><pre class="example">Elderflower cordial, with one <strong>&lt;mark>part&lt;/mark></strong> cordial to ten <strong>&lt;mark>part&lt;/mark></strong>s water, stands a<strong>&lt;mark>part&lt;/mark></strong> from the rest.</pre>
@@ -33912,6 +33964,7 @@ interface <dfn>TextTrackCue</dfn> {
<li>A <span>WebVTT cue class span</span>.</li>
<li>A <span>WebVTT cue italics span</span>.</li>
<li>A <span>WebVTT cue bold span</span>.</li>
+ <li>A <span>WebVTT cue underline span</span>.</li>
<li>A <span>WebVTT cue ruby span</span>.</li>
<li>A <span>WebVTT cue voice span</span>.</li>
@@ -33950,6 +34003,12 @@ interface <dfn>TextTrackCue</dfn> {
boldened text, and a <span>WebVTT cue span end tag</span> "<code
title="">b</code>".</p>
+ <p>A <dfn>WebVTT cue underline span</dfn> consists of a <span>WebVTT
+ cue span start tag</span> "<code title="">u</code>" that disallows
+ an annotation, <span>WebVTT cue internal text</span> representing
+ the underlined text, and a <span>WebVTT cue span end tag</span>
+ "<code title="">u</code>".</p>
+
<p>A <dfn>WebVTT cue ruby span</dfn> consists of the following
components, in the order given:</p>
@@ -34916,6 +34975,12 @@ interface <dfn>TextTrackCue</dfn> {
bold span</span>) in <span>WebVTT cue text</span>.</p>
</dd>
+ <dt><dfn title="WebVTT Underline Object">WebVTT Underline Objects</dfn></dt>
+ <dd>
+ <p>These represent spans of underline text (a <span>WebVTT cue
+ underline span</span>) in <span>WebVTT cue text</span>.</p>
+ </dd>
+
<dt><dfn title="WebVTT Ruby Object">WebVTT Ruby Objects</dfn></dt>
<dd>
<p>These represent spans of ruby (a <span>WebVTT cue
@@ -35044,6 +35109,12 @@ interface <dfn>TextTrackCue</dfn> {
Object">Attach</span> a <span>WebVTT Bold Object</span>.</p>
</dd>
+ <dt>If the tag name is "<code title="">u</code>"</dt>
+ <dd>
+ <p><span title="attach a WebVTT Internal Node
+ Object">Attach</span> a <span>WebVTT Underline Object</span>.</p>
+ </dd>
+
<dt>If the tag name is "<code title="">ruby</code>"</dt>
<dd>
<p><span title="attach a WebVTT Internal Node
@@ -35105,6 +35176,10 @@ interface <dfn>TextTrackCue</dfn> {
a <span>WebVTT Bold Object</span>.</li>
<li>The tag name of the end tag token <var title="">token</var>
+ is "<code title="">u</code>" and <var title="">current</var> is
+ a <span>WebVTT Underline Object</span>.</li>
+
+ <li>The tag name of the end tag token <var title="">token</var>
is "<code title="">ruby</code>" and <var title="">current</var> is
a <span>WebVTT Ruby Object</span>.</li>
@@ -35580,6 +35655,9 @@ interface <dfn>TextTrackCue</dfn> {
<td><span>WebVTT Bold Object</span>
<td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>b</code>".
<tr>
+ <td><span>WebVTT Underline Object</span>
+ <td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>u</code>".
+ <tr>
<td><span>WebVTT Ruby Object</span>
<td><code>HTMLElement</code> element node with <code title="dom-Node-localName">localName</code> "<code>ruby</code>".
<tr>
@@ -101977,9 +102055,13 @@ iframe:not([seamless]) { border: 2px inset; }
<p>The 'font-style' property on <span title="WebVTT Italic
Object">WebVTT Italic Objects</span> must be set to 'italic'.</p>
+
<p>The 'font-weight' property on <span title="WebVTT Bold
Object">WebVTT Bold Objects</span> must be set to 'bold'.</p>
+ <p>The 'text-decoration' property on <span title="WebVTT Underline
+ Object">WebVTT Underline Objects</span> must be set to 'underline'.</p>
+
<p>The 'display' property on <span title="WebVTT Ruby Object">WebVTT
Ruby Objects</span> must be set to 'ruby'. <a
href="#refsCSSRUBY">[CSSRUBY]</a></p>
@@ -102114,6 +102196,10 @@ iframe:not([seamless]) { border: 2px inset; }
<td><code title="">b</code>
<tr>
+ <td><span title="WebVTT Underline Object">WebVTT Underline Objects</span>
+ <td><code title="">u</code>
+
+ <tr>
<td><span title="WebVTT Ruby Object">WebVTT Ruby Objects</span>
<td><code title="">ruby</code>
@@ -103971,7 +104057,6 @@ if (s = prompt('What is your name?')) {
<dt><dfn><code>nobr</code></dfn></dt>
<dt><dfn><code>spacer</code></dfn></dt>
<dt><dfn><code>tt</code></dfn></dt>
- <dt><dfn><code>u</code></dfn></dt>
<dd>
@@ -103983,12 +104068,12 @@ if (s = prompt('What is your name?')) {
code, consider the <code>code</code> element; and for computer
output, consider the <code>samp</code> element.</p>
- <p>Similarly, if the <code>u</code> element is being used to
- indicate emphasis, consider using the <code>em</code> element; if
- it is being used for marking up keywords, consider the
- <code>b</code> element; and if it is being used for highlighting
- text for reference purposes, consider the <code>mark</code>
- element.</p>
+ <p>Similarly, if the <code>big</code> element is being used to
+ denote a heading, consider using the <code>h1</code> element; if
+ it is being used for marking up important passages, consider the
+ <code>strong</code> element; and if it is being used for
+ highlighting text for reference purposes, consider the
+ <code>mark</code> element.</p>
<p>See also the <a href="#usage-summary">text-level semantics
usage summary</a> for more suggestions with examples.</p>
@@ -107808,6 +107893,17 @@ interface <span>HTMLDocument</span> {
<!--KEEP-START w3c-html--><!--TT-->
<tr>
+ <th><code>u</code></th>
+ <td>Keywords</td>
+ <td><span title="Flow content">flow</span>;
+ <span title="Phrasing content">phrasing</span></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="Phrasing content">phrasing</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>ul</code></th>
<td>List</td>
<td><span title="Flow content">flow</span></td>
@@ -107973,6 +108069,7 @@ interface <span>HTMLDocument</span> {
<code>table</code>;
<code>textarea</code>;
<code>time</code>;
+ <code>u</code>;
<code>ul</code>;
<code>var</code>;
<code>video</code>;
@@ -108055,6 +108152,7 @@ interface <span>HTMLDocument</span> {
<code>svg</code>;
<code>textarea</code>;
<code>time</code>;
+ <code>u</code>;
<code>var</code>;
<code>video</code>;
<code>wbr</code>;
@@ -109953,6 +110051,10 @@ interface <span>HTMLDocument</span> {
<!--KEEP-START w3c-html--><!--TT-->
<tr>
+ <td> <code>u</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>ul</code>
<td> <code>HTMLUListElement</code> : <code>HTMLElement</code>

0 comments on commit 4cf0cdc

Please sign in to comment.