All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Remove Underline From Link In HTML

Last Updated : Mar 11, 2024

How To Remove Underline From Link In HTML

In this tutorial we will show you how to remove underline from link in HTML, in HTML, as we know link are usually creates to jump from one html page to another page. Also, you always see when we use links in HTML the text written inside the anchor tag means it link turns in blue and also an underline is created at the bottom of text.

But due to our webpage layout, sometimes we don’t want that underline and want to make the text creative, so that it matches to layout of our webpage.

Step By Step Guide On How To Remove Underline From Link In HTML :-

As, anchor tag it used to create a link which is used to link two or more webpages and used to link an image, extra material regarding web page and for many others.

And in this tag, we have to write text so as result a text appear in webpage and on clicking on this next page will appear.

Now, the concept here is that the text appeared on webpage of anchor tag is, by default in blue color and underlined.

And our task is to remover underline from that text. So, here we provide you an example with the help of codes so that it helps us to understand how codes works.

<!DOCTYPE html>
          <title> Title of the document<title>
	<a href="http://the_link_is_here">
        the text i write here is in blue color and underlined by defalult
    <a href="http://the_link" style="text-decoration: none;color: white;font-size: 20px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; background-color: black;">
        we change its property so that it looks more attractive
    <a href="http://the_link_herehterewhiee" style="text-decoration: none;">
        the text is not underlined with this property
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create three links with the help of anchor tags, but with different CSS properties.
  5. The first one here is default with no any changes.
  6. The second is not underlined, white in color with black background and its font size in bigger with different font family
  7. The third is for our self and it is not underlined. Here, we use text decoration property and its value is set to none. This is done to remove the underline from link tag in html. For different types of underlines. U can also use different values.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that we are able to customize links according to our choice. In this article we read about how to remove an underline from link in html.

Further, we will also learn how to customize our anchor tag so that it looks more attractive. I hope this tutorial on how to remove underline from link in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