Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are hyperlinks in HTML?
Overview
In simple definition hyperlinks are the link which helps the client to get redirected to that information that a user wants. Hyperlinks can redirect the user to the other pages or on the same page to the specific content. In the HTML an anchor tag element provides a developer to create hyperlinks to the web page. This anchor tag is an opening and closing tag, which require both the opening and closing tags.
Syntax
The syntax to create a Hyperlink in the HTML is shown below. Where it also contains an attribute “href” in which it contains the link of the page or the address of the location where the client will be redirected.
<a href="#"> Hyperlink </a>
Algorithm 1
<a> tutorialspoint </a>
Now add a href attribute to the anchor tag element with an address to it.
<a href="https://tutorialspoint.com/"> tutorialspoint </a>
Now the hyperlink is ready
Click the hyperlink and you will be redirected to the page.
Example 1
In this example we will learn to create a hyperlink which will redirect a user to another web page.
<html> <head> <title> Redirect to another page </title> </head> <body> Hyperlink: <a href="https://tutorialspoint.com/"> tutorialspoint </a> </body> </html>
Algorithm 2
Create a HTML file with the HTML boilerplate to it
Now create an unordered list with few list tags.
<nav> <li>About</li> <li>Articles</li> <li>Contact</li> </nav>
Now cover the list tag within an anchor element with a href attribute, with a value of “id” name starting with #.
<nav> <a href="#about"> <li>About</li> </a> <a href="#articles"> <li>Articles</li> </a> <a href="#contact"> <li>Contact</li> </a> </nav>
Now create three div tags with the same id name which are assigned in the anchor tag “href” attribute.
<div id="about" style="background-color: aquamarine;"> <p> About section </p> </div> <div id="articles" style="background-color: rgb(155, 241, 17);"> <p> Articles section </p> </div> <div id="contact" style="background-color: beige;"> <p> Contact section </p> </div>
Now style the page if you want to distinguish between the sections.
The hyperlinks for the same page are ready.
Example 2
In this example we will create a web page which contains some sections such as about, articles and contact. We will also create a navigation bar which contains the hyperlinks to redirect to that section. So when a user clicks on the particular links, the user will redirect to that section of that page. For example when a user clicks on the “articles” link then a user will redirect to the articles section of the web page.
<html>
<head>
<title> Redirect to the content </title>
<style>
* {
margin: 0;
}
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: fixed;
background-color: white;
width: 100%;
padding: 1rem;
}
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<nav>
<a href="#about">
<li>About</li>
</a>
<a href="#articles">
<li>Articles</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</nav>
<div id="about" style="background-color: aquamarine;">
<p> About section </p>
</div>
<div id="articles" style="background-color: rgb(155, 241, 17);">
<p> Articles section </p>
</div>
<div id="contact" style="background-color: beige;">
<p> Contact section </p>
</div>
</body>
</html>
CONCLUSION
As we have seen in the above examples, that “href” is an attribute which plays an important role in building the hyperlinks. So we can say that the “href” attribute is the backbone of the hyperlinks. Majority of time it’s used in the navigation bar section with the navigation bar items. In the simple HTML we use the anchor tag (<a>) to create hyperlinks, but in ReactJs we use the <Link> tag to route among the pages.
131 Views
To Continue Learning Please Login