Home / Articles / Programming languages / Markup languages / HTML & CSS / Removing the underline from hyperlinks in HTML

Removing the underline from hyperlinks in HTML

Removing the underline from hyperlinks in HTML
 
Removing the underline from hyperlinks in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


You can not remove the underline from hyperlinks with HTML tags. For this purpose, cascading style sheets are used (CSS).

One of the most common usage of CSS is removing the underline from hyperlinks. But this might be a bad idea because the user has no way to know that the text, is a hyperlink. Everyone is already used to the fact that if the text is underlined, it's a hyperlink. But if used properly, removing the underline from hyperlinks can make the site look more imposing. For example, by hovering over a hyperlink with the cursor the underline is displayed, or the color of the text changes, or both.

The underline can be hidden with style parameter text-decoration: none, by adding it to the selector "a", as shown in example 1.

Example 1. Removing the underline from hyperlinks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      a {
        text-decoration: none; /* Removing the underline from hyperlinks */
      }
      a:hover {
        text-decoration: underline; /* Adding the underline when hovering over the hyperlink with the cursor */
        color: red; /* Red color of hyperlink */
      } 
    </style>
  </head>
  <body>
    <a href="#">Point cursor here and watch what happens</a>
  </body>
</html>

The hypertext below is the result of the example. If you hover over the hyperlink, it turns red and underlined.

Point cursor here and watch what happens:


 

Read also

How to create a link in HTML

How to create a link in HTML

Parameter target in HTML

Parameter target in HTML

Image as a link in HTML

Image as a link in HTML

Links within a page in HTML

Links within a page in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation