Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Hyperlinks and Button Links

Code Description:

Hyperlinks are created with the anchor tag (<a>). These take in a relative file path or an absolute URL for the "href" attribute which tells the browser where to take you once the link is clicked. We recommend using absolute URLs whenever possible to prevent confusion and to allow search engines to have an easier time indexing your site. If the "target" attribute is given a value of "_blank", the destination URL will open in a new browser tab.

Hyperlink Syntax:

<a href="URL">Text for the Link</a>

Relative Hyperlink Syntax:

<a href="starter_html_template.php">Relative Link</a>
Relative Link

Absolute Hyperlink Syntax:

<a href="https://www.freecode.net/snippets_html_css/starter_html_template.php">Absolute Link</a>
Absolute Link

New Tab Hyperlink Syntax:

<a href="https://www.freecode.net/snippets_html_css/starter_html_template.php" target="_blank">Absolute Link</a>
New Tab Link

Hyperlink Pseudo Classes:

There are 3 Pseudo Classes used with Hyperlinks:

Pseudo Classes Link Syntax:

a:hover {

}

a:active {

}

a:visited {

}

Runnable Button Styled Hyperlink Example Code:

Hyperlinks can also be styled to look like buttons as shown in the example below. Press Me!

<!DOCTYPE html>
<html>
    <head>
        <title>Button Hyperlink Example</title>
	   
	<style>
	   	
        .linkCss {
          color: white;
          text-decoration: none;
          background-color: #009000;
          border: solid black 3px;
          padding: 10px;
          font-size: 20px;
        }

        .linkCss:hover {
          background-color: #006000;
        }
	   
        </style>
	   
    </head>
 
    <body>
      <a href="" class="linkCss">Press Me!</a> 

    </body>
</html>

How to Run This Code:

Simply paste this code into a plain text file with the ".html" extension and save it. You will then be able to open it in the web browser of your choice.

Related Links: