How to create a link with no underline in HTML

Updated: 12/30/2019 by Computer Hope
No underline link on web page

Using CSS (cascading style sheets), change the style of your HTML (hypertext markup language) links to not have an underline using any of the following recommendations.

Note

Do not create links that are invisible to humans with the intention of them still being followed by search engines that crawl your site. Modern search engines detect this action, and consider it a deceptive practice. If they detect human-invisible links on your site, search engines may drop your ranking in their search results, or delist your site completely.

Note

Most users browsing the Internet understand the concept of links being underlined, and may not expect that to change. These users may assume any text not underlined is not a link. For this reason, if you remove the underline, make sure to change the link color so it stands out clearly to the user.

Make all links not underlined

To make all the links on your web page not have underlines, configure the text-decoration style of the a (anchor) element. For instance, 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 to not be underlined on your web page, create a link similar to the code below anywhere in the <body></body> tag.

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

Defining a style property this way is called inline styling. The style is specified "inline," in the element itself, in the body of your page.

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

Computer Hope.