We've built a custom CKEditor within one of the sites we've developed to allow users to add and edit the content on particular pages. However the editor by default comes with an Underline option and the client has taken it upon themselves to emphasize text by underlining it. This makes everything look like a link when it isn't.

As it's a custom editor we can remove the ability to underline (although I think they'll still be able to do it with a Ctrl+U) but I want to ensure there are no genuine uses for underlined text before I recommend it be disabled.

Is there ever a valid use-case for having text underlined on a website - other than for links, and possibly headings (both of which would be taken care of by the site CSS anyway)

A similar example of what I mean is below (taken from the current wordpress.com page editor) enter image description here

Interestingly, I notice that the Stack Exchange text editor doesn't have underlines as an option

  • 15
    Interestingly, Stack Exchange also doesn't underline links! So you could extend the concept to asking whether there is ever a valid use case for using blue text colour when it's not for a link. Commented Mar 2, 2012 at 16:17
  • @JoeDreimann that is slightly different though, because there are already styles set up for links in the CSS, so when you specify a link the styling is already taken care of.
    – JonW
    Commented Mar 2, 2012 at 16:31
  • 2
    Sure, but what I mean is that if your aim is to not suggest something is a link when it isn't, then underlining is just one indicator. If you end up hiding the underlining option, you may also want to hide the colour that is commonly used for links on the page. Commented Mar 2, 2012 at 16:34
  • 1
    @JoeDreimann we underline links on hover. Underline is visually distracting (as my answer notes) so I like it's use on hover to drive the point home, but the consistent color is often a good way to communicate link-ness on a site where many users are frequent users of the site
    – Zelda
    Commented Mar 2, 2012 at 16:34
  • Apologies, seems that I wasn't able to make my point clear. I agree with what you're saying @BenBrocka. Commented Mar 2, 2012 at 16:38

10 Answers 10


Underlining non-link text is a sort of usability crime. Underline is a standard way of visualizing links, especially when the default blue isn't use for links, so underline can confuse web users as to what's a link. Even in desktop applications, underlined text often means "I'm clickable".

Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.

Underlining is also almost impossible to ignore. Contrast italics which emphasize text in context. Italics are only noticable while you're reading a line. Contrast this with Underline and Bold which draw your eyes even when you aren't reading a paragraph. Underlines, like bold, are hard to ignore when scanning text.

The important thing here is that Bold and Italics provide two important ways of emphasizing text, and Bold and Italics are a complete set on their own. They have their own use cases but Underline serves the same purpose as Bold, while being stylistically awkward and harming readability.

Sitepoint does a good job of explaining the risks of Underline on readability as well:

In addition to possibly confusing the user into thinking that the underlined text is a link, underlining can also cause readability problems, as the line interferes with the descenders on lower case text (for example the lower case letters g, j, p, q and y), making some word shapes less clear.

Underline is distracting, potentially confusing and, more subjectively, it's visually ugly. Because Bold and Italics cover the use case of emphasis, Underline does not have a distinct use case and should be avoided for non-links in general content.

There are however use cases where underlining is important however: When a predefined style guide demands underlining.

MLA Format requires underlining for book titles; giving an editor with no underlining to people using MLA format would be cruel. APA also underlines.

  • 4
    Underlining is also a typography misdemeanor, the general sentiment being "never underline what you can set in italics."
    – Taj Moore
    Commented Mar 2, 2012 at 16:40
  • 1
    Good set of links here, although if I'm being pedantic you've not really answered the actual question - is there ever a use case for allowing underlines.
    – JonW
    Commented Mar 2, 2012 at 16:46
  • 2
    Bold does call your attention and even works as inline pull-quotes, while italics is used to stress —phonetically if I may— a word or set of words; not to give relevance. What to use when you want to give relevance to a whole phrase without making it bold? Commented Mar 5, 2012 at 13:54
  • 1
    Regarding the MLA and APA guidelines (rules), ok agreed this is possibly a contender for required underlines, although I might argue that these are for hard-copy papers and not online journals.
    – JonW
    Commented Mar 6, 2012 at 10:18
  • 4
    Your answer is a perfect example of a use case where underlining is appropriate -- when discussing underlining! You bolded the word bold, and italicized the word italics, but couldn't underline the word underline, and it stood out (to me, at least) Commented Mar 6, 2012 at 11:43

Yes, there are valid use cases, all of which probably are in a very specific field of work/study where underline has a particular meaning.

