How to remove underline from link html

HtmlHow-ToBeginner · 3 min read

How to Remove Underline from Link in HTML Easily

To remove the underline from a link in HTML, use CSS and set text-decoration: none; on the <a> element. This style tells the browser not to show the default underline on links.

📐

Syntax

Use CSS to control the underline style of links. The key property is text-decoration. Setting it to none removes the underline.

a: selects all link elements.
text-decoration: CSS property controlling underline, overline, line-through.
none: value that removes all text decorations.

css

a {
  text-decoration: none;
}

💻

Example

This example shows a simple HTML page with a link that has no underline because of the CSS text-decoration: none; rule.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Link Underline Example</title>
  <style>
    a {
      text-decoration: none;
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Here is a link without underline: <a href="https://example.com">Visit Example</a></p>
</body>
</html>

Output

A webpage with a blue, bold link labeled 'Visit Example' that has no underline.

⚠️

Common Pitfalls

Many beginners forget to add text-decoration: none; to the correct selector or override browser styles properly. Also, some try to remove underline by using deprecated HTML tags or attributes, which do not work in modern browsers.

Another common mistake is not considering link states like :hover or :visited, which may still show underlines if not styled.

html/css

/* Wrong: Using deprecated attribute (does not remove underline reliably) */
<a href="https://example.com" style="underline: none;">Wrong Link</a>

/* Right: Use CSS text-decoration */
a {
  text-decoration: none;
}

/* Also remove underline on hover */
a:hover {
  text-decoration: none;
}

📊

Quick Reference

Summary tips to remove underline from links:

Use text-decoration: none; on a elements.
Remember to style link states like :hover and :visited to keep consistent look.
Avoid deprecated HTML attributes like underline or font tags.
Use semantic HTML and CSS for best accessibility and browser support.

✅

Key Takeaways

Use CSS property text-decoration: none; on tags to remove underline.

Apply the style to all link states like :hover and :visited for consistency.

Avoid deprecated HTML attributes; always use CSS for styling links.

Keep links accessible by maintaining good color contrast and focus styles.