CODEWITHSUNDEEP
htmlsemantic-markupunderline
mowgli
mowgli

Reputation: 2869

What tag should/could I use for underlined text?

First of all, I realize that styling in HTML should be handled by CSS, and I don't want to change that.

I just want a solid tag I can use for underline, a tag that is meant for underlined text, or one that makes sense to use as such. Then I can style it with CSS.

Now where is that tag?

Why is strong, b, em, i etc. perfectly fine (and often auto-styled in browsers), but underlined is the forbidden fruit?

I would hate to write

<span style="blabla: underline">some underlined text</span>
OR <span class="underlined">some text</span>

when I can just use 

<u>hello</u>

and style it?

Upvotes: 5

Views: 4527

Answers (7)

Ali Rad
Ali Rad

Reputation: 1

Most browsers will display the element with the following default values:

Example:

u {
  text-decoration: underline;
}

<p>This is some <u>Text</u> text.</p>

Upvotes: 0

Tijana D.
Tijana D.

Reputation: 1

The u element you can still use for underlining but because it's more complex than b, i,strong and em you will need CSS to style it in detail. Underline has style and color property which is not the case with other mentioned elements. You have more on this topic here.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

The u element was meant for underlining, ever since HTML 3.2. HTML 4.01 frowns upon it by “deprecating” it, and HTML5 proposes to redefine its meaning in an obscure manner. Yet, in reality, it works in all browsers, and will keep working, and has the exact effect of underlining.

Whether you should underline anything but links on web pages is a different issue. So is the question whether you should think in terms of logical structure rather than visual rendering.

Upvotes: 3

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146340

I think the whole issue is better approached if we try to understand what the HTML spec writers are trying to accomplish.

On the early days, HTML was basically the only tool to create hypertext documents so it tried to provide all the necessary stuff. As the web grew up it soon become obvious that this all-in-one solution did not scale. Mixing content and presentation didn't provide full control on either. So two steps were taken:

  • A new language was created to take care of visuals
  • HTML itself was cleaned up to focus on content definition

The problem with underline is that it doesn't really have any meaning by itself. It will have a meaning if you assign it one in your app context (you can decide, for instance, that underline text will be used for book authors in your on-line library catalogue). So when the guys at W3C created HTML tags for several content types (titles, abbreviations, dates...) they simply didn't consider underlining: it was deliberately outside the language scope. There's no HTML tag for "underline" for the same reason that there's no tag for "red circle" or "uppercase Comic-Sans text".

Of course, in fact there is a <u> tag but underline is only a serving suggestion because the important part is the semantics—like printing <h1> with a large font.

Upvotes: 1

Nicolas Henrard
Nicolas Henrard

Reputation: 843

Underline an element is more a style quetion. So, it's better to give a class like "underline_style" and in the CSS give the correct rules.

Upvotes: 0

Golu
Golu

Reputation: 414

It is not forbidden , but a better practice not to use it ,as underline tag is deprecated in HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U so won't validate.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

Underlining text is generally a bad idea because it should be exclusively reserved for links. Users just generally expect to be able to clock on underlined text and have something happen.

That said, there is one main exception I can think of:

Price: <del>£12.34</del> <ins>£9.87</ins>!

Most, if not all browsers will render the new price there with an underline, and people will understand it to be an insertion.

Upvotes: 1

Related Questions