<u> HTML Tag
- Element of
- Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
- What does
<u> HTML Tag
do? - The <u> element was originally used to identify text that should be underlined. The element was deprecated in HTML 4.01, but in HTML5 it was redefined to represent text that should be displayed in a way that is an unarticulated but stylistically distinct from the surrounding text. For example, one proper use of the <u> element is to identify misspelled terms.
- Display
- inline
- Usage
- semantic
Code Example
<p>Here is a word that is <u>underlined</u> by the <code><u></code> element.</p>
<p>Here is a word that is <span class="underline">underlined</span> with CSS.</p>
<p>Here are words surrounded by <code><u></code> tags with <u class="unarticulated">unarticulated but explicitly rendered</u> styling.</p>
<style>
.underline {
text-decoration: underline;
}
u.unarticulated {
text-decoration: none;
color: #000080;
font-style: italic;
}
</style>
Here is a word that is underlined by the <u>
element.
Here is a word that is underlined with CSS.
Here are words surrounded by <u>
tags with unarticulated but explicitly rendered styling.
When to use the <u>
Element
When the <u>
element was initially conceived it was supposed to be used to identify text that should be underlined. However, using HTML to add stylistic effects is no longer considered good practice. Instead, HTML should be used to add structure and semantic meaning to the content of a webpage, and CSS should be used to add styles and control page layout.
What that means is that old tags like <u>
that were originally conceived with presentation in mind have to be recast with semantic meaning, or deprecated and removed from the HTML specification.
So what semantic meaning does this element convey in modern HTML? According to the HTML5 specification published by the W3C:
The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation…
You’re sorry you even asked, aren’t you? Let’s clarify that definition a bit.
First, what is a non-textual annotation? Well, to add an annotation means to add an explanation or note. However, in this case, the annotation is non-textual, meaning that the annotation has nothing to do with the content of the text.
Second, the annotion is unarticulated but explicitly rendered. In other words, the browser and web developer can choose to show the annotation any way they like. Be default, browsers will render text surrounded by u
tags as underlined, but that isn’t necessarily required and isn’t part of the HTML specification. The way the annotation should appear is unarticulated, show it any way you like. Just make sure the annotation is easy to spot, in other words: explicitly rendered.
Let’s put the pieces together. The u
element is used to:
- Add an annotation that tells us something about the selected text itself, not about the content or message of the text.
- The way the annotation is added is unarticulated. Words between
u
tags don’t have to be underlined, any method of annotation is acceptable as long as… - The annotation must be explicitly rendered, that is: easy to spot.
So what sorts of use-cases are there for such a niche tag? The most common use is to identify misspelled words. Let’s say you are presenting text that includes intentionally misspelled words that should jump out to the reader. The <u>
element would be a great choice for identifying those words.