How to Remove Underline from Hyperlink

There are many ways to remove underline from hyperlink but first we need to understand what a hyperlink is:

What is hyperlink in HTML?

A hyperlink is a word, group of words, or an image that links to another web page or document. Generally the text is underlined with a bright color and when you move the cursor over this link, the arrow turns into a small hand.

The <a> tag defines a hyperlink and the most important attribute of <a> tag is href attribute that indicates the link to other document or web page.

The syntax of hyperlink is:

<a href=”document or website url“>text which you want to link</a>

Here href attribute specifies the destination of a link.


Example:

<a href=”http://itbloggertips.com/”>IT Blogger Tips</a>

Result:

IT Blogger Tips


Hyperlink Code

How to remove underline from hyperlink?

This article will show you how to remove underline from hyperlink in html.

You can add following style attribute in regular hyperlink code to remove underline from hyperlink.

style=”text-decoration: none”

Text-Decoration Syntax:

text-decoration: none | [ underline || overline || line-through || blink ] | inherit

  • none: used for no special decorations.
  • underline: Used for underlines the text.
  • overline: used to put a line above the text.
  • line-through: Used to put a line through the middle of the text.
  • Blink: Used to make the text blink.
  • inherit: This element will have the same text-decoration setting as the parent.

Remove Underline from Hyperlink Code in HTML

You need to add only one thing in above code i.e. the style attribute value with the specified value from above syntax. Following examples will show you different type of text-decoration styles along with remove underline from hyperlink.

Example-1: text-decoration: none

<a href=”http://www.itbloggertips.com/” style=”text-decoration: none”>IT Blogger Tips</a>

Result:

IT Blogger Tips

Example-2: text-decoration: underline

<a href=”http://www.itbloggertips.com/” style=”text-decoration: underline”>IT Blogger Tips</a>

Result:

IT Blogger Tips

Example-3: text-decoration: overline

<a href=”http://www.itbloggertips.com/” style=”text-decoration: overline”>IT Blogger Tips</a>

Result:

IT Blogger Tips

Example-4: text-decoration: line-through

<a href=”http://www.itbloggertips.com/” style=”text-decoration: line-through”>IT Blogger Tips</a>

Result:

IT Blogger Tips

Example-5: text-decoration: blink

<a href=”http://www.itbloggertips.com/” style=”text-decoration: blink”>IT Blogger Tips</a>

Result:

IT Blogger Tips

Example-6: text-decoration: inherit

<a style=”text-decoration: inherit;” href=”http://www.itbloggertips.com/”>IT Blogger Tips</a>

Result:

IT Blogger Tips

If you liked this article, don’t forget to share with your friend and colleagues.

Register your e-mail address to get free informative articles. It will take less than 10 sec’s to register your email address.

SiteGround Black Friday Sale Below Banner

Get Free Blogging Tips & Technology updates in your Email !!!

Subscribe via RSS feed

The following two tabs change content below.
Anil Kumar
IT Blogger Tips focus on Blogging Tips, SEO Tips, Social Media, SQL Tips, PL/SQL Tips, Oracle DBA, Linux/Unix, Latest Technology, How Tos and Technical Solutions. You can find us on Facebook | Twitter |
Find on Google+

Siteground SALE
70% OFF SiteGround WordPress Hosting – $2.95/month (Exclusive Offer !!!)