HTML Tag

❮ Prev Next ❯

In HTML 4.01, the element was used to specify an underlined text. But the usage of HTML for stylistic effects isn’t a good practice anymore. Instead, it should be used for adding structure and semantic meaning.

In HTML5, the element has a new, semantic meaning and specifies a text, which is stylistically different from a normal text, i.e., words or fragments of text that must be presented differently. These can be misspelled words or proper nouns in Chinese.

The tag defines a span of text having an unarticulated but exactly rendered annotation. This means that the web developer and browser can choose how to show the annotation. Adding an annotation means adding a note or explanation. It must be non-textual. Browsers render a text surrounded by tags as underlined, although it isn’t necessarily required.

The text in the tag is being underlined (unless you style it otherwise).

This element should not be used just to underline the text because it is a deprecated HTML tag. For this purpose, use the CSS text-decoration property set to "underline".

In some cases, consider using other elements, such as:

for stress emphasis,
for drawing attention to a text,
<cite> for book titles,
for technical terms,
for highlighting phrases or key words,
for specifying a text with strong importance.

If you want to add textual annotations, use the <ruby> tag.

Syntax

The element comes in pairs. The content is written between the opening () and closing () elements.

Example of the HTML tag:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; element</u>.</p>
  </body>
</html>

Try it Yourself »

Result

Example of the CSS text-decoration property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
    <style>
      span {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>Here we used <span> CSS property text-decoration:underline</span>.</p>
  </body>
</html>

Try it Yourself »

Attributes

The tag supports the Global attributes and the Event Attributes.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

CSS text-shadow property adds shadow to text.
CSS text-align-last property sets the alignment of the last line of the text.
CSS line-height property specifies the height of a line.
CSS letter-spacing property defines the spaces between letters/characters in a text.
CSS word-spacing property sets the spacing between words.