How to remove underline from a link in HTML?

Question

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

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 01 '12 at 16:48
@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 01 '12 at 17:20
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 01 '12 at 17:31
possible duplicate of [How to remove the underline for anchors(links)?](http://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks) — RAS, Apr 23 '14 at 07:24
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 '14 at 08:06

score 219 · Accepted Answer · edited May 23 '17 at 12:26

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.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 01 '12 at 16:19

patryk.beza

4,876
5
37
56

2

killer! I never saw these underscore lines in all the years that I where doing html.... ^^ – Alex Cio Jul 20 '17 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. – Nathan Cooper Feb 15 '18 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. yoursite – Ganesh M S May 15 '18 at 12:48

score 62 · Answer 2 · edited Jun 01 '12 at 21:59

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>

score 21 · Answer 3 · answered Feb 09 '14 at 13:08

21

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

a:hover {
   text-decoration:none;
}

answered Feb 09 '14 at 13:08

Roman

2,145
4
26
33

0b10011 · Answer 4 · 2012-06-01T16:41:16.837

7

Add this to your external style sheet (preferred):
```
a {text-decoration:none;}
```

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

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

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>

edited Jun 01 '12 at 16:41

answered Jun 01 '12 at 16:18

0b10011

18,397
4
65
86

score 5 · Answer 5 · answered Dec 11 '15 at 17:27

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;

score 4 · Answer 6 · answered May 15 '18 at 12:52

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>

score 3 · Answer 7 · answered Jun 01 '12 at 16:21

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>

score 2 · Answer 8 · answered Nov 19 '13 at 09:20

2

<style="text-decoration: none">

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

answered Nov 19 '13 at 09:20

sd1990

31
4

How to remove underline from a link in HTML?

8 Answers8

Linked

Related