How to create a link with no underline in HTML
In HTML, an anchor tag (<a>) is a Styled Container tag, which means when a hyperlink is created using this, browsers, by default, display the link by applying some styles to it. These styles can include text color, text decoration, font size, etc. Therefore, these styles, which are mentioned in the user agent stylesheet of the browser, add an underline to the hyperlink and then display it on the webpage. But if the developer does not want an underline to the hyperlinks, these can be easily done.
Let us understand how to do it.
First of all, we need to know that hyperlinks have four different states when they appear on the browser, and according to these states, the default styles on it vary.
- a:link – This is a normal link, and it specifies that the link is not yet visited. In most browsers, these links are blue in color with an underline.
- a:visited – This specifies that the link has been visited, and most browsers display these in purple color with an underline.
- a:hover – This specifies a state when a user hovers its mouse on the link. Developers can add their desired styles to display during this state.
- a:active – This specifies that the link is currently active, and most browsers tend to display it in red color with an underline.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlinks</title>
</head>
<style>
a:link
{
color: blue;
}
a:visited
{
color: purple;
}
a:hover
{
color: brown;
}
a:hover
{
color: red;
}
</style>
<body>
<h1><a href="https://xyz.com/">Click Here</a></h1>
</body>
</html>Output
An unvisited link looks as:
A visited link looks as:
A Link when its hovered is shown as below:
An active link is shown like below
As you are seeing these links have underline, let’s see how to remove an underline from the link.
A hyperlink can be created without an underline just by targeting that particular anchor tag with the help of using selectors and setting a style named ‘text-decoration’ to none.
This can be done by specifying inline styles or mentioning internal style, or using an external CSS stylesheet and linking it to the HTML document.
Let's see all the ways mentioned above one by one.
1) Using inline style
A style named text-decoration is set to underline by the browser, which underlines the hyperlink. So, by using inline styles and specifying the 'text-decoration' from 'underline' to 'none' we will be able to achieve our target.
Example
Before specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using inline styles</title>
</head>
<body>
<h1><a href="https://www.google.com/">Click here to go to Google!</a></h1>
</body>
</html>
Output
Example
After specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using inline styles</title>
</head>
<body>
<h1><a href="https://www.google.com/" style="text-decoration:none;">Click here to go to Google!</a></h1>
</body>
</html>Output
2) Using internal style
Besides using an inline style, we can also do the same with the help of internal styles. An internal style is specified inside the ‘<head>’ tag under the ‘<style>’ tag in the same way by targeting that particular link and setting its text-decoration to none, an underline can be removed.
Example
Before specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using internal styles</title>
</head>
<body>
<h1><a href="https://www.google.com/">Click here to go to Google!</a></h1>
</body>
</html>
Output
Example
After specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using internal styles</title>
<style>
a
{
text-decoration: none;
}
</style>
</head>
<body>
<h1><a href="https://www.google.com/" style="text-decoration:none;">Click here to go to Google!</a></h1>
</body>
</html>
Output
3) Using an external stylesheet
Linking an external stylesheet and defining that particular hyperlink’s text-decoration to none is another way to do the same. An external stylesheet is linked to the HTML document using the '<link>' tag and mentioning the address of that linked document.
Example
Before specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using external stylesheet</title>
</head>
<body>
<h1><a href="https://www.google.com/">Click here to go to Google!</a></h1>
</body>
</html>
Output
Example
After specifying text-decoration to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using external stylesheet</title>
<link rel="stylesheet" href="/pstyles/index.css">
</head>
<body>
<h1><a href="https://www.google.com/">Click here to go to Google!</a></h1>
</body>
</html>
External Stylesheet Code
a
{
text-decoration: none;
}
Output
