Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove underline from a link in HTML?
By default, HTML links are displayed with an underline to indicate they are clickable. However, you can remove this underline using the text-decoration CSS property. The most common approach is to use an inline style attribute directly on the link element.
Syntax
Following is the syntax to remove underline from a link using inline CSS −
<a style="text-decoration: none;" href="URL">Link Text</a>
You can also use internal or external CSS to apply this style to multiple links −
a { text-decoration: none; }
Using Inline Style
The inline style method applies the text-decoration: none property directly to individual links. This approach is useful when you want to remove underlines from specific links only.
Example
Following example demonstrates removing underline from a single link using inline style −
<!DOCTYPE html> <html> <head> <title>Remove Link Underline</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>HTML - HyperText Markup Language</h3> <p>Learn more about HTML: <a style="text-decoration: none; color: #007bff;" href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a></p> <p>This link has no underline but retains the blue color to indicate it's clickable.</p> </body> </html>
The output shows a link without underline but with blue text color −
HTML - HyperText Markup Language Learn more about HTML: HTML Tutorial (blue text, no underline) This link has no underline but retains the blue color to indicate it's clickable.
Using Internal CSS
When you need to remove underlines from multiple links, using internal CSS in the <style> section is more efficient than inline styles.
Example
Following example removes underlines from all links using internal CSS −
<!DOCTYPE html>
<html>
<head>
<title>Remove All Link Underlines</title>
<style>
a {
text-decoration: none;
color: #28a745;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #155724;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Navigation Menu</h2>
<p><a href="/html/index.htm">HTML Tutorial</a></p>
<p><a href="/css/index.htm">CSS Tutorial</a></p>
<p><a href="/javascript/index.htm">JavaScript Tutorial</a></p>
<p>Hover over any link to see the underline appear temporarily.</p>
</body>
</html>
All links appear without underlines initially, but show underlines when hovered over −
Navigation Menu HTML Tutorial (green text, bold, no underline) CSS Tutorial (green text, bold, no underline) JavaScript Tutorial (green text, bold, no underline) Hover over any link to see the underline appear temporarily.
Selective Link Styling
You can also target specific links using CSS classes or IDs to remove underlines from some links while keeping them on others.
Example
Following example shows how to style different types of links differently −
<!DOCTYPE html>
<html>
<head>
<title>Selective Link Styling</title>
<style>
.no-underline {
text-decoration: none;
color: #dc3545;
font-weight: bold;
}
.normal-link {
color: #007bff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Mixed Link Styles</h2>
<p>This is a <a class="no-underline" href="#">link without underline</a> in the paragraph.</p>
<p>This is a <a class="normal-link" href="#">normal link with underline</a> for comparison.</p>
<p>Notice the visual difference between the two link styles.</p>
</body>
</html>
The first link has no underline while the second link retains the default underlined appearance −
Mixed Link Styles This is a link without underline (red text, bold, no underline) in the paragraph. This is a normal link with underline (blue text, underlined) for comparison. Notice the visual difference between the two link styles.
Common Use Cases
Here are typical scenarios where you might want to remove link underlines −
-
Navigation menus − Menu links often look cleaner without underlines, relying on color and positioning to indicate they are clickable.
-
Button-style links − Links styled to look like buttons typically don't need underlines since the button appearance makes their clickable nature obvious.
-
Logo links − Company logos that link to the homepage should not have underlines as it disrupts the visual design.
-
Social media icons − Icon-based links for social media platforms work better without underlines.
Best Practices
When removing underlines from links, consider these accessibility and usability guidelines −
-
Maintain visual distinction − Use color, font weight, or other styling to ensure links are still recognizable as clickable elements.
-
Hover effects − Consider adding hover effects like color changes or temporary underlines to provide user feedback.
-
Context matters − In body text, underlined links help users identify clickable content, so removing underlines should be done thoughtfully.
Conclusion
Removing underlines from HTML links is achieved using text-decoration: none in CSS. You can apply this using inline styles for individual links, internal CSS for multiple links, or class-based styling for selective control. Always ensure links remain visually distinct and accessible when removing their default underline styling.
53K+ Views
