Within computer programming, links are widely known and used to direct toward a specific location where the data has been residing. We can get into that particular location by tapping on the hyperlink. We can also attach that link to some word or button so that when we tap on the word or button, it will take us to the particular data. Usually, when a user adds some hyperlink to the word or button, that word or button would be highlighted and underlined. What if some of you don’t want to underline the link? In this case, use this article for your help that will illustrate some examples to remove underlining from the link.

Example 01:
Let’s take a look at the first example of HTML to add the link within the HTML webpage. Then, we will be discussing a way to remove the underline of this link. We have generated a new text file with the title “CSS”. This file has been opened in the Visual Studio code. We have been starting our code with the use of the main HTML tag, “html”. Within the “head” tag of this HTML script, we have been using the “title” tag to name or title our webpage, “Remove Underline”.

Within the body tag, we have been adding our content to be displayed on the webpage with the help of some useful HTML tags. The first tag we have been using is the heading tag of size 2, “h2”. The h2 is the second largest heading in HTML scripting. This heading will be displayed on the webpage without any styling and in another format. The next tag we have been using is the paragraph tag, “p”. It contains a simple text along with the link in it that is attached to it with the anchor “a” tag followed by the “href” to add the URL. This link can be a path to some image on your local computer or some online webpage. We have provided the path to an image in our local computer (i.e., index.png.) Whatever you provided in the anchor “a” tag will be underlined and highlighted on a webpage. This is about the use of links on an HTML page. Let’s save and run this code by using the Run button from the taskbar of Visual Studio code. Run this code with the Chrome browser.

The webpage named “Remove Underline” has been opened in the browser as you can see from the below output. There is a heading “Link with Underline” on your white screen. After that, you have a simple one-line paragraph below it with a link attached to its word “Logo”. You can see that the word “Logo” is underlined and highlighted in blue color. Tap on the word “Logo” to see what comes out.

The webpage has been directed to the shown-below image (index.jpg) location that has been located on our local computer. The image contains a simple animated logo.

Let’s update our HTML code to remove the line used to underline the link keyword “Logo”. For this, we have updated heading h2 first (i.e., “Link with No underline”). After this, we have been using the “style” CSS tag within the anchor tag “a” to set the property “text-decoration” to “none”. The “text-decoration” property set to “none” will remove all the styling applied to the particular link keyword “Logo” and make it a simple normal text. Let’s save this code first.

After running the updated code in the browser, we have the paragraph line and heading updated. The word “Logo” has been highlighted as it is but the underline has been removed from it. On the other hand, the “Logo” keyword still works as a link and directs you to the image.

Example 2:
Let’s take a look at the new example to remove the underline from the links provided in the HTML webpage. This example will be different because we have been using two links of different sorts in the inner paragraph tag of a body tag for an HTML script. We have added two headings and two paragraphs in the body of a webpage through tags. The first and second titles: “Link with Underline”, show that both the links will be underlined. Within the paragraph tags, we have been using the anchor tag “a” to add links to specific URLs. The very first paragraph URL has been pointing towards the same image index.png. A CSS style tag has been used to set the color of this link keyword “Logo” to purple as per the color property. The second paragraph URL has been pointing towards the new URL for a simple text file located on our local computer (i.e., test.txt) and CSS style tag has been used to set the color of its link keyword “File” to brown as per the color property.

Let’s style them with the help of a style tag in the head tag of an HTML file. We have been setting the 15-pixel margins for headings and paragraphs while we have been setting the link and hover properties as well. The text-decoration property is using the value “underline” to underline both keywords. The thickness of the line has been set to 6 pixels. The hover property color has been set to “Aqua”. Let’s save and debug this code in Visual Studio now.

The output for the above code has been showing two headings with two paragraphs. The underlined “Logo” keyword contains the path to the image while the underlined word “File” will be directing you towards the text file (i.e., test.txt.)

When you tap on the keyword “File” it will direct you to the test.txt file as shown below.

When you hover over any of the highlighted words from the shown-below paragraphs, the color of a word and its underline would be changed to “aqua” as shown in the display below.

To remove the underline from both the link words, we need to set the property text-decoration for a link to “none”. We haven’t updated the rest of the code to avoid any inconvenience. To see its workings, we need to save it first by Ctrl+S, and then debug it using the “Run” button from the Visual Studio Code.

The output for this updated code has been showing two paragraphs each with the link word “Logo” and “File” respectively. The underline at the bottom of both the words has been removed successfully without causing any issue.

Conclusion:

The demonstration of removing an underline from the link has been done within this article. For this, we utilized the text-decoration property within the in-line styling and out-line styling of an HTML script. The use of the hover element along with the thickness and color property of a link has been very helpful throughout the article. After going through all the illustrations of HTML provided in this article, you will be able to get the knowledge and clear understanding of links, their styling, and removing the underlines beneath them.