The <u> element

Short for ‘Underline’. Text that is annotated in some unspecified way that needs to be displayed, such as for highlighting a misspelt word. Usually shown as underlined text, but of course that can be overridden. Best avoided if at all possible.

Presentational to semantic

The <u> element is one of the old presentational elements which have been part of HTML from the start. It used to have no meaning except that its contents should be presented underlined. HTML5 has removed things like that, but in this case, rather than remove an element which is still widely (mis)used, the new spec has simply given it a semantic purpose.

The new meaning for <u> is that the text is different from other text in some way, and that distinction should be made clear to the user, but that HTML doesn't have a more specific or appropriate way to describe it. In other words, you know it's a special piece of text, but you either don't know, or can't articulate in the markup, exactly what is special about it.

There are other elements which are more appropriate in almost all cases. For example <em> for emphasis, <b> for keywords, etc. Of course these elements can be styled with underlining using CSS if it's the presentational aspect you want. The important thing as far as the HTML markup is concerned is what the meaning of the content is.

Probably most of the remaining uses for <u> will be in marking up off-line documents, where pieces of text may be underlined, or highlighted in some other way, and it may not be entirely clear what the significance of that is. If you're typing up a complicated legal document as HTML, and the original author has underlined parts of the text, it might be safer to use <u> than to try to figure out what the legal importance of those parts are. The same applies to old historical documents being archived, which might use typographical conventions that aren't clear today.

Why you shouldn't use underlining

Apart from the fact that it's rarely needed, the <u> element presents a usability problem with its default styling. When users see underlined text on a web page, they tend to expect it to be a hyperlink. Usually links are colour-coded, and in the early days of the web they were almost always blue, but with a more varied array of link styling on the modern web it can sometimes be hard to tell what is supposed to be a link and what isn't. Some websites even use underlining alone to indicate a link, although most people would consider that a bad idea. All of which means that underlined text which isn't a link may make your site harder to use, and may annoy users who reach to click on a link that turns out not to be one.

There's also an aesthetic argument against underlining: it just doesn't look very good. Typographers usually don't use it because it's considered ugly, the kind of typography associated with badly prepared Word documents and typewritten manuscripts. Whether such nit-picking typographical concerns are relevant to your website depends on what you're trying to achieve.

Full list of attributes

All the usual HTML global attributes are available

Further information

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom