How to remove underline from a link in HTML?

Inline version:

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

However remember that you should generally separate the content of your website (which is HTML), from the presentation (which is CSS). Therefore you should generally avoid inline styles.

See John's answer to see equivalent answer using CSS.


I suggest to use :hover to avoid underline if mouse pointer is over an anchor

a:hover {
   text-decoration:none;
}

  1. Add this to your external style sheet (preferred):

    a {text-decoration:none;}

  2. Or add this to the <head> of your HTML document:

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

  3. Or add it to the a element itself (not recommended):

    <!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

This will remove all underlines from all links:

a {text-decoration: none; }

If you have specific links that you want to apply this to, give them a class name, like nounderline and do this:

a.nounderline {text-decoration: none; }

That will apply only to those links and leave all others unaffected.

This code belongs in the <head> of your document or in a stylesheet:

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

And in the body:

<a href="#" class="nounderline">Link</a>

Tags:

Html

Recent Posts