HTML Links
What are Hyperlinks?
Hyperlinks take us across the world wide web. They’re the clickable links that take you from one web page to another, to a different section of the same web page, or allow you to download a document (like a PDF). Hyperlinks are an integral part of the World Wide Web.
Creating Links in HTML
A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.
A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.
By default, links will appear as follow in most of the browsers:
- An unvisited link is underlined and blue.
- A visited link is underlined and purple.
- An active link is underlined and red.
HTML Link Syntax
Links are specified in HTML using the <a> tag. A link or hyperlink could be a word, group of words, or image.
Example:
<a href="url">Link text</a>
Anything between the opening <a> tag and the closing </a> tag becomes the part of the link that the user sees and clicks in a browser. Here are some examples of the links:
<a href="https://www.google.com/">Google Search</a>
Output:
Image Links
A hyperlink can be an image instead of text. This is simply done by surrounding an image tag <img> with the anchor tags <a> and </a> in the same way you would surround text.
- The
<img>tag adds an image to a web page. - The
<a>tag adds the link.
<a href="file_name.html">
<img src="javac.gif" alt="Image alt">
</a>
Output:
Absolute Links
An absolute link in a web page can lead to another web page in the same website or to one on another site entirely.
<a href="https://www.websitesiq.com">websitesIQ</a>
Output:
Setting the Targets for Links
The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(_) character:
_blank— Opens the linked document in a new window or tab._parent— Opens the linked document in the parent window._self— Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value._top— Opens the linked document in the full browser window.
Let's try out the following example to understand how the link's target basically work
<a href="about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>