Learn an Easy Way to Remove the Underlines From Links in HTML

By default, text content that is linked to HTML using the or "anchor" element is styled with an underline. Oftentimes, web designers choose to remove this default styling by removing the underline.

Reasons for and Against the Underline

Many designers do not care for the look of underlined text, especially in dense blocks of content with lots of links. All of those underlined words can really break the reading flow of a document. Many have argued that those underlines actually make words harder to distinguish and read quickly because of the way that underlining changes the natural letterforms.

There are legitimate benefits to retaining these underlines on text links, however. For example, when you do browse through large blocks of text, underlined links coupled with proper color contrast make it easy for readers to immediately scan a page and see where the links are.

If you do decide to remove links from the text (a simple process which we will cover shortly), be sure to find ways to style that text to still differentiate what is a link from what is plain text. This is most often done with color contrast, but color alone can pose a problem for visitors with visual impairments like color blindness. Depending on their particular form of color blindness, contrast may be totally lost on them, preventing them from seeing the difference between linked and non-linked text. This is why the underlined text is still considered the best way to show links.

So how do you turn off an underline if you still want to do so? Since this is a visual characteristic we are concerned with, we will turn to the part of our website that handles all things visual — CSS.

Use Cascading Style Sheets to Turn off the Underlines on Links

In most cases, you are not looking to turn an underline off on just one text link. Instead, your design style likely requires you to remove underlines from all links. You would do this by adding styles to your external style sheet.

a {
text-decoration: none;
}

That's it! That one simple line of CSS would turn off the underline (which actually uses the CSS property for "text-decoration") on all links.

You could also get more specific with this style. For instance, if you only wanted to turn off the underline or the links inside of the "nav" element, you could write:

nav a {
text-decoration: none;
}

Now, text links on the page would get the default underline, but those in the nav would have it removed.

One thing many web designers choose to do is to turn the link back "on" when someone hovers over the text. This would be done using the :hover CSS pseudo-class, like this:

a {
text-decoration: none;
}
a:hover {
text-decoration:underline;
}

Using Inline CSS

As an alternative to making changes to an external stylesheet, you could also add the styles directly to the element itself in HTML.

The problem with this method is that it places style information inside your HTML structure, which is not a best practice. Style (CSS) and structure (HTML) should be kept separate. 

If you wanted all of a site's text links to have the underline removed, adding this style information to each link on an individual basis would mean a fair amount of extra markup being added to your site's code. This page bloat can slow down a site's load time and make overall page management much more challenging. For these reasons, it is preferable to always turn to an external style sheet for all page styling needs.

In Closing

As easy as it is to remove the underline from a web page's text links, you should also be mindful of the consequences of doing so. While it may indeed clean up the look of a page, it may do so at the expense of overall usability. Take this into account the next time you consider changing a page's "text-decoration" properties.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Learn an Easy Way to Remove the Underlines From Links in HTML." ThoughtCo, Sep. 30, 2021, thoughtco.com/remove-underlines-from-links-3464231. Kyrnin, Jennifer. (2021, September 30). Learn an Easy Way to Remove the Underlines From Links in HTML. Retrieved from https://www.thoughtco.com/remove-underlines-from-links-3464231 Kyrnin, Jennifer. "Learn an Easy Way to Remove the Underlines From Links in HTML." ThoughtCo. https://www.thoughtco.com/remove-underlines-from-links-3464231 (accessed March 28, 2024).