To remove the underline from a link in HTML, you can use CSS. The default style for anchor (<a>) tags in HTML typically includes an underline, but you can easily remove it by modifying the text-decoration property.
Method 1: Inline CSS (Directly in the <a> Tag)
You can use the style attribute directly in the anchor (<a>) tag to remove the underline.
<a href="https://example.com" style="text-decoration: none;">Click here</a>
Method 2: Internal CSS (Within <style> Tags)
If you want to remove the underline for all links within a page, you can use internal CSS by adding a <style> block in the <head> section of your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a {
text-decoration: none;
}
</style>
<title>Remove Underline from Link</title>
</head>
<body>
<a href="https://example.com">Click here</a>
</body>
</html>
Method 3: External CSS (Using a Separate CSS File)
If you’re working with an external CSS file, you can include the following rule in your .css file:
a {
text-decoration: none;
}
Additional Notes:
- The
text-decoration: none;CSS rule removes the underline effect, but if you want to add custom styles to links (such as changing the color or adding hover effects), you can combine it with other CSS properties. - Example for hover effect without underline:
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red; /* Change color when hovering */
}
This will remove the underline from all links and, if applied to the entire site, ensure that no link has an underline unless specifically styled otherwise.
Let me know if you need further clarification!