HTML Anchor Tutorial with Stone River eLearning

Talking of inline elements, there is one specific HTML tag that is used extensively in applications no matter big or small, to connect the different pages to each other. No prizes for guessing that we are referring to the anchor tag which is denoted by the “<a>” opening and closing brackets. Now it is important to note that while anchor tag is denoted by “<a>” and is used to link one page to another, this anchor tag holds little significance without the “href” attribute which helps browser get signals towards the links destination. We have already discussed about how the anchor element can be utilized to jump to different locations on the same page, therefore, in this blog post, we will be discussing about the ways to use anchor element to jump to a different page, or a link on the internet. Before we start, let us learn a bit more about the anchor tags.

  • A page linked to an HTML document using the anchor tag is normally displayed in the same browser window, unless otherwise specified.
  • To display the link in a different window, you must include the “target = _blank” attricbute inside your anchor element.
  • The default properties of the links appearing on the web browser are:
    • Unvisited links appear underlined and blue in colour.
    • Visited links appear underlined and purple on the browser screen.
    • An active link appears underlined and red in colour.

Now before we discuss about linking different pages to an HTML document using the anchor element and the “href” attribute, it is important to understand that there can be three ways in which these links can be established.

  1. When the document to be linked is in the same folder as the root file.
  2. When the document to be linked is in a different folder of the same system, as the root file.
  3. When the page to be linked is on the internet.

We will take one case at a time and try to explain the ways of creating the HTML link to the other document in each case. It is important to note that there are only a few, very small changes required to execute the link in the three cases; however, missing these changes might lead to an error in the link.

Case 1: Document in the same folder

Eg:

<!DOCTYPE html>
<html>
<head>
<meta charset =”UTF-8”>
<title> Link Case 1 </title>
</head>
<body>
<a href = “Page2.html” > Link to the Next Page </a>
</body>
</html>

Case 2: The HTML page is in some other folder on the same system

Eg:

<!DOCTYPE html>
<html>
<head>
<meta charset =”UTF-8”>
<title> Link Case 2 </title>
</head>
<body>
<a href = “. ./ home/index.html” > Link to a page in a different folder </a>
</body>
</html>

Case 3: The HTML page links to a page on the internet

Eg:

<!DOCTYPE html>
<html>
<head>
<meta charset =”UTF-8”>
<title> Link Case 3 </title>
</head>
<body>
<a href = “http://google.com” > Link to a page on the internet </a>
</body>
</html>

 

Points to Ponder:

  • The Case 1 when you need to link an HTML document in the same folder does not need anything other than the file name in the href attribute to perform a successful link.
  • The Case 2 needs the user to mention the complete url to complete link. It is important to note that a complete url includes the “http” attribute is included.
  • The Case 3 needs you to move out of the current folder where the root document is saved and to the folder where the document to be linked is saved. Only when you reach the document you can create a link to it.

Download the source code here:

GET YOUR FREE HTML EBOOK!

(Visited 80 times, 1 visits today)