👩‍💻 How to Underline Using CSS text-decoration Property and HTML Using the U Element

Underlines are a way to bring attention to important text. There are two primary ways to underline text in web pages, the U element and the CSS text-decoration property.

warning-sign-at-beachBoth are simple to use, the U element adds semantic value to the meaning and may help your content SEO. The other can be rendered on demand, which makes changing the underline state easy by applying a CSS class(es) to the text.

There are different positions on whether underlines are helpful when conveying meaning or accessibility. Color alone may not be enough to convey meaning, and underlines are a natural way to add extra user experience value.

WCAG shares that position.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

You should also be careful when using underlines because they are most often associated with hyperlinks.

In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it�s a link

Off the web underlines are great for emphasis. They draw attention to important aspects of the message.

This image demonstrates the point by not only relying on a larger font, but underlining 'Warning'.

Underlines have several benefits:

  • Familiarity: Widely understood web convention. Users understand that underlined text is a link.
  • Scannability: When vertically scaning a page horizontal lines cut right through our line of sight.
  • Accessibility: According to the WCAG 2.0, color shouldn�t be the only visual indicator of a potential action. If you want your website to be accessible, you�ll have to add another visual cue to links, and underlining is a logical choice.

Let's underline some important text!

Underlining Text with Just the U HTML Element

html-underline-css-text-decoration-markupThe U element, shorthand for underline, applies an underline to the enclosed text. It works much like the SPAN element, but adds semantic meaning to the content.

It you need to convey meaning to assistive technologies or search engine spiders using elements like U can make it easier for these automated tools understand the emphasis.

The U element typically has the same default styles as the SPAN element. This means it has a display:inline-block. This allows it to be used within a string of text (typically within a P tag) without changing the larger body of text's flow.

You would not want underline text to add line breaks or suddenly change the justification settings, etc. That would disrupt the reader's engagement.

You can also add styles via classes to a U element to further control how underlined text is rendered. For example you could change the color, font-face and letter spacing.

To further help assistive technologies you will want to add the aria-{underline setting}. Remember adding meta values to elements is very helpful to these technologies. They may also be used by search engines.

Underlining with CSS text-decoration

html-css-underlined-textA more flexible way to underline text is with the text-decoration property. It can also be used to remove underlines in hyperlinked text and add overlines.

An overline is the opposite of an underline. It renders a line above the text.

You can also use both underline and overline values for the same class definition.

     
.overline { text-decoration: overline; }

.strike-through { text-decoration: line-through; }

.underline { text-decoration: underline; }

.over-under-lines { text-decoration: underline overline; }

The text-decoration property controls different ways the text can be rendered. By setting text-decoration to underline the text within the element is underlined.

The best way to do this, if the text is part of a paragraph or sentence, is to wrap it within a SPAN tag. You can apply the class with the underline property to the containing SPAN tag.

{SPAN HTML}

{text with underline in span}

In addition to underling and overlining text you can also apply a strike-through. The line-through value renders a line throught eh middle of the enclosed text.

Typically CSS does not convey semantic meaning like an element. This does not mean it won't be used that way. The Google bot is pretty sophisticated and can interpret styles to convey meaning.

For the most part they are evaluating color contrasts, at least that is my impression. I also think they are looking for underlined, bold and possibly slight color contrasts to look for special text.

I do know they use bold text as small signal toward the keyword you are targeting.

You can also use the text-decoration to remove an underline from anchor elements. Browser default stylesheets all underline links by default. This goes back to the web's early days.

Today, it is better to customize hyper link styles. They may be used for many functions, like navigation or application actions.

A link within a paragraph may want to be underlined, but often they are bolded or some other style set applied that makes them stand out from the surrounding text.

Wrapping It Up

There are two primary ways to underline text, the U tag and the text-decoration CSS property. The U element can apply semantic meaning to the underlined content the CSS technique may not convey to automated tools.

The CSS text-decoration approach is a little more flexible and is the approach I recommend.

You can grab the source code from my samples repository

Share This Article With Your Friends!