How to Underline Text in HTML

Underlines can be used to highlight and emphasize text on web pages. Text can be underlined using CSS style sheets, with the text-decoration property, or, less preferably, with the HTML U element.

Instructions

Difficulty: Easy

Things You’ll Need:

• Text or HTML editor

Underline Text Using CSS

1. Find or enter the text you want to underline.
2. Place the text within a SPAN element, by adding an opening tag before the text and closing tag after.
3. Specify underlining of the text within the SPAN by adding a STYLE attribute to it as follows:
   STYLE="text-decoration; underline; "
4. Add a CLASS attribute to the SPAN, giving the name of a CSS class which defines text underlining. This is an alternative to using the STYLE attribute as described in the preceding step. The format of the CSS class declaration is as follows:
   .my-underlined-class { text-decoration: underline; }

Underline Text Using HTML

5. Find or enter the text you want to underline.
6. Enclose the text within a U element, by placing an opening and closing tag before and after the text.

Tips & Warnings

• If you are using a WYSIWYG HTML editor, look for the underline menu item or toolbar icon to underline text without having to code CSS or HTML.
• The CSS text-decoration property can also be used to place a line over (overline) or through (line-through text, or turn off underlining already in effect (none).
• Remember that underlines are often used on web pages to indicate click-able links, so use underlines sparingly to avoid confusion.