HTML u Tag

HTML <u> Tag: Underlining Text

The <u> tag in HTML is used to underline text. However, in modern web design, underlining is typically done with CSS instead of <u> because the tag was originally used for misspelled words or stylistic purposes.

1. Basic Syntax

<p>This is a <u>underlined</u> word.</p>

✅ Displays:
This is a underlined word.

2. When to Use <u>

• To underline important text (but avoid using it for emphasis—use <strong> or <em> instead).

• To represent misspelled words (though <ins> or <s> might be better).

• To underline non-clickable elements (avoid for links, as underlining is associated with hyperlinks).

3. Styling <u> with CSS

Instead of using <u>, you can underline text with text-decoration in CSS:

<style>
  .custom-underline {
    text-decoration: underline;
    color: blue;
  }
</style>

<p>This is a <span class="custom-underline">custom underlined</span> text.</p>

✅ This allows more styling control (color, thickness, etc.).

4. Changing Underline Style with CSS

You can modify the underline appearance with text-decoration-style:

<style>
  .dashed-underline {
    text-decoration: underline;
    text-decoration-style: dashed;
  }

  .wavy-underline {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
  }
</style>

<p class="dashed-underline">This text has a dashed underline.</p>
<p class="wavy-underline">This text has a red wavy underline.</p>

✅ Available styles: solid, dotted, dashed, double, wavy.

5. <u> vs Other Tags

Tag	Purpose	Example
<u>	Underlined text (stylistic)	<u>Underlined</u>
<ins>	Represents inserted text (semantic)	<ins>Inserted text</ins>
<s>	Represents deleted/incorrect text	<s>Old price</s>
text-decoration (CSS)	Custom underline styling	text-decoration: underline;

6. Conclusion

• <u> underlines text but is not recommended for styling.

• Use CSS (text-decoration) for better control.

• <ins> is better for semantic meaning (e.g., showing changes in documents).