A hyperlink, commonly referred to as a link, is a reference in a hypertext document that points to another document or resource. When a user clicks on a hyperlink, the web browser navigates to the linked resource. Hyperlinks are a fundamental element of the World Wide Web, enabling users to easily navigate between web pages and other resources.
Hyperlinks are created using the <a>
(anchor) tag in HTML. The href
attribute of the <a>
tag specifies the URL of the destination resource. Links can point to various types of resources, including web pages, images, files, and other types of documents. Hyperlinks can also be used for navigation within the same document.
Example of a Hyperlink:
<a href="https://www.example.com">Visit Example.com</a>
In this example, clicking on the text “Visit Example.com” will navigate the user to the URL “https://www.example.com”.
Attributes of the <a>
Tag:
href
: Specifies the URL of the linked resource.target
: Specifies where to open the linked document. Common values include_self
(default, open in the same tab/window) and_blank
(open in a new tab/window).title
: Provides additional information about the link, often displayed as a tooltip when hovering over the link.rel
: Specifies the relationship between the current document and the linked document. Common values includenofollow
(instructs search engines not to follow the link) andnoopener
(improves security when opening links in a new tab).
Examples:
-
Basic Hyperlink:
<a href="https://www.example.com">Visit Example.com</a>
This creates a clickable link that navigates to “https://www.example.com”.
-
Hyperlink with
target
Attribute:<a href="https://www.example.com" target="_blank">Open Example.com in a New Tab</a>
This link opens the destination URL in a new browser tab.
-
Hyperlink with
title
Attribute:<a href="https://www.example.com" title="Example Website">Visit Example.com</a>
This link includes a tooltip that displays “Example Website” when hovered over.
-
Internal Link (within the same page):
<a href="#section1">Go to Section 1</a> <h2 id="section1">Section 1</h2> <p>This is Section 1 of the document.</p>
This creates a link that navigates to a different section within the same page, identified by the
id
attribute.