Create a link without an underline in HTML ~ Easy HTML Tricks for Blogging

You want a link with no underline, or maybe a page full of non-underlined links? Well, let's see how to do it. The first thing to know is that you have to use a style sheet property to do this, so the trick only works in browsers that support style sheets. With that out of the way, let's take a look at how to create the non-underlined link.

For Individual Links

In order to create a non-underlined link, you need to add the style=" " attribute to your link tag. This is where the style sheet property comes in to play. The property we will use is called text-decoration, and we are going to set it so that the text has no decoration (the underline is a decoration). So, the style attribute will look like this:

style="text-decoration:none"

Now, we want to include this attribute in the link tag. So, tack it on after your URL with a space in between the two, like this:

<a href="http://www.pageresource.com" style="text-decoration:none">The Web Design Resource</a>

Now you will have a link without an underline, like the one below:

The Web Design Resource

For an Entire Page of Links

If you want every link on the page to be non-underlined, you can use a style sheet shortcut inside the '<head></head>' tags of your document. The code looks like this:

<style type="text/css">
a { text-decoration:none }
</style>

Place this code between your tags, and then code your links normally. The style sheet in the head section will make them all non-underlined (unless this is overridden by another style). So, if you have this:

<style type="text/css">
a { text-decoration:none }
</style>

<html>
<head>
<style type="text/css">
a { text-decoration:none }
</style>
</head>
<body>
<p>
<a href="http://www.pageresource.com">The Web Design Resource</a>
<p>
<a href="http://www.javascriptcity.com">JavaScript City</a>
<p>
<a href="http://www.pageresource.com/html/">HTML Pit Stop</a>
</body>
</html>

Wonderful, isn't it? Now you can have underline-free links anywhere you need them. However, non-underlined links may not be recognized as links by your viewers if they haven't seen this effect before. Then again, if the link color stands out or is the default blue, you will probably be O.K. So have fun, and link away! Oh no, did I just write a silly rhyme? Perhaps I'll write another one when I have more time! All right, I think I'd better get going now...

Well, that's all for now (and then some), see you when I write the next section!