A hyperlink, often known as a link, is a connection made between two online resources. Users can navigate between pages on any server in the world with ease because to links.
Anchors are the two ends of a link. The destination anchor, which can be any web resource, such as an image, audio or video clip, PDF file, HTML page, or an element inside the document itself, is where the link points after starting at the source anchor.
In most browsers, links will show up as follows by default:
However, you can use CSS to replace this.. Learn more about styling links.
In HTML, links are defined with the <a> tag.
A word, phrase, or image can serve as a hyperlink.
What the user sees and clicks on in a browser is anything that is between the opening <a> tag and the closing </a> tag. Here are a few links as examples:
<a href="https://www.google.com/">Google Search</a>
<a href="https://www.codinghub360.com/">CodingHub360</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>The target of the link is specified via the href attribute. A relative or absolute URL may be its value.
A complete URL comprises all the elements of the URL format, including the protocol, host name, and document path. Examples of absolute URLs are https://www.google.com/ and https://www.example.com/form.php., and so forth. On the other hand, relative URLs, such as contact.html, images/smiley.png, and so on, are page-relative routes. The prefixes http:// or https:// are never included in a relative URL.
The browser is informed where to open the linked page using the target attribute. Each of the four defined targets has an underscore(_) character at the beginning of its name:
_blank — This opens a new tab or window with the referenced document._parent — Displays the referenced document in the window that is its parent._self — Opens the referenced document in the tab or window that is open with the original document. Since this is the default, there's no need to specifically set this value._top — Displays the referenced document in its entirety within the browser window.Try out the following example to understand how the link's target basically works:
<a href="/aboutus" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>Tip: You can use the target="_top" on the links to force the destination page to open in a full browser window if your web page is included within an iframe.
Additionally, bookmark anchors can be made to let visitors navigate to a particular area of a website. If your web page is lengthy, bookmarks might be incredibly useful.
There are two steps involved in making bookmarks: The id attribute must first be added to the element on which you wish to hop. Then, like in the example below, use the value of the id attribute, preceded by the hash sign (#), as the value of the href attribute of the <a> tag.
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>Tip: Even more, you may use the href attribute to navigate to a specific portion of another web page by providing the URL of that page and its anchor (that is, #elementId), as in <a href="mypage.html#topicA">Go to TopicA</a>.
The process of creating a file download link is identical to that of establishing text links. Simply provide the file you want to be downloadable by pointing the destination URL to it.
We've made download links for ZIP, PDF, and JPG files in the example below.
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>