How to create a HTML link with no underline

How to Use HTML to stylize hyperlinks without an underline

January 4, 2015 - SEO

By default, hyperlinks come with underlines to help differentiate a link from regular text, but there are times when you don’t want the hyperlink to stand out, to create an HTML link with no underline — usually for design purposes.

The good news is that it’s not difficult at all. As long as you have a basic understanding of HTML, you should be able to get it done pretty quickly.

In order to remove the underline from link, all you have to do is add a little extra HTML to stylize that link. Here’s an example of a basic, run of the mill, boring hyperlink in HTML code:

<a href=”http://www.website.com”>click me for billion dollars</a>

I won’t get into what the parts of the hyperlink as I am assuming you have a grasp of HTML since you’re looking to add an effect to a link. With that, here’s a HTML link with code that will hide the underline:

<a style=”text-decoration: none;” href=”http://www.website.com”>click me for billion dollars</a>

By placing style=”text-decoration: none;”  into the <a href command tells the webpage to render the hyperlink without an underline. The difference looks like this on a webpage:

Normal Link: click me for billion dollars
Link No Underline: click me for billion dollars

You’re not limited to html to do the “no underline on hyperlink,” you can also use CSS to accomplish the no-underlined-hyperlink effect, but if you want to do one-offs here and there, I find it simpler to just add simple HTML whenever i want it to appear (or not appear).

Is It Risky to Hide a Link’s Underline?

I assume when you ask that, you’re talking about the SEO risk; that you’re concerned that Matt Cutts and his Google crew will think you’re trying to dupe the search engine by camouflaging the link. The short answer is no, there is no risk in making your links without underlines.

The hyperlink is still blue so it still stands out from the other black text — underline or not.

› tags: a href no underline / HTML / html link no underline / html no underline link / html no underline on hyperlink / hyperlink without underline / link no underline / link without underline / no underline html / seo / website /

Comments

  1. Henry Evenz says:

    Thanks for this. It really makes sense to me now. You indeed bring up some good points, particularly about adding a little extra HTML to stylize that link, it’s pretty impressive. As I am searching for more information, I found this post http://www.lionleaf.com/blog/should-you-underline-links-google-doesnt-anymore/ which gives clever ideas and the result is pretty good, but your post is much more interesting to read. Is this only getting the first container’s background?

Leave a Reply

Your email address will not be published. Required fields are marked *

eXTReMe Tracker