Why is <u> evil while <strong> and <em> is not?

Question

Well I know it's not evil just not as pretty in semantics as <strong> and <em> right?

However, with <b> becoming more semantic as <strong> and <i> as <em>, why isn't there a semantic twin for <u>?

In styling:

So there's a CSS style text-decoration:underline for <u>, but isn't there one font-weight:bold for <strong> already? Thus goes <em> too.

In semantics:

<strong> is semantic for what? Strongly emphasized text? <em> is semantic for what? Emphasized text? Anything fundamentally different from each other and mutually exclusive? No. Why can't there be another way to emphasize text? You know, like the way <u> does and makes up a semantic twin for it too - I guess it's just <strong> and <em> are already well implemented in all major browsers before the <b> and <i> become obselete.

I know, now that it's officially become standards, you just have to go with it. Or please have your say: is there a compelling reason to make <u> out of view?

Answer 1

It gets mistaken for a hyperlink.

Answer 2

font-weight:bold is not equivalent to strong. The strong tag has that attribute by default, but you're free to make it underline or turn red or anything else you like. That's the point: It does not specify styling.

Answer 3

If a semantic twin was created for every previously existing styling tag, all we'd be doing is the same old thing, albeit with new names.

<strong> and <em> are used to give meaning to the marked up text. Their default styling corresponds to <b> and <i> because that's what most people mean by strong and emphasis -- But that can be changed. Whereas using CSS to change a <b> may seem counter intuitive.

So the direct answer to your question is: <strong> and <em> impart meaning to the text, whereas <u> and the others impart styling to the text, which is now done by CSS. The styling applied by the others is incidental.

Answer 4

The web just doesn't lend itself to underlined text. I agree with Greg that it could easily be confused with a link.

Answer 5

it is not semantic. we live in a world of increasing importance of semantics in our code, because we are sick of trying to decipher some other coders "it makes sense to me" mess.

Answer 6

Underlining is ugly, be it in books or on the web. So it should only be used for emphasis in handwritten text, where there is no alternative.

Answer 7

<strong> is semantic for what? Strongly emphasized text? <em> is semantic for what?

‘Emphasis’ and ‘strong emphasis’ are not well-defined, so the semantic content is quite low.

You can come up with your own interpretation: for example, I personally use:

• <em> is for parts of a sentence that would be stressed when spoken out loud

• <strong> is for stretches of text that need to be visually picked out: for example particularly important sentences, and visual scanning keywords.

This is consistent and to some extent matches typical use, but it is not mandated by HTML.

and <i> as <em>

<em> is not a 1:1 fit with italics even disregarding the styling issue. There are other reasons for using italics, including:

• <cite>ing other works, according to HTML 4.01 Specification

• picking out phrases from other languages to the main text, which is <span lang="fr">'s raison d'être

why isn't there a semantic twin for <u>

Because everyone hates <u>.

Even in HTML2 days it was rarely used, because it's so ugly.

Answer 8

Underlining is a leftover from the age of the typewriter. At that time there was no option for neither italic nor bold, so the only way to emphasize words was to use underline. The nice thing about underline (from a typewriter designer point of view) is that you can modify existing characters, so you don't need to have an entire set of extra characters.

It is not beautiful and there is no longer any need for it, so please use italic or bold instead.

The problem is only more pronounced as underlining is the standard decoration for links in HTML.

Answer 9

In styling:

So there's a CSS style text-decoration:underline for <u>, but isn't there one font-weight:bold for <strong> already? Thus goes <em> too.

No. There isn't a CSS style for <strong> or <em>. There are CSS tags for bold, but that is not the same thing. strong and em do not mean bold. They mean emphasize. Emphasize can be done with underlining, with italic or with bold in a textual media, and it's up to the stylesheet to decide which. But the semantic meaning is simply "this text is emphasized". And how would you implement "underline" in a screen reader? It doesn't make sense. underline is specific to textual media, and thus belongs in the specific stylesheet for textual presentation, and not in the semantic HTML which could be used to present data through speech or any other media.

