How to create HTML link without underline

By default HTML links are underlined in most browsers. You can remove the underline on a link in a few methods:
Using style in line with HTML link,
Using CSS style in external link

Example HTML link tag to remove underline using in line style

In most browsers, HTML links will appear in the following form as default:

An unvisited link is underlined and blue color.
A visited link is underlined and purple color.
An active link is underlined and red color.

However you can remove underline using inline style.
HTML Link Syntax are specified in HTML using the <a> tag as <a href="url" style="declaration block as: text-decoration: none; ">Text link</a>
HTML link tag href attribute in source anchor specifies the address of the destination anchor.

Example 1:

<!DOCTYPE html>
<html>
<head>
<title>Title of button action</title>
</head>
<body>

<a href="http://www.agernic.com" style="color:#C30; text-decoration: none;">Tutorial html</a>
<a href="facebook.jpg"><img src="facebook.jpg" style="width:242px;height:72px;border:0;" alt="facebook"></a>
<a href="https://www.google.com/" style="padding:8px; color:#090; text-decoration: none;">Google Search</a>

</body>
</html>

Check this example >>

The html cod above will display this HTML result:

Tutorial html

Google Search

Note: A link does not have to be only text. It can be an image link, button link or any other HTML element.

HTML link tag to remove underline using external CSS

First, we must build external link as style.css.

Example 2:

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}

Example 3 of index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="http://www.agernic.com" style="color:#C30; text-decoration: none;">Tutorial html</a>
<a href="facebook.jpg"><img src="facebook.jpg" style="width:242px;height:72px;border:0;" alt="facebook"></a>
<a href="https://www.google.com/" style="padding:8px; color:#090; text-decoration: none;">Google Search</a>

</body>
</html>

Check this example >>

This HTML code will produce the following result −

Tutorial html

Google Search

html link tag without underline
How to create HTML link without underline - html tutorial

Online Editor

ONLINE EDITOR

news templates