new repository

1 files changed, 145 insertions, 0 deletions

diff --git a/devdocs/html/element%2Fu.html b/devdocs/html/element%2Fu.html
new file mode 100644
index 00000000..d7114445
--- /dev/null
+++ b/devdocs/html/element%2Fu.html
@@ -0,0 +1,145 @@
+<header><h1>&lt;u&gt;: The Unarticulated Annotation (Underline) element</h1></header><div class="section-content">
+<p>The <code>&lt;u&gt;</code> <a href="../index">HTML</a> element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>underline</code>.</p> </div>
+</div>
+<h2 id="try_it">Try it</h2>
+<div class="section-content">
+<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/u.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>See the <a href="#usage_notes">Usage notes</a> section for further details on when it's appropriate to use <code>&lt;u&gt;</code> and when it isn't.</p>
+</div>
+<h2 id="attributes">Attributes</h2>
+<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div>
+<h2 id="usage_notes">Usage notes</h2>
+<div class="section-content">
+<p>Along with other pure styling elements, the original HTML Underline (<code>&lt;u&gt;</code>) element was deprecated in HTML 4; however, <code>&lt;u&gt;</code> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>&lt;u&gt;</code> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.</p> </div>
+</div>
+<h3 id="use_cases">Use cases</h3>
+<div class="section-content">
+<p>Valid use cases for the <code>&lt;u&gt;</code> element include annotating spelling errors, applying a <a href="https://en.wikipedia.org/wiki/Proper_name_mark" target="_blank">proper name mark</a> to denote proper names in Chinese text, and other forms of annotation.</p> <p>You should <em>not</em> use <code>&lt;u&gt;</code> to underline text for presentation purposes, or to denote titles of books.</p>
+</div>
+<h3 id="other_elements_to_consider_using">Other elements to consider using</h3>
+<div class="section-content">
+<p>In most cases, you should use an element other than <code>&lt;u&gt;</code>, such as:</p> <ul> <li>
+<a href="em"><code>&lt;em&gt;</code></a> to denote stress emphasis</li> <li>
+<a href="b"><code>&lt;b&gt;</code></a> to draw attention to text</li> <li>
+<a href="mark"><code>&lt;mark&gt;</code></a> to mark key words or phrases</li> <li>
+<a href="strong"><code>&lt;strong&gt;</code></a> to indicate that text has strong importance</li> <li>
+<a href="cite"><code>&lt;cite&gt;</code></a> to mark the titles of books or other publications</li> <li>
+<a href="i"><code>&lt;i&gt;</code></a> to denote technical terms, transliterations, thoughts, or names of vessels in Western texts</li> </ul> <p>To provide textual annotations (as opposed to the non-textual annotations created with <code>&lt;u&gt;</code>), use the <a href="ruby"><code>&lt;ruby&gt;</code></a> element.</p> <p>To apply an underlined appearance without any semantic meaning, use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property's value <code>underline</code>.</p>
+</div>
+<h2 id="examples">Examples</h2>
+
+<h3 id="indicating_a_spelling_error">Indicating a spelling error</h3>
+<div class="section-content">
+<p>This example uses the <code>&lt;u&gt;</code> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.</p> <h4 id="html">HTML</h4> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="JYfqiR5W3qppbN5ulAJs3FVGHbMT9jxksTSiMceyVEE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This paragraph includes a <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spelling<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>wrnogly<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u</span><span class="token punctuation">&gt;</span></span> spelled word.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <p>In the HTML, we see the use of <code>&lt;u&gt;</code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p> <h4 id="css">CSS</h4> <div class="code-example">
+<p class="example-header"><span class="language-name">css</span></p>
+<pre data-signature="dKcteSUJM1HU1FcZqhqAJkYjKSuMX+gr9Jt3bHTSWHI=" data-language="css"><span class="token selector">u.spelling</span> <span class="token punctuation">{</span>
+  <span class="token property">text-decoration</span><span class="token punctuation">:</span> red wavy underline<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</pre>
+</div> <p>This CSS indicates that when the <code>&lt;u&gt;</code> element is styled with the class <code>spelling</code>, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using <code>red dashed underline</code>.</p> <h4 id="result">Result</h4> <p>The result should be familiar to anyone who has used any of the more popular word processors available today.</p>
+<div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="Indicating a spelling error sample" id="frame_indicating_a_spelling_error" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=indicating_a_spelling_error" loading="lazy"></iframe>
+</div>
+</div>
+<h3 id="avoiding_u">Avoiding &lt;u&gt;</h3>
+<div class="section-content">
+<p>Most of the time, you actually don't want to use <code>&lt;u&gt;</code>. Here are some examples that show what you should do instead in several cases.</p> <h4 id="non-semantic_underlines">Non-semantic underlines</h4> <p>To underline text without implying any semantic meaning, use a <a href="span"><code>&lt;span&gt;</code></a> element with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>"underline"</code>, as shown below.</p> <h5 id="html_2">HTML</h5> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="9XcB15mQ8LktEFzDTS/pHleaGVi1POMKlUzF95qnK38=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>underline<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Today's Special<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
+Chicken Noodle Soup With Carrots
+</pre>
+</div> <h5 id="css_2">CSS</h5> <div class="code-example">
+<p class="example-header"><span class="language-name">css</span></p>
+<pre data-signature="lhjHvumCvagO0Wocf88gqstu9IJJa8ICORUDDKkqpbs=" data-language="css"><span class="token selector">.underline</span> <span class="token punctuation">{</span>
+  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</pre>
+</div> <h5 id="result_2">Result</h5>
+<div class="code-example" id="sect4">
+
+<iframe class="sample-code-frame" title="Non-semantic underlines sample" id="frame_non-semantic_underlines" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=non-semantic_underlines" loading="lazy"></iframe>
+</div> <h4 id="presenting_a_book_title">Presenting a book title</h4> <p>Book titles should be presented using the <a href="cite"><code>&lt;cite&gt;</code></a> element instead of <code>&lt;u&gt;</code> or even <code>&lt;i&gt;</code>.</p> <h5 id="using_the_cite_element">Using the cite element</h5> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cite</span><span class="token punctuation">&gt;</span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cite</span><span class="token punctuation">&gt;</span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div>
+<div class="code-example" id="sect5">
+
+<iframe class="sample-code-frame" title="Using the cite element sample" id="frame_using_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=using_the_cite_element" loading="lazy"></iframe>
+</div> <h5 id="styling_the_cite_element">Styling the cite element</h5> <p>The default styling for the <code>&lt;cite&gt;</code> element renders the text in italics. You can override that using CSS:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cite</span><span class="token punctuation">&gt;</span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>cite</span><span class="token punctuation">&gt;</span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <div class="code-example">
+<p class="example-header"><span class="language-name">css</span></p>
+<pre data-signature="KOazMaZHLmsqODOwqfdrIpKB0RsMGpSDYiXqA8AAy3Q=" data-language="css"><span class="token selector">cite</span> <span class="token punctuation">{</span>
+  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
+  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</pre>
+</div>
+<div class="code-example" id="sect6">
+
+<iframe class="sample-code-frame" title="Styling the cite element sample" id="frame_styling_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=styling_the_cite_element" loading="lazy"></iframe>
+</div>
+</div>
+<h2 id="technical_summary">Technical summary</h2>
+<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>
+<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure></div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-u-element">HTML Standard <br><small># the-u-element</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>u</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">15</td>
+<td class="bc-supports-yes">≤4</td>
+<td class="bc-supports-yes">4.4</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">14</td>
+<td class="bc-supports-yes">≤3.2</td>
+<td class="bc-supports-yes">1.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>The <a href="span"><code>&lt;span&gt;</code></a>, <a href="i"><code>&lt;i&gt;</code></a>, <a href="em"><code>&lt;em&gt;</code></a>, <a href="b"><code>&lt;b&gt;</code></a>, and <a href="cite"><code>&lt;cite&gt;</code></a> elements should usually be used instead.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property should be used for non-semantic underlining.</li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u</a>
+  </p>
+</div>