: The Unarticulated Annotation (Underline) element #

::: section-content The  HTML 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.

::: {#sect1 .notecard .warning} Warning: 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 text-decoration property set to underline. ::: :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

You could use this element to highlight speling mistakes, so the writer can corect them.

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} p { margin: 0; }

u {
  text-decoration: #f00 wavy underline;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

See the Usage notes section for further details on when it's appropriate to use  and when it isn't. :::

Attributes #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content Along with other pure styling elements, the original HTML Underline () element was deprecated in HTML 4; however,  was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

::: {#sect2 .notecard .note} Note: Avoid using the  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. ::: :::

Use cases #

::: section-content Valid use cases for the  element include annotating spelling errors, applying a proper name mark{target="_blank"} to denote proper names in Chinese text, and other forms of annotation.

You should not use  to underline text for presentation purposes, or to denote titles of books. :::

Other elements to consider using #

::: section-content In most cases, you should use an element other than , such as:

 to denote stress emphasis
 to draw attention to text
 to mark key words or phrases
 to indicate that text has strong importance
<cite> to mark the titles of books or other publications
 to denote technical terms, transliterations, thoughts, or names of vessels in Western texts

To provide textual annotations (as opposed to the non-textual annotations created with ), use the <ruby> element.

To apply an underlined appearance without any semantic meaning, use the text-decoration property's value underline. :::

Examples #

Indicating a spelling error #

::: section-content This example uses the  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.

HTML #

::: code-example [html]{.language-name}

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

:::

In the HTML, we see the use of  with a class, spelling, which is used to indicate the misspelling of the word "wrongly".

CSS #

::: code-example [css]{.language-name}

u.spelling {
  text-decoration: red wavy underline;
}

:::

This CSS indicates that when the  element is styled with the class spelling, 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 red dashed underline.

Result #

The result should be familiar to anyone who has used any of the more popular word processors available today.

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Avoiding #

::: section-content Most of the time, you actually don't want to use . Here are some examples that show what you should do instead in several cases.

Non-semantic underlines #

To underline text without implying any semantic meaning, use a  element with the text-decoration property set to "underline", as shown below.

HTML #

::: code-example [html]{.language-name}

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

:::

CSS #

::: code-example [css]{.language-name}

.underline {
  text-decoration: underline;
}

:::

Result #

::: {#sect4 .code-example} ::: iframe ::: :::

Presenting a book title #

Book titles should be presented using the <cite> element instead of  or even .

Using the cite element #

::: code-example [html]{.language-name}

<p>The class read <cite>Moby Dick</cite> in the first term.</p>

:::

::: {#sect5 .code-example} ::: iframe ::: :::

Styling the cite element #

The default styling for the <cite> element renders the text in italics. You can override that using CSS:

::: code-example [html]{.language-name}

<p>The class read <cite>Moby Dick</cite> in the first term.</p>

:::

::: code-example [css]{.language-name}

cite {
  font-style: normal;
  text-decoration: underline;
}

:::

::: {#sect6 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`generic`
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-u-element]{.small}

:::

Browser compatibility #

::: _table #

    Desktop                                                          Mobile

    Chrome    Edge   Firefox             Internet   Opera   Safari   WebView   Chrome    Firefox   Opera     Safari   Samsung
                                         Explorer                    Android   Android   for       Android   on IOS   Internet
                                                                                         Android

u 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0

                     Before Firefox 4,                                                                                
                     this element                                                                                     
                     implemented the                                                                                  
                     `HTMLSpanElement`                                                                                
                     interface instead                                                                                
                     of the standard                                                                                  
                     `HTMLElement`                                                                                    
                     interface.

:::

<u>: The Unarticulated Annotation (Underline) element #

Try it #

HTML Demo: <u> #

Output #

Console Output #

Attributes #

Usage notes #

Use cases #

Other elements to consider using #

Examples #

Indicating a spelling error #

HTML #

CSS #

Result #

Avoiding <u> #

Non-semantic underlines #

HTML #

CSS #

Result #

Presenting a book title #

Using the cite element #

Styling the cite element #

Technical summary #

Specifications #

::: _table #

Specification #

Browser compatibility #

::: _table #

See also #