How to Underline Text in HTML

Underlining text in HTML is a classic way to add emphasis or denote hyperlinks. While the visual effect is straightforward, there are various methods and best practices for implementing text underlines in HTML.

This blog post explores different techniques for underlining text, ensuring your web content is both visually appealing and accessible.

Basic Underlining with HTML

Use the <u> Tag

The simplest way to underline text in HTML is with the <u> tag. This tag is straightforward:

<u>This text is underlined.</u>

While effective, the <u> tag is not recommended for hyperlinks or important content because it lacks semantic meaning.

Style Underlines with CSS

CSS Text Decoration

A more flexible and recommended approach is to use CSS. The text-decoration property allows you to underline text and provides additional styling options.

.underline {
  text-decoration: underline;
}

Apply this class in your HTML:

<p class="underline">This text is underlined.</p>

Advanced Underline Styling

Customize Underline Color and Style

CSS offers more control over the appearance of underlines. You can change the color and style:

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

Use the border-bottom Property

For even more customization, such as spacing between the text and underline, use the border-bottom property:

.custom-underline {
  border-bottom: 2px solid blue;
  padding-bottom: 2px;
}

Best Practices for Underlined Text

Accessibility Considerations

Ensure that underlined text is easy to read and distinguishable from non-underlined text, especially for users with visual impairments.

Use for Hyperlinks

Underlining is a common convention for hyperlinks. It’s a visual cue for users that text is clickable.

Avoid Overuse

Excessive underlining can make content cluttered and harder to read. Use underlines sparingly and purposefully.

Underlining text in HTML is a versatile tool for adding emphasis to your content. Whether you use basic HTML tags or advanced CSS styling, underlines can enhance the user experience when applied thoughtfully. Remember to prioritize readability and use underlines in a way that supports the overall design and functionality of your website.