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:
Source Code | Result |
---|---|
This text has been underlined |
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.
Source Code | Result |
---|---|
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:
Source Code | Result |
---|---|
This paragraph has a bottom border. |
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:
Source Code | Result |
---|---|
1 pixel, solid, black... 1 pixel, dotted, black... 10 pixels, double orange... 1 pixel, dashed green... |
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.