How to Underline Text in HTML

What you’ll build or solve

You’ll underline specific text in HTML without breaking usability.

When this approach works best

This approach works best when you need an underline for meaning, or for a controlled visual style.

Use it when you:

• Underline links, since that’s the default expectation on the web.
• Mark an annotation or a specific term in a learning example.
• Add an underline style to headings or labels as part of a design system.

Skip this approach when:

• You’re underlining random words just for emphasis. Bold or italics usually read better.
• You’re underlining non-links in dense body text. People may try to click it.

Prerequisites

None. You only need an HTML file.

Step-by-step instructions

Step 1: Underline text using HTML or CSS

Underline has different meanings depending on context, so pick the option that matches your goal.

Option A: Use <u> for an annotation (rare, but valid)

<u> marks text that has a special annotation, such as a misspelling. It’s not meant for general “make this look underlined.”

<p>Please fix the<u>adress</u> field before submitting.</p>

Option B: Use CSS for styling (most common)

Use CSS when you want an underline purely for appearance.

<p><spanclass="underline">Underlined text</span> inside a sentence.</p>

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

Option C: When underlines are expected, links

Underlines signal “this is clickable” for many people. For links, underlining is normal and helps with scanning and accessibility. You can keep the default underline, or set it explicitly.

<ahref="/docs">Read the docs</a>

<style>
a {
    text-decoration:underline;
  }
</style>

What to look for

• If the underlined text isn’t a link, consider a different style or make it a real link.
• If you underline a whole block, it becomes hard to scan and can look like one big link.

Examples you can copy

Example 1: Underline a single word with CSS

<p>Type<spanclass="underline">npm install</span> to install packages.</p>

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

Example 2: Underline only on hover for links

<aclass="nav-link"href="/pricing">Pricing</a>

<style>
  .nav-link {
    text-decoration:none;
  }

  .nav-link:hover {
    text-decoration:underline;
  }
</style>

Example 3: Style a heading with an underline

<h2class="section-title">Getting started</h2>

<style>
  .section-title {
    text-decoration:underline;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Underlining non-link text that looks clickable

What you might do:

<p><spanclass="underline">Download</span> the file to continue.</p>

Why it breaks:

Many users assume underlined text is a link and try to click it.

Correct approach:

If it’s not a link, use a different emphasis style, or turn it into a real link.

<p><strong>Download</strong> the file to continue.</p>

Or:

<p><ahref="/download">Download</a> the file to continue.</p>

Mistake 2: Removing underlines from links without another clear link style

What you might do:

<aclass="link"href="/docs">Read the docs</a>

<style>
  .link {
    text-decoration:none;
  }
</style>

Why it breaks:

Links can become hard to spot, especially for accessibility and scanning.

Correct approach:

Keep an underline, at least on hover or focus.

<aclass="link"href="/docs">Read the docs</a>

<style>
  .link {
    text-decoration:none;
  }

  .link:hover,
  .link:focus-visible {
    text-decoration:underline;
  }
</style>

Mistake 3: Underlining too much text

What you might do:

<pclass="underline">
  This whole paragraph is underlined and becomes harder to read quickly.
</p>

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

Why it breaks:

Long underlined blocks reduce readability and look like a giant link.

Correct approach:

Underline only the part that needs it.

<p>
  Underline only<spanclass="underline">the key phrase</span> you want to call out.
</p>

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

Troubleshooting

• If underlining doesn’t show, check if another CSS rule overrides text-decoration, which is common with link styles.
• If a link underline disappears after styling, add underlines back on :hover and :focus-visible.
• If the underline sits too close to the text, try text-underline-offset in CSS.
• If the underline is too thick, adjust it with text-decoration-thickness.
• If nothing changes, confirm your class name matches and your <style> block loads.

Quick recap

• Use CSS text-decoration: underline for most underlines.
• Use <u> only when you mean an annotation, not general emphasis.
• Treat underlines as a clickable signal and be careful about underlining non-links.
• Underline short phrases, not full paragraphs.
• If it looks wrong, check CSS overrides and tweak the underline offset or thickness.