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.
You can use the CSS
text-decoration property to specify that an underline should appear under your text. Like this:
This text has been underlined
Removing an Underline
text-decoration property is commonly used to remove underlines from hyperlinks. To do that, simply use
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:
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:
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.