HTML Underline Code

This page demonstrates how to create an underline under any text or other HTML element.

There are two main ways of creating an underline. The method you use will depend on what you're trying to achieve. Actually, there are three main ways, but one of these is outdated. More on that below.

Underline Text

You can use the CSS text-decoration property to specify that an underline should appear under your text. Like this:

Removing an Underline

The text-decoration property is commonly used to remove underlines from hyperlinks. To do that, simply use text-decoration:none;.

To demonstrate this, the following example uses a paragraph that has been underlined, but which also contains text inside a <span> element which has had the underline removed.

Underline Any HTML Element

You can use the CSS border-bottom property to add an underline to any HTML element. Actually, it's not really an underline. It's simply a border that runs along the bottom of the element. Here's an example:

The good thing about the border-bottom property (as with all CSS border properties), is that you can specify different styles for the border. Here are some to give you an idea:

For more border styles, check out HTML borders over at Quackit.

A Note on Usability

Underlining normal text on the web can cause usability problems. This is because most web users have become accustomed to associating underlined text with a hyperlink. This is because browsers typically underline hyperlinks (unless the developer has specified otherwise). Therefore it's not recommended to underline text unless you really need to (or the text is a hyperlink).

If you need to emphasize text, use the <em> tag. To place extra importance on text, use the <strong> tag. These elements were created specifically for those purposes, and browsers usually render this text appropriately.

Removing underlines from hyperlinks can also cause usability issues. If you choose to do this, make sure users have some other way of distinguishing hyperlinks from normal text. Usually different colored text will suffice, but be sure to use a color that won't cause problems for users who are color-blind.