152

In my page I have put some links under which I don't want any line, so, how can I remove that using HTML?

5
  • 5
    Paic, I'm not going to bother rolling back the tags again, but just so you know, the only way to remove the underline is with CSS. Yes, even though you're adding it inline with the HTML (in the style attribute), it is still CSS. The other two tags are also completely valid (presentation and hyperlink). In the future, please don't remove (or add) tags to a question unless there is a valid reason to do so. Thanks!
    – 0b10011
    Jun 1, 2012 at 16:48
  • 1
    @bfrohs I respect your words but I am building my site using only HTML and so I did not add more tags because if I would have did so, I might have got answers for different language. Actually I am a bit novice to it, that's the reason.
    – Paic Ten
    Jun 1, 2012 at 17:20
  • 4
    You cannot build a standards-compliant website without CSS (unless you go with browser defaults for all presentation). HTML = structure; CSS = presentation. The other tags had nothing to do with a different language - they were only provided to help people find the question and answer.
    – 0b10011
    Jun 1, 2012 at 17:31
  • 2
    possible duplicate of How to remove the underline for anchors(links)?
    – RAS
    Apr 23, 2014 at 7:24
  • 3
    Why does this question have so many up votes? You can literally answer it in a single Google search and I'm sure there are many duplicates of it on StackOverflow.
    – Alternatex
    Oct 21, 2014 at 8:06

8 Answers 8

219

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.

3
  • 2
    killer! I never saw these underscore lines in all the years that I where doing html.... ^^
    – Alex Cio
    Jul 20, 2017 at 11:16
  • 2
    John's answer still uses essentially inline styles. Separating your CSS means more than aliasing css in your html. Eg class="big-and-red" is aliasing not seperation. class="meaningful-domain-item" then css .meaningful-domain-item { //big and red } is. This answer sufficient to remind me which tag to use in my css +1. Feb 15, 2018 at 12:04
  • 1
    This above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I'd placed the style after the href. When I placed the style before the href it was working as expected. <a href="yoursite.com" style="text-decoration:none">yoursite</a>
    – Ganesh M S
    May 15, 2018 at 12:48
61

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>
0
21

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

a:hover {
   text-decoration:none;
}
7
  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>
    
4

The other answers all mention text-decoration. Sometimes you use a Wordpress theme or someone else's CSS where links are underlined by other methods, so that text-decoration: none won't turn off the underlining.

Border and box-shadow are two other methods I'm aware of for underlining links. To turn these off:

border: none;

and

box-shadow: none;
4

All the above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I'd placed the style after the href. When I placed the style before the href it was working as expected.

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

The following is not a best practice, but can sometimes prove useful

It is better to use the solution provided by John Conde, but sometimes, using external CSS is impossible. So you can add the following to your HTML tag:

<a style="text-decoration:none;">My Link</a>
2
<style="text-decoration: none">

The above code will be enough.Just paste this into the link you want to remove underline from.

Not the answer you're looking for? Browse other questions tagged or ask your own question.