HTML Hyperlinks

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.

images/articles/html/html-hyperlinks.webp

The link can be a word, phrase, or image. 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.

1. Anchor Tag

Links are defined with the anchor tag, <a> tag (anchor) and href attribute that specifies the destination address. The destination can be 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 (hypertext reference); the value of the href attribute is the name of the file or URL you are linking to.

<a href="#">Click Here!</a>

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

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

Style of Default Links

By default, in all browsers links will appear as:

  • Unvisited link is underlined and blue.
  • Visited link is underlined and purple.
  • Active link is underlined and red.

2. 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>
  1. _blank: Opens the linked document in a new window or tab
  2. _self: Opens the linked document in the same frame as it was clicked (this is default)
  3. _parent: Opens the linked document in the parent frame
  4. _top: Opens the linked document in the full body of the window

3. 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:name@example.com">Email us</a>

4. Understanding URLs

Web addresses are technically URLs (Uniform Resource Locators), and they have a very specific format. A URL contains following parts:

  1. Protocol
  2. Host name
  3. Domain name
  4. Subdomain
  5. Page name
  6. Username

1. Protocol

A web protocol is a standardized agreement on how communication occurs. The web primarily uses HTTP (hypertext transfer protocol). Most addresses begin with http:// or https:// because this is the standard on the web. Protocols usually end with a colon and two slashes (://).

2. Host Name

It is traditional to name your primary web server www. There is no requirement for this, but it is common that users type www right after the https://. The text right after https:// (and up to the first period) is the name of the actual computer (or host) you are linking to.

3. Domain Name

The last two or three characters indicate a particular type of web server. Three-letter domains usually indicate the type of organization, and two-letter domains indicate a country.

4. Subdomain

Everything between the host name (usually www) and the domain name (often .com) is the subdomain. This is used so that large organizations can have multiple servers on the same domain.

5. Page Name

Sometimes, an address specifies a particular document on the web. This page name follows the address and usually ends with .html. Sometimes, the page name includes sub-directories and username information, as well.

5. Absolute and Relative References

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.

Absolute URLs

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.

Relative URLs

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.