Lesson 10: Links

Overview

In this HTML lesson, we demonstrate how to make links to other HTML pages. First, we explain that we can link to external pages on the internet. Next, we link to a local file. Then we show that links can be attached to images as well as text. After that, we show how links can be made to positions with a document via the id attribute. Finally, we show how to use the target attribute.

Basic Text Links

Our first example shows how to create a link to an external website, namely the main page of xoax.net. The link is indicated in the text by the different coloring and the underline under the text. Hovering over a link changes the cursor to indicate that the link is clickable. The link text is blue if that location has not been visited. Otherwise, it is purple if the link was visited before. Left-clicking the link will open the destination location.

The link is created by using the <a> element. The "a" stands for anchor, but the element is usually called a hyperlink or link. Inside the <a> element, the href attribute specifies the location that is linked. When the link is clicked, the page at the link is load into the tab of the current page.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Visit xoax.net for more information</p>
    <p>Visit <a href="https://xoax.net/">xoax.net</a> for more information</p>
  </body>
</html>

Output

Local Links

We can link to local HTML documents, just as we link to external pages. In this example, we link to the previous example page.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Visit the <a href="Example1.html">previous</a> document</p>
  </body>
</html>

Output

Image Links

In this example, we demonstrate that links can be put on images as well as text. Links in images are not detectable, unless you hover over the image.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Visit <a href="https://xoax.net/"><img src="XoaxLogo.png"></a> for more information</p>
  </body>
</html>

Output

Links Within Documents

In addition to external website links and local file links, we can link to locations within a document by using ids. If we set an id value on a element, we can link to the element by using an href value with the id with a pound sign prepended to it.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li><a href="#second" id="first">Go to second</a></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><a href="#first" id="second">Go to first</a></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
      <li><img src="XoaxLogo.png"></li>
    </ul>
  </body>
</html>

Output

Setting a Target

We can set the target attribute of a link element to a value, like "here." With the target set, linked pages with the same target will all open in the same tab.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <ul>
      <li><a href="Example1.html" target="here">Example 1</a></li>
      <li><a href="Example2.html" target="here">Example 2</a></li>
      <li><a href="Example3.html" target="here">Example 3</a></li>
      <li><a href="Example4.html" target="here">Example 4</a></li>
    </ul>
  </body>
</html>

Output

Target Self and Blank

Setting the target to _self will open the page in the same tab. The value _self is the default. The value _blank opens the linked page in a new tab.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p><a href="Example6.html" target="_self">Same</a></p>
    <p><a href="Example6.html" target="_blank">New</a></p>
  </body>
</html>