HTML Tutorial - HTML Hyperlinks








Hyperlinks provide the basis for HTML by which users can navigate through content, both within the same document and across pages.

You create hyperlinks using the a element.

Attribute

The a element has local attributes:href, hreflang, media, rel, target, type.

  • href - Specifies the URL of the resource that the a element refers to.
  • hreflang - Specifies the language of the linked resource.
  • media - Specifies the device that the linked content is intended for. This attribute uses the same device and feature values with head meta element.
  • rel - Specifies the kind of relationship between the document and the linked resource. This attribute uses the same values as the rel attribute of the link element.
  • target - Specifies the browsing context in which the linked resource should be opened.
  • type - Specifies the MIME type of the linked resource, such as text/html.

The id, coords, shape, urn, charset, methods, and rev attributes are obsolete.





You can create hyperlinks to other HTML documents by setting the href attribute in a element to a URL that starts with http://.

When the user clicks the hyperlink, the browser will load the specified page.

The following code shows the a element being used to link to external content. 

<!DOCTYPE HTML>
<html>
<body>
  I like <a href="http://java2s.com">Tutorial</a>.
</body>
</html>




Note

Not all URLs have to refer to other web pages.

Browsers also support other protocols such as https and ftp. If you want to reference an e-mail address, you can use the mailto protocol; for example, mailto:info@example.com.

Relative URLs

If the value of the href attribute doesn't start with a recognized protocol, such as http://, then the browser treats the hyperlink as a relative reference.

The following code gives an example of a relative URL. 

<!DOCTYPE HTML>
<html>
<body>
  I like <a href="index.html">tutorial</a>.
</body>
</html>

The code set the href attribute to index.html.

When the user clicks the link, the browser uses the URL of the current document to determine how to load the linked page.

You can create hyperlinks that bring another element into view in the browser window.

You create internal hyperlinks using the CSS-style ID selector, #id, as shown in the following code. 

<!DOCTYPE HTML>
<html>
<body>
  You can see other tutorials I like<!--from w  w w  .  j  a  v a 2 s  . c  o m-->
  <a href="#tutorial">here</a>.
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <p id="tutorial">This is a test.</p>
</body>
</html>

Click to view the demo

The code above created a hyperlink with the href value of #tutorial.

When the user clicks the link, the browser will look for an element in the document whose id attribute has a value of tutorial. If the element isn't already visible on the screen, the browser will scroll the document to show it.

If the browser can't find an element with the desired id attribute value, it will search again, looking for a name attribute that matches the target.

Target browsing context

The target attribute from a element lets you tell the browser where you want the linked resource to be displayed.

By default, the browser uses the window, tab, or frame in which the current document is displayed to show the linked document and replace the existing one.

The following list describes the supported values for the target attribute.

  • _blank - Open the document in a new window (or tab).
  • _parent - Open the document in the parent frameset.
  • _self - Open the document in the current window (this is the default behavior).
  • _top - Open the document in the full body of the window.
  • <frame> - Open the document in the specified frame.

Each of these values represents a browsing context.

Using Anchor Pseudo-classes

Links can be displayed in different ways: 

a:link {color:#FF0000;}    /* unvisited link */           
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;}   /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

The meaning of each pseudo-class is listed in the css comments.

The following code sets the four anchor pseudo-classes.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
        a:link, a:visited {<!--  w w  w.ja v a  2  s .co m-->
          text-decoration: underline;
          color: #6A5ACD;
          background-color: transparent;
        }
        a:hover, a:active {
          text-decoration: underline overline;
          color: #191970;
          background-color: #C9C3ED;
        }
</style>    
  </head>
  <body>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
  </body>
</html>

Click to view the demo

Pseudo-classes can be combined with CSS classes. The following example tells the browser to display a visited anchor link in red. 

a.red:visited {color:#FF0000;}

<a class="red" href="http://java2s.com">java2s.com</a>