How to create a link with no underline in HTML

Updated: 06/07/2019 by Computer Hope
No underline link on web page

Using CSS, you can change the style of your HTML links to not have an underline by using any of the following recommendations.

Note

Most users browsing the Internet understand the concept of links being underlined and may assume any text not underlined is not a link. If you do remove the underline, make sure the link is a different color than all other text. Also, if your goal is for search engines to follow links that are not visible to humans, that is considered a deceptive practice, and can result in your site being delisted.

Make all links not underlined

To make all of the links on your web page not have underlines, configure the text-decoration style of the a (anchor) element. For instance, you can add the following CSS code between the <head></head> tags of your web page's HTML code. Here, the <style> element contains the style that changes how anchor links are decorated.

<head>
...
  <style>
    a {
     text-decoration: none;
    }
  </style>
...
</head>

The code above tells the browser to have no type of underline (text-decoration) on any <a> tags (links).

Tip

Adding this code to a CSS file instead of in the HTML head section makes all web pages that use the CSS file to set links with no underline.

Make an individual link not have an underline

If you want only one link not to be underlined on your web page, creating a link similar to the code below anywhere in the <body></body> tags makes the link not have an underline.

<p>
  <a href="https://www.computerhope.com/" style="text-decoration: none">Computer Hope.</a>
</p>

Defining a style this way—as a style property of one specific element—is called inline styling.

The non-underlined link will appear like this on your web page:

Computer Hope.

Additional information