HTML Links

Rumman Ansari   Software Engineer   2023-03-27   6977 Share
☰ Table of Contents

Table of Content:

What you will learn in this tutorial

This tutorial explains how to create a link from one page to another. It also outlines the different types of hyperlinks.

  • What is link in HTML
  • Syntax of link in HTML
  • <a> element to define a link
  • href attribute to define the link address
  • target attribute to define where to open the linked document
  • <img> element (inside <a>) to use an image as a link
  • id attribute (id="value") to define bookmarks in a page
  • href attribute (href="#value") to link to the bookmark

What is Link

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. Links, known as hyperlinks, are defined using the <a> tag otherwise known as the anchor element.

To create a hyperlink, you use the <a> tag in conjunction with the href attribute. The value of the href attribute is the URL, or, location of where the link is pointing to.

Syntax of Link 

 
 
 <p> Here are some <a href = "https://www.atnyla.com/library/html/"> HTML codes </a> to play with. </p>

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.

  1. absolute
  2. relative
  3. root relative

Absolute

This refers to a URL where the full path is provided. For example:

 
 
<a href = "https://www.atnyla.com/library/html/"> HTML Tutorial </a>

Relative

This refers to a URL where the path, relative to the current location, is provided.

For example, if we want to reference the https://www.atnyla.com/library/html/ URL, and our current location is https://www.atnyla.com/library/, we would use this:

 
  
 <a href = "html/"> HTML Tutorial </a>

Root Relative

This refers to a URL where the path, relative to the domain's root, is provided.

For example, if we want to reference the https://www.atnyla.com/library/html/ URL, and the current location is https://www.atnyla.com/library/, we could use this:

 
  
 <a href = "/library/html/"> HTML Tutorial </a>

The forward slash indicates the domain's root. No matter where your file is located, you can always use this method to specify the path, even if you don't know what the domain name will eventually be (as long as you know the full path from the root).

The target Attribute

The target attribute specifies where to open the linked document. The target attribute can have one of the following values:

  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab 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
  • framename - Opens the linked document in a named frame