HTML <u> Tag

The HTML <u> tag is used to underline text on a webpage. Although it was primarily used for underlining in older HTML versions, its modern usage is more semantic. The <u> tag is now used to represent text with non-textual annotations, such as misspelled words, proper names in Chinese, or terms with special emphasis.

For purely visual styling, it is recommended to use CSS rather than the <u> tag. However, the <u> tag remains useful for semantic underlining when a specific meaning is implied.

Basic Syntax of HTML <u> Tag

The basic structure of the <u> tag is:

</>
Copy
<u>Underlined text</u>
HTML <u> Tag Example

Text enclosed within the <u> tags will be displayed with an underline by default.

Example of Using the <u> Tag

Here’s an example of underlined text using the <u> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>This is an example of <u>underlined text</u> using the <u> tag.</p>
    </body>
</html>
Example of Using the <u> Tag

Explanation: The text “underlined text” is displayed with an underline.

Styling Underlined Text with CSS

Instead of relying on the <u> tag for styling, you can use CSS to underline text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            .underline {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <p>This text is <span class="underline">underlined with CSS</span>.</p>
    </body>
</html>
Styling Underlined Text with CSS

Result: The text “underlined with CSS” is underlined using the text-decoration property in CSS.

Semantic Use of the <u> Tag

Modern usage of the <u> tag includes scenarios where the underlining conveys meaning. For example, indicating proper names in Chinese text or marking spelling errors:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>This word is <u>mispelled</u> to indicate a spelling error.</p>
    </body>
</html>
Semantic Use of the <u> Tag

Explanation: The <u> tag highlights the word “mispelled” to indicate that it is intentionally marked as a spelling error.

Accessibility Considerations

When using the <u> tag, ensure that the underlining conveys meaning and does not confuse users. For purely visual effects, use CSS. Additionally, underlining text that isn’t a hyperlink can sometimes confuse users, as underlining is commonly associated with clickable links.

Practical Applications of the <u> Tag

  • Highlighting Spelling Errors: Mark words to indicate spelling mistakes or corrections.
  • Non-Textual Annotations: Use underlining to highlight proper names or special terms in certain contexts.
  • Emphasizing Important Text: When underlining carries semantic meaning (e.g., marking key terms or annotations).