How To Display Hyperlinks Without An Underline In HTML

How to display hyperlinks without an underline in HTML
Table of Contents

Looking for a way to remove the underline in hyperlinks in HTML then you are at the right place because today I will show you how to display hyperlinks without an underline in HTML.

It is just going to be one line of code which we are going to use it is going to be easy and simple so follow up with me.

Display Hyperlinks Without An Underline In HTML

As I have said it is very easy to remove the underline from the hyperlink which is automatically generated when you use the tag below is the example of how it looks.

To remove that underline from the hyperlink we need to use CSS which is a styling language which makes HTML beautiful so put it in action.

Removing underline from hyperlink with internal CSS

To remove the underline from the hyperlink you can use the below code instead of using the regular hyperlink tag.

				
					<a style="text-decoration:none" href="https://coderzway.com">Coderzway</a>
				
			

As you can see it is bit different from the regular tag because we have used CSS in the anchor tag this CSS style=”text-decoration:none”. 

This is inline css which we have used inside the html tag the better way for this is to use the external css in a seperate file.

Removing Underline from hyperlink with external CSS

We can create a seperate class for removing the underline and use it across the html instead of adding the long inline css and another option is use the global tag in CSS which will remove all the underline from the hyperlinks.

I will show you both methods you can use any one of the method you find easy and simple so let’s how to do it.

Using CSS class to remove underline from hyperlink

				
					.no-underline{
    text-decoration:none;
}
				
			

You can use the above class in the anchor tag and it will remove the underline from the hyperlink. You can create this class in the a seperate css file and remember to link this css file inside the head tag in your html file by using the below tag

				
					<link rel="stylesheet" href="styles.css">
				
			

Using global CSS to remove underline from all hyperlinks

				
					*{
    text-decoration:none;
}
				
			

If you don’t know about this global CSS property then everything we put inside it will apply to all the elements of the HTML so we set text decoration to none so it will remove the underlines from the hyperlinks you don’t have to manually add the class or css to each anchor tag.

Another way of doing this is instead of adding css to the global tag we can just set the css to all the anchor tags like this

				
					a{
    text-decoration:none;
}
				
			

Now this will only remove underline from the hyperlink or anchor tag it will not intefere with the CSS of other HTML elements this is a better approach you can use.

If you are looking for more HTML solutions or guides then you can always find solutions on the w3schools website.

Summary

These were all the methods which you can use to remove an underline in a hyperlink you can use anyone which you find suitable and easy for you. I hope you find this guide helpful and you found what you were looking for .

Here are more guides which you may find useful.

Thank you for reading, Have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles