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>
<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>
The html cod above will display this HTML result:
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;
}
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:
This HTML code will produce the following result −
<!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>
<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>
This HTML code will produce the following result −
html link tag without underline
How to create HTML link without underline - html tutorial
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout

Find here examples of creative and unique website layouts.
Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.