👩‍💻Underline Using CSS text-decoration & The HTML U Element👨‍💻

Last Updated –

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.

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:

Let’s underline some important text!

How Do You Underline Text in CSS Using 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.

Some examples:

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.

In addition to underling and overlining text you can also apply a strike-through. The line-through value renders a line through
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.

A cool text-decoration trick is combining each value: underline, overline, or line-through as a space-separated list. This applies all the line styles to the text:

It looks something like this: I have lots of lines

Dressing Up text-decoration Lines with text-decoration-* Properties

As with just about every major CSS property there is a collection of ‘extended’ properties you can set to apply more granular control and customization.

For text-decoration these include:

These extended properties give you control that mimics using the border properties (see below).

What is the HTML Code for Underline? The HTML U Element

html-underline-css-text-decoration-markupThe HTML 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.

Using Borders to Create Underlines

The text-decoration CSS property is a great for text, but can be limited from a design perspective and not relevant to non-text content types. The CSS border properties can also be used to render underlines.

Managing Anchor Text Underlines

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.

How to Remove an Underline from a Hyperlink in CSS

Just as you can add and style an underline using the CSS text-decoration property you can remove one as well. This can be handy when you need to remove an underline from an anchor.

Set the text-decoration value to none and all formatting is removed.

The A or anchor tag underlines text by default. You should also note you must explicitly add the ‘a’ to the selector to override the default behavior.

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