How to Hide a Link in HTML

PDF download Download Article
2 methods for hiding a link on your webpage
PDF download Download Article

Hiding a link in HTML will make it practically unusable to the average user who is viewing your your webpage. And if the person viewing your webpage is using an old or outdated browser, some methods for hiding links in HTML simply will not work. [1] But if you want to make a fun scavenger hunt or add some hidden features, sometimes called Easter eggs, to your site, hiding links can help you achieve just that! However, a functional knowledge of HTML and code writing will be necessary to implement these changes.

Easy Ways to Hide HTML Links

  • Change the font color of the link to the same color as the page's background.
  • You can also create a CSS class or ID for the link and change the "display" or "visibility" property to none .
  • Hiding a link in your HTML code can be useful when calling and displaying links elsewhere with JavaScript.
Method 1
Method 1 of 2:

Changing the Link Font Color

PDF download Download Article
  1. By going into the code you have written for your webpage, you can find the link you've written into the code and change all its color values to match your background. In doing this, you'll effectively render your link invisible against your background color.
  2. HTML, CSS, and other coding languages use six digit, three-byte hexadecimal code to represent color. You'll need to find the hex code for the color that matches your background, but a few common hex codes are as follows:
    • White: FFFFFF
    • Black: 000000
    • Gray: 808080
    • Light Gray: D3D3D3
    • Blue: 0000FF
    • Beige: F5F5DC
    Advertisement
  3. Once you have found the link you want to hide in your webpage code and know your hex color code, you can begin changing the color of your link. To do so, use the following code, inserting the link you want hidden and your hex color code where appropriate: [2] [3]
    • <style>
      a:link.com {
      color: #(insert hex color code here);
      }
      a:active {
      color: #(insert hex color code here);
      }
      a:visited {
      color: #(insert hex color code here);
      }
      a:hover {
      color: #(insert hex color code here);
      }
      </style>
  4. Though your link is now effectively hidden, you and other users will still be able to locate the link using the "find" feature in your browser. Whether your link is normal, visited, active, or being hovered over by a cursor, your link should now be invisible.
    • The "find" function can be activated in most browsers by pressing Ctrl + F .
    5. Advertisement
Method 2
Method 2 of 2:

Using Class-Based CSS

PDF download Download Article
  1. You can do this by including additional information in your link tag. Find your link tag and include the appropriate code for either your ID or class. Your code should look like:
    • class=Link.com
    • id=Link.com [4]
  2. You can reference the name you've created by using a "." for classes or the "#" symbol for your ID. The code of this should look similar to:
    • Classes: .Link.com
    • IDs: #Link.com
  3. Both of these features will have the effect of hiding your link, but each function hides the link in a different way. By changing the display feature to "none", you will remove the link from the page layout. [5] This may cause other elements of your page to move if they define their position in reference to your link. Changing your visibility to "hidden" will hide the link without influencing the page layout. [6] Your code for this stage should simply look like:
    • display: none
    • visibility: hidden
  4. Incorrect code can cause significant errors in your webpage or change important elements of your design. Your final HTML and CSS code should look like:
    • HTML Code:
      <a href=Link.com
      class=Link.com>Link</a>
    • CSS Code:
      .Link.com {
      display: none;
      }
    5. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • This is incredibly useful if you are calling and displaying links elsewhere with JavaScript but don't want users to see them load.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      • Some companies that provide Internet search engine services look at the use of hidden HTML links to manipulate search rankings as a violation of Webmaster ethics. [7]
        Thanks
        Helpful 0 Not Helpful 0
      Advertisement

      You Might Also Like

      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      How to
      Copy HTML Source Code on Your Computer, iPhone, or Android
      Advertisement

      References

      1. ↑ http://webdesign.about.com/od/css/qt/tiphidecursor.htm
      2. ↑ http://www.w3schools.com/tags/att_body_link.asp
      3. ↑ http://www.w3schools.com/cssref/sel_hover.asp
      4. ↑ http://webdesign.about.com/od/css/qt/tiphidecursor.htm
      5. ↑ http://htmldog.com/techniques/showhide/
      6. ↑ http://webaim.org/techniques/css/invisiblecontent/
      7. ↑ https://support.google.com/webmasters/answer/66353?hl=en

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 193,319 times.

      Is this article up to date?

      Advertisement