Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

What Is It? A Link Or An Underline?

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v3 i12
Originally Published: July 12, 2007

What is this?

This Is Important

If you didn't click on "This Is Important," I'll still bet that you have clicked on text that you thought was a link but turned out to be underlined.

How did you feel when you did that? Silly, stupid, or just a little p.o'd at the site owner/designer? The practice of underlining text which causes me to click, pushes me to the top rung on my annoyance meter.

Here is my simple suggestion. Students of mine have heard me say, t"DO NOT use the <u> tag to underline text unless you're going to use Cascading Style Sheet rules with it.

Here is my alternative to underlining text. Do NOT do this:

Code View

<p>When I have to make an important point, I feel the need to <u>underline text </u>.</p>

Browser View

When I have to make an important point, I feel the need to underline text.

If you feel you must underline text, one alternative is to use CSS border properties to place a border at the bottom of the text that you wish to underline. Like this:

Code View

<p>When I have to make an important point, I feel the need to <u style="border-bottom:1px #f00 dashed;text-decoration:none;">underline text </u>.</p>

Browser View

When I have to make an important point, I feel the need to underline text.

You can set the border's pixel width, color, and type (it doesn't have to be dashed). Note that I use "text-decoration:none;" to remove the underline that browsers automatically render for <u> because it's built into the browser style sheet.

Now that's what I call "eating your cake" because I'm still using the <u></u> tag to underline my text, but I'm styling it in a way to ensure that my user (I thought I wasn't supposed to say "user" anymore) doesn't get confused.

And confusion is exactly what I want to avoid.