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.