An example: if your users want to write things in RuleSpeak (a notation system for SBVR documents) in the CKEditor, convention dictates they underline terms.

An image of what you typically see in these documents:

Example Rulespeak notation

PS. One interesting comment on the question mentions the SO editor doesn't allow underline. Although I couldn't find any SE site that does so, I could certainly imagine one that would allow underline (for example http://typography.stackexchange.com/ would be a candidate).

  • 1
    Awarding you the bounty for this response. It's quite a fringe situation (as I expected the answer would be), but your reasoning seems sound and unlike Ben's MLA response this still does appear to be an in-use syntax that may possibly apply in web situations. However by far the best way for me to handle the current editor is to disable underlining by default for all situations and only add it back in if it's requested a specific requirement.
    – JonW
    Commented Mar 12, 2012 at 10:17
  • 1
    Thanks Jon. Agreed though: this is a border case. Ben's excellent answer is the more appropriate one to consider if you're not in one of those cases (let's hope it contributes to less underlining in documents we have to read :D).
    – Jeroen
    Commented Mar 12, 2012 at 10:42

Is there ever a valid use-case for having text underlined on a website?

Yes, and your question contains the answer :

the client has taken it upon themselves to emphasize text by underlining it

So emphasize seems to be a valid use case to some people. I do not think either this people are doing wrong according to you (or more widely agreed guidelines) is the point here. It is a matter of tradeoff between the freedom you grant to your client/user and the outgoing quality you have in mind.

I want to ensure there are no genuine uses for underlined text before I recommend it be disabled.

You might teach your user not to walk on the grass before cutting their legs...

Letting them edit text, you granted your user much more power than to add misleading underline. If your goal is to prevent "wrong" use of your tool, you might consider teaching your user and editing/approval workflow.

  • 4
    This is a classic application of Poka Yoke. Do not allow the user to make unintended mistakes. If the user has a compelling reason to add underlines, and it won't create confusion with text links, then that is a valid case for allowing it. If not, then not. en.wikipedia.org/wiki/Poka-yoke Commented Mar 5, 2012 at 18:22
  • 1
    @J.Jeffryes That's a new phrase to me, I like it!
    – JonW
    Commented Mar 6, 2012 at 17:09
  • 1
    Thanks! I like to say "Poke and Yoke", as in you Poke the users towards the right choice, and Yoke their behavior so they can't make mistakes. Commented Mar 17, 2012 at 1:54

Assuming the "U" button puts selected text in the <u> element, there might be a very narrow use case for it. From the most recent HTML spec from the WHATWG:

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for labeling ship names in Western texts, the i element should be used.

But they also emphasize that the default rendering for the element should be restyled (and your CKEditor button would obviously need to change, too):

The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink.

That's about the only reason I can think of to use the <u> element. My hunch is that you're asking about actually underlining text rather than putting it inside <u> tags, though, in which case I can find no credible examples of why that would be desirable.

  • 2
    I really like the non-semantics of using <u> to refer to things like spelling and grammatical errors as in Microsoft Word and Mac OS X. I also like the recommendation that the underline be restyled appropriately.
    – Kit Grose
    Commented Mar 5, 2012 at 23:27
  • 1
    The new HTML spec is basically a hack of "semanticness" for<u> as well as most style tags they didn't completely remove. But he's surely talking about the visual style not the semantic meaning.
    – Zelda
    Commented Mar 6, 2012 at 2:22

I have come across this only few times when I was building Annual Report websites. Unfortunately the link I was going to show is dead now but there were instances in the report that certain text had to be underlined and was not part of the header or was a link.

Though text only appeared in the financial table's row header cells. So you might argue that they were headers (row headers) but didn't use any HX tags - were simply a string of underlined text.

It must have meant something to the author as I remember querying whether to use another formatting rather than underline (for the reasons explained above) and was told 'NO!' just use underline text as is.


There are some minor edge cases (such as RuleSpeak above) but the overall usefulness of an underlining function for web text is low.

There are plenty of other marginal text decoration functions (small caps, etc) that don't make the shortlist for must-have functionality. Underlining should probably join them, for the typographic and usability reasons cited above.

I notice your screenshot doesn't show sub- or superscript, which would be much more useful than underlining for many authors.

Unless you absolutely must cater to every minor possibility, keep the editing toolbar as simple and useful as you can.


I can suggest at least three cases where underlining would be appropriate:

  1. The purpose of the underlined text is to indicate something that was "filled into a blank", either literally or figuratively. Neither italics nor bold face conveys this. Additionally, while line endings can be problematic, underlining offers the ability to distinguish between two consecutive words or groups of words which are joined by an underline vs. consecutive words or groups of words which are underlined separately. Such semantic distinctions are useful for consecutive links, but are also important in other cases as well. Alternate background colors or boxes may also be usable to make such distinctions, but they're often even more distracting than underlining.

  2. Especially in status-report tables, where it may be necessary to distinguish many independent pieces of information about an item, and allow readers to quickly identify at a glance ones meeting certain criteria. Underlining isn't a great form of emphasis, but if one needs to combine more independent dimensions than would be possible using just serif vs. sans, bold vs. light, italic/oblique vs. roman/upright, plain vs. colored foreground, and plain vs. tinted background, adding underlining may be helpful.

  3. One is reproducing a pre-existing document which makes use of underlining and does not wish to examine the semantics of the document to determine whether some other form of highlighting would be better, and whether any text within the document refers to words being underlined.


The answer is probably, yes and no. Is there a instance where underlining is valid and correct to do so? Probably Yes (although I cannot think of one). Should you do it? No. Underlining has become too linked with links (even if only on hover) and breaking this will be too difficult a 'habit' for your users' brain to forget (unless we all did it)


Short answer: Hide it and use <em> its better for SEO and Accessibility.


Underlining was first introduced in the days of handwriting & typewritten manuscripts to show emphasis and later used as a markup indicator to have something set in a different type. This started the trend of using underscores as markup indicators instead of emphasis. Emphasis was then implemented by italicizing or bolding text.

Fast forward to the modern age. The use of underline <u> and italics <i> and bold <b> in HTML documents was a large standard to show emphasis in one or all three ways. These tags where then quickly dropped as technology advanced to increase the accessibility of documents to support <strong> and <em> and underline tag was dropped (reason one to be rid of it) and the underscore of text was implemented to be a link (relating back to markup age of "this should be (or lead) to something different").

Accessibility is now a strong part and requirement for many corporations in the USA and Canada. To be compliant the use of <strong> is for emphasizing important words and <em> for emphasizing important phrases (as <em>'n a single word makes the whole text hard to read)

Side Note: Spiders also look for important and emphasized phrases through the use of the <strong> and <em> tags, supporting them is good for your SEO.

So take a look at the users of your site and whether or not they require accessible pages. Then take a look at your users who use the editor, do they come from a traditional typewritten background or modern word-processing background?


  • 1
    "Meta comment": To break a line on your answer, add two spaces at the end of the preceding line. Commented Mar 6, 2012 at 9:00


Underlining is in enough demand that other users have found workarounds, such as the use of combining character U+0332 described here at Meta.

Use case

The aversion to underlining is strange to me, particularly with regard to concerns about usability and potential confusion with links. Many sites use CSS to define link styles that do not use underlining (including Stack Exchange sites until relatively recently), obviating that concern. In addition, many sites impose no similar restriction on the use of color, even though color has also historically been an important distinguishing marker for links.

I note also that other language communities use emphasis differently. Japanese text, for instance, very seldom uses either italics or bold, due to the ways in which these changes in character shape and line width can render various glyphs difficult to distinguish. Although I am not familiar with Chinese typography traditions, I expect they might also avoid bold and italics for similar reasons. Japanese documents often use ruby dots or underlining / sidelining, depending on whether the text is horizontal or vertical. Examples:

Horizontal sample text showing two styles of emphasis for Japanese.

Vertical sample text showing two styles of emphasis for Japanese.

Unfortunately, combining character U+0332 is ugly for the Latin alphabet, and does not work very well at all for Japanese text. In the examples here, "with underlining" and 「下線のある」 should both be underlined.

  • This is text w̲i̲t̲h̲ u̲n̲d̲e̲r̲l̲i̲n̲i̲n̲g̲.
  • これは下̲線̲の̲あ̲る̲文章です。

In my instance of Firefox version 91.8.0esr, these are rendered like this:

  • In the editing textbox:
    enter image description here
  • In the post preview:
    enter image description here

The inability to use proper browser underlining, be it via inline CSS such as <span style="text-decoration: underline;"> or old-school HTML tags such as <u>, thus presents a usability problem for Japanese text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.