Hyperlinks With No Underlining

[Gillian White]

I would like to know how to create a hyperlink where the text does not show
as being underlined. I've seen great examples of this on the Wikipedia
website, but the source gives no indication as to how it is done.

Can anyone help?

Gillian

 

[Neal]

I would like to know how to create a hyperlink where the text does not
show
as being underlined. I've seen great examples of this on the Wikipedia
website, but the source gives no indication as to how it is done.

Can anyone help?

Gillian

Before you do this, realize that by removing the underline you remove the
most common way people recognize a link as a link. So only do this in a
clearly-marked navigation section, where it's obvious that everything is a
link. Never do this with "inline" links.

The solution is using CSS.

a:link {text-decoration: none}

 

[Gillian White]

Before you do this, realize that by removing the underline you remove the
most common way people recognize a link as a link. So only do this in a
clearly-marked navigation section, where it's obvious that everything is a
link. Never do this with "inline" links.

It's for a private website that only I can access, so I don't have to worry
about confusing other people

a:link {text-decoration: none}

That worked beautifully. Thanks!

Gillian

 

[DU]

Before you do this, realize that by removing the underline you remove
the most common way people recognize a link as a link.

I don't understand why you would suggest that he could do this in the
first place when the user should choose how he best wants to/can
recognize links.

In MSIE:
Tools/Internet Options.../Advanced tab/Browsing section/Underlining
links/Always-Hover-Never radio buttons

In Mozilla-based browsers and NS 7.x:
Edit/Preferences.../Appearance category/Colors/Links Colors/Underline
links checkbox

In Opera 7.x:
Tools/Preferences...Alt+P/Page Style/Link Style/My Link Style/Not
visited and Visited links checkboxes

I don't agree that underlining links is the most common way to recognize
a link as a link; at least, I don't believe it is the most important
visual feedback to identify them. Text browsers (at least Lynx 2.8.5) do
not underline links: color of links, when they contrast clearly from
non-link text, is much more important.
Underlining links also can make accesskey in links much more difficult
to figure out when identifying accesskeys widely uses underlying.

DU

So only do this

 

[Karl Groves]

I don't understand why you would suggest that he could do this in the
first place when the user should choose how he best wants to/can
recognize links.

<snip examples>

You are, of course, assuming that the average user knows how to modify their
browser's settings.
They do not

I don't agree that underlining links is the most common way to recognize
a link as a link; at least, I don't believe it is the most important
visual feedback to identify them.

I do.
I've seen users in usability tests click on *anything* that was underlined.
This includes black-on-white text where the actual links were blue/
underlined and the underlined text was black. The underline, to them,
represented a link.

-Karl

 

[Disco Octopus]

I do.
I've seen users in usability tests click on *anything* that was
underlined. This includes black-on-white text where the actual links
were blue/ underlined and the underlined text was black. The
underline, to them, represented a link.

-Karl

.... and an image? When would one expect an image to have a link on it?
Underlined? Bordered? HandCursor? "Click Here" alt text?

 

[Whitecrest]

I would like to know how to create a hyperlink where the text does not show
as being underlined. I've seen great examples of this on the Wikipedia
website, but the source gives no indication as to how it is done.

<a style="text-deceration:none" href="blalba" atl="bla bla bla">some
link</a>

but use it wisely, Most people know a link is underlined.

 

[Whitecrest]

... and an image? When would one expect an image to have a link on it?
Underlined? Bordered? HandCursor? "Click Here" alt text?

Think about it. When do YOU think there is a link on an image?

 

[Els]

Think about it. When do YOU think there is a link on an image?

I'm afraid that doesn't work for everybody.
Friend of mine only recently discovered that not every
visitor is waving their mouse over the page, thus
discovering the images are links.

To answer the question for myself: I think an image is a
link when it is in a place I would expect it to link, like
in a thumbnail gallery, or when it has a caption below it
that indicates a subject which isn't covered there and then.
That's when I hover over it, and by the HandCursor I see if
I was assuming correctly. But when it stays an arrow, I'm
usually really surprised. And that's when I see the text
link below it. Even if it's underlined, I try the picture first.

 

[Karl Groves]

... and an image? When would one expect an image to have a link on it?
Underlined? Bordered? HandCursor? "Click Here" alt text?

As the saying goes, "That opens up a completely different can of worms"
It depends on the image and it depends on the context in which it is being
used and it also depends on a ton of other things such as size and
placement.
I've seen users in tests randomly clicking on almost every image they see!

-Karl

 

[Els]

I do.
I've seen users in usability tests click on *anything* that was underlined.
This includes black-on-white text where the actual links were blue/
underlined and the underlined text was black. The underline, to them,
represented a link.

I agree that the underlining clearly represents a link, but
the other way round I think it is different.
If there are no underlined pieces of text on the page at
all, neither links nor other text, I think the difference in
colour gives away what is a link and what not.

Do you know of any tests that looked at that?

 

[Neal]

I agree that the underlining clearly represents a link, but the other
way round I think it is different.
If there are no underlined pieces of text on the page at all, neither
links nor other text, I think the difference in colour gives away what
is a link and what not.

Though we are assuming the monitor displays in color (or the eyeball sees
color) - which might seem a safe assumption but is not as safe as keeping
the underlines.

Going back a few messages - regarding alternate browsers like Lynx, the
stylesheet is not used so there's no problem. If users have modified their
browsers to change link appearance, they know what they have done; if not,
they rely on standard visual cues.

And access keys are a pain - but overlining the letter associated with the
accesskey might be a successful strategy there. We don't want to make the
page bad for some users, and we don't want fixes for some users to make
the page bad for everyone else either.

 

[Whitecrest]

I'm afraid that doesn't work for everybody.

What doesn't work? The kinds of things that everyone "thinks" are an
image link? Of course it works.

Friend of mine only recently discovered that not every
visitor is waving their mouse over the page, thus
discovering the images are links.

And not everyone has underlining turned on either. That's a moot point.
Remember the Web is not 100%. Your page will never work exactly as you
plan on every single visitor. You have to take that into consideration
when developing.

 

[Els]

What doesn't work? The kinds of things that everyone "thinks" are an
image link? Of course it works.

I meant that "When do YOU think there is a link on an
image?" isn't a good reference for _everybody_. _I_ might
think there is a link on an image, where noone else in the
whole wide world would expect one, so what _I_ think, might
not be the solution at all.

For some it is, of course, but for some it isn't.

 

[Karl Groves]

I agree that the underlining clearly represents a link, but
the other way round I think it is different.
If there are no underlined pieces of text on the page at
all, neither links nor other text, I think the difference in
colour gives away what is a link and what not.

Yes, this is true. I think in such a case, it depends largely on the
differences between the colors of the text and the colors of the links.
Contrast is *very* important in such a case, and blue links with
black-on-white text is still best. IMO, it warrants testing in any other
situation.

-Karl