homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Text links -underlined or not ?

 8:14 pm on Dec 14, 2012 (gmt 0)

Hi Guys

Just thought I would ask what you think looks the best or is the best practice in todays design.

Text links leave them underlined or make them not underlined?

I am trying mine with no underline?

Do you think that my visitors will see that they are links?



 8:24 pm on Dec 14, 2012 (gmt 0)

It's been a while since I tried it, but blue underlined text works best when I last tested it.

The only thing I found that worked better were "buttons", but you can't use them everywhere.


 11:13 pm on Dec 14, 2012 (gmt 0)

This question dates back to about five minutes after the invention of CSS. Unfortunately its answer doesn't :(

Human users still expect links to be underlined, and expect underlined material to be a link. Accessibility guidelines say you shouldn't use color by itself to convey information, as in
a {text-decoration: none;}

But, darn it, links just look better without the underline. Everything does.

Are you asking specifically about links within body text, so there is no other visual clue?


 11:33 pm on Dec 14, 2012 (gmt 0)

Why not make links obvious?

This afternoon I spent several minutes trying to find a link to a cited blog post in a short (1 screen) article.

Checking the original news article for the nth time I decided to run the cursor over the citation and sure enough it was a link, with no indication that it was other than a font that was only a tiny bit, barely perceptibly lighter than the surrounding text.


 11:49 pm on Dec 14, 2012 (gmt 0)

yes I have links within the body text.

The text is black on white and I am using blue links.

They look really ugly underlined, but of course I want people to click on them.


 12:44 am on Dec 15, 2012 (gmt 0)

No doubt, underlined links grab attention of users and increase curiosity what's hidden there. (Helps in increasing CTR).

But ... A beautifully designed website can not bear that ugly blue colored underlined text.

I do agree to highlight the text but... Thanks to CSS, we can play and do lots of experiments with text links to grab attention.


 1:14 am on Dec 15, 2012 (gmt 0)

Style your links discreetly if you want, but please not too discreetly. Make them distinctive enough so the reader has no trouble identifying those words as something to check.

Also, use a hover effect that does something active and obvious on mouseover. A good hover effect confirms for the user, "Yes, you found the link in this paragraph."

I spent several minutes trying to find a link

I don't care how purrrrty the page is to look at; that is bad design.


 3:07 am on Dec 15, 2012 (gmt 0)

Style your links discreetly if you want, but please not too discreetly

While a default blue underline is pretty foolproof, the above is sound advice.

Even fools seem to have no trouble with Wikipedia.



 3:17 am on Dec 15, 2012 (gmt 0)

This afternoon I spent several minutes trying to find a link

Hours later, it occurred to you to View Source and look for an <a href ;)

But this is not something you can reasonably expect your ordinary passing human to do.

I wish I could find the Search function in clients-from-you-know-where dot net, because I remember reading a story that fits perfectly into this thread :)


 3:46 am on Dec 15, 2012 (gmt 0)

A few years ago I read a study of grade school kids learning to use the web. Almost universally, they moved the cursor around the visible page looking for hover behaviors. Since then my rule of thumb is that the more the client website needs to "hide" the links with a very subtle treatment, the more the hover behavior needs to be bold and obvious.

I'm particularly fond of hover behavior that changes the link to what a printer would call reverse text: white or near-white lettering on a dark colored background that matches or harmonizes with the colors of the site's theme.


 6:50 am on Dec 15, 2012 (gmt 0)

When I make a referential link within general body content, I usually let the text color alone be the visible indicator of a link so that the user's attention isn't unduly drawn to the link. But I do use underlining in overt calls to action when I want to entice a click or when I want to remove any ambiguity. But in both cases I do use hover effects, and always include a clear 'title' attribute in <a>nchor tags to provide a tooltip message as well.


 1:20 pm on Dec 15, 2012 (gmt 0)

Context and contrast. A theatre site we are working on has a list of the stars of the plays. Some are members of the theatre company and have a bio page. All the actors in a play are mentioned on the online playbill in bold but ensemble member name links are colored in green versus white with an underline.

I flip-flop on this. While the gentle green link does not distract from your reading, I do think it requires some discoverability, the underline makes it more obvious but I feel it interrupts the flow of reading.


 3:00 pm on Dec 15, 2012 (gmt 0)

The farther you get away from the basic underlined blue link on a white background the more attention you need to pay to the issue of color blindness.

Even a underlined blue link on a dark background could be difficult for a colorblind person to see. When you get to red or green links it can get really dicey. Contrast may more important key in those situations.

The underlining and highlighting here at WW work pretty well in combination. But occasionally a member will simply underline a word for some reason, and that gets confusing because it "looks like" a link until you run your cursor over it and it doesn't light up with the yellow highlighting.


 6:46 pm on Dec 15, 2012 (gmt 0)

Some very interesting comments.

So obviously the jury is still out
It seems that most of you think pages look better without the underlining.
But that underlining may be needed to ensure that people see your links.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved