Hyperlinks In Html.
Understand the fundamental concepts of HTML hyperlinks and implement them by knowing the best use case.
We use
webpages every day and whenever we reach out to a site it will surely navigate us to another page as all the information cannot be dumped on a single page. Webpages are linked together to deliver the content more effectively. In this blog let's discuss this part of HTML where we will be linking things to our HTML document.
Let's first have some introduction to the tag then explore its attributes and then we shall find out the best use case to use those attributes and finally implement them and see the output on our browser window.
What is a Hyperlink?
It is an element in the HTML document that establishes a link to either a portion of the document or any other document.
How can we have hyperlinks in HTML?
To establish these hyperlink we use anchor [ < a>...< /a > ] tag.
How does anchor tag work?
An anchor tag establishes a link between the document and another web page as well as files, locations, or any URL. By this users can be redirected/navigated to the different places inside the webpage or to an external resource.
Some important use cases of anchor tags?
- To navigate users to another webpage.
- To navigate users to another URL to provide supportive information.
- To navigate users to different sections of the webpage.
- To navigate users directly to a default email application so that users can reach you with ease.
- To help users directly start a call without entering a phone number.
- To navigate users to access different files and so on.
Important attributes of anchor tag :
1. href
- The href attribute is mandatory in every anchor tag. If not provided will behave as plain text.
- href is the hypertext reference that defines the endpoint where the navigation happens.
- The endpoint might be :
- A webpage within the project.
- Any other files.
- Any Link to an Email.
- Any Link to a telephone.
- Any other URL.
2. target
- This is another important attribute of the anchor tag where one can specify where the link specified must open.
- The possible target locations are
- _self: open the link within the same browser tab.
- _blank: open the link in a new tab of the same browser window.
- _parent: open link in the parent context/window.
- _top: open link in the top / highest parent window.
Appearance of anchor tag text :
To give some information about the link accessibility anchor tag changes its text color as and when required.
- If the link is not visited the text color would be blue.
- If the link is visited the text color would be purple.
- If the link is active the text color would be red.
IMPLEMENTATION
1.Open another HTML page that is within the project.
The file structure of the project is as shown below :
Let's consider the case where we need to navigate to the Contact Us page from the Home page.
Browser window :
To navigate to the Contact Us page on clicking on Contact we write :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<a href="./contactUs.html">Contact US</a>
</body>
</html>
On writing the above line of code the browser displays the text Contact us which will be underlined and blue in color to specify that it is a link. As we have specified the endpoint in the href attribute that is './contactUS.html' it redirects the user to Contact Us page.
Browser window after clicking on anchor tag:
2.Open a file.
The file structure is as shown below :
Browser Window :
To navigate to the sample.txt file by clicking on Open Text File we write :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<a href="./sample.txt">Open text File</a>
</body>
</html>
On writing the above line of code the browser displays the text Open text File which will be underlined and blue in color to specify that it is a link. As we have specified the endpoint in the href attribute that is './sample.txt' it redirects the user to the sample.txt file.
Browser window after clicking on anchor tag:
3.Email Link.
To open mail window directly we include the href text as "mailto:maidID".
Browser Window :
To navigate to the mail window by clicking on mail text we write :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<p>Contact us via <a href="mailto:mithun@ineuron.ai">mail</a></p>
</body>
</html>
On writing the above line of code the browser displays the text Contact us via mail where text mail will be underlined and blue in color to specify that it is a link. As we have specified the endpoint in the href attribute is to open a mail window with the specified mail to address it redirects the user to the default mail app.
Browser window after clicking on anchor tag:
4.Phone Link.
To open the phone window directly we include the href text as "tel:phone_number".
Browser Window :
To navigate to the mail window by clicking on mail text we write :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<p>Contact us via <a href="tel:9999999999">phone</a></p>
</body>
</html>
On writing the above line of code the browser displays the text Contact us via phone where the text phone will be underlined and blue in color to specify that it is a link. As we have specified the endpoint in the href attribute is to open a phone window with the specified mail to address it redirects the user to the default phone app.
Browser window after clicking on anchor tag:
5.Open External URL.
To open the phone window directly we include the href text as href="URL".
Browser Window :
To navigate to the mail window by clicking on mail text we write :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
</head>
<body>
<a href="https://ineuron.ai">Visit Us</a>
</body>
</html>
On writing the above line of code the browser displays the text Visit us where the text will be underlined and blue in color to specify that it is a link. As we have specified the endpoint in the href attribute is to open an external URL the user will be navigated to the external link specified.
Browser window after clicking on anchor tag:
