What really distinguishes the Web from other mediums is the way in which a web page can contain links (or hyperlinks) that you can click on to be taken from one page to another page. The link can be a word, phrase, or image. The power of HTML lies in hyperlinks or links. Links allow you to click on any element and navigate from page to page. A hyperlink can be put on text or image that you can click on, and jump to another document.

When you link to another page in your own web site, the link is known as an internal link. When you link to a different site, it is known as an external link.

Basic Links

Links are defined with the <a> tag (anchor) and href attribute that specifies the destination address. The destination can be just about anything, from another web page on the same site, to a different site, to a document or file, to another location within the same web page. The link text is the visible part on the browser. Anything between the opening <a> tag and the closing </a> tag becomes part of the link that users can click in a browser.

To link to another web page, the opening <a> tag must carry an attribute called href; the value of the href attribute is the name of the file or URL you are linking to.

<a href="/link">link text</a>

When you move the mouse cursor over a link, two things normally happen:

  1. The mouse arrow turns into a little hand.
  2. The color of the link element changes.

Style of Default Links

By default, links will appear as this in all browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

Target Attribute

The target attribute specifies where to open the linked document - same window or new window or tab. Below example will open the linked document (Google Website) in a new browser window or a new tab.

<a href="https://www.google.com/" target="_blank">Visit Google!</a>

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

Linking To Email Address

To create a link to an e-mail address, you need to use the following syntax with the <a> element:

<a href=”mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.”>Email Us</a>

Absolute and Relative URLs

Absolute and relative paths are two reference methods for connecting sites and pages. While both methods can be used when creating links that point to content in our own site, only absolute can be used when pointing to content that is outside of your domain.

An absolute URL contains everything you need to uniquely identify a particular file on the Internet. This is what you would type into the address bar of your browser in order to find a page.

A relative URL indicates where the resource is in relation to the current page. You can use relative URLs to specify files in different directories.

Benefit of using relative URLs within your site is that you can develop the site on your desktop or laptop without having bought a domain name. You can also change your domain name or copy a subsection of one site over to a new domain name without having to change all of the links, because each link is relative to other pages within the same site.