In semantics:

<strong> is semantic for what? Strongly emphasized text? <em> is semantic for what? Emphasized text? Anything fundamentally different from each other and mutually exclusive? No. Why can't there be another way to emphasize text? You know, like the way <u> does

Because strong and em do not specify how the text should be emphasized, just that it should be emphasized. underline specifies how it should be emphasized, thus it has to do with presentation, rather than semantics, and belongs in a CSS file. I agree that the difference between strong and em is vague, but then again, we also have h1-h7. The point is that even without a stylesheet, a reader should be able to infer that "this is bigger headline than that", and so also "this text is more emphasized than that". The semantic meaning of tags do not have to be fundamentally different from each others. It's perfectly meaningful to have semantic tags that simply mean "more so than this other semantic tag". Because sometimes we have a need for several layers of headlines in our text, so we have h1-h7. And sometimes we have a need for text that is emphasized, and text that is very emphasized. But even if we didn't, it still wouldn't be an excuse for adding <u> as "another semantic twin", because it isn't. It's not a semantic twin, it is nothing in semantics. underline does not necessarily mean emphasis. It could mean headline as well, or it could mean "this is a link", or it could mean anything else you want it to mean. It is a presentation detail. And it is meaningless in a non-text media. "emphasis" is not a presentation detail. It carries a semantic meaning which makes sense no matter the media. You can emphasize information in movies too, or in video games, or in text read aloud.

You seem to be under the impression that strong and em are just shorthand (or longhand) for bold or italic. That's not true. They may be used to present bold text, underlined text, or italic text, or larger text. Or they can be ignored completely. Or they may simply alter the pronunciation in a screen reader. If you've ever written documents in LaTeX, you'll note that the \emph command there is typically rendered as italic, not bold. Of course it's not required to, but that's a perfectly legal interpretation of the semantic "emphasis" command. Similarly, there are many other tags which may just end up rendered as italic (quotes, or span tags with certain CSS classes or even headlines.
<u>, on the other hand, has a very specific meaning in presentation, but carries no semantic value. What information does it convey to the reader? <strong> carries the meaning "this text is highlighed and should be paid attention to", because it is strongly emphasized. What does it mean for text to be underlined? It could mean nothing, or it could mean a dozen different things. "italic", "bold" or "underline" are presentational attributes with no semantic meaning. They can be applied to any semantic HTML tag you like. And semantic tags like strong or em can use any presentational CSS rules you like. There is no 1:1 mapping as you seem to believe. They are different concepts. The fact that the browser by default chooses to render strong text as bold is completely irrelevant. That's just a default behavior, because they had to choose something, and it can be overridden in CSS.

It's not a question of "can this be done in CSS", or "Is this a semantic twin of that", but simply "does it have a semantic meaning? Does it have a presentational meaning"? If yes to both, it should be changed and/or removed entirely. If yes to the former, it belongs in HTML, and if yes to the latter it belongs in CSS.

Answer 10

The semantic twin of <u> is <a>. ^_^ This is a bit facetious, but it's true. On the web, underlined text denotes a link by default; this pattern is so old and well-established that nearly every single (sighted) person on the web has automatically interned it as part of how they interact with a page.

HTML5 defines slightly different meanings for <em> and <strong>, specifically so you don't just have two tags that both do the same thing semantically. That just invites questions like yours, where you wonder why there isn't just a third way to emphasize something with an underlined presentation (or what-have-you) by default.

In HTML5, <em> still denotes emphasis. Using an <em> changes the meaning of a sentence by putting a focus on particular words or phrases. <strong>, on the other hand, denotes importance. Marking a word or phrase as important does not change the meaning of the sentence, it merely directs your attention.

As usual, the standard caveats about <em> being rendered with italics by default and <strong> being rendered with bold text by default, but it being perfectly possible and appropriate to change the presentation of either, applies. For example, a screen reader may use different inflections for the two tags. This is the whole reason that semantics exist - so that we can allow the presenter to decide the best way to present the data; us mortal authors can't possibly get the presentation correct in every possible medium.