To remove the underline from a link in HTML, use the CSS property text-decoration: none; on your <a> (anchor) tags. Browsers add underlines to links by default, but you can easily override this with CSS.
Methods to Remove Underlines
1. Inline CSS
Apply style="text-decoration: none;" directly to the link:
<a href="https://example.com" style="text-decoration: none;">
No Underline Link
</a>This only affects the specific link where the style is applied.
2. Internal CSS
Add a <style> section in the <head> to target all links on the page:
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://example.com">Link without underline</a>
</body>This removes underlines from every link on the page.
3. External CSS
If you are using a separate CSS file, add:
a {
text-decoration: none;
}This will remove underlines from all links site-wide.
4. Covering All Link States
For complete consistency across all link states (normal, visited, hover, active), target each pseudo-class:
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}This ensures the underline never reappears when the link is hovered or clicked.