What is HTML Hyperlink?
Mayank Sharma
- 3 Min To Read
- February 4, 2022
In this article, we are going to learn about Hyperlinks in HTML.
Table of Contents- Hyperlink
- Relative and Absolute Paths
- Linking to parts of the same page
- Attributes of Hyperlink element
Hyperlink - provides the ability to link from one web page or resource to another.
Made using the anchor element - <a>
It is an inline-level element.
href attribute – its value is a path that identifies the destination of the hyperlink
<a href="https://cheers2freedom.com">HTML Course</a>
As already mentioned, Anchor element, <a>, is an inline element. Inline-level elements may not wrap block-level elements.
However, in HTML5, anchor elements specifically have permission to wrap either block-, inline-, or any other level elements. So entire blocks of content/image on a page can become links.
An example of Anchor element wrapping block-level elements (headings):
<a href="https://cheers2freedom.com/post/how-to-make-html-hyperlink/">
<h2>HTML Course</h2>
<h3>Lesson 10: Hyperlinks</h3>
</a>
An example of Anchor element wrapping image element:
<a href="https://cheers2freedom.com/post/how-to-make-html-hyperlink/">
<img src="image/htmlhyperlink.jpg">
</a>
See it in action
Relative and Absolute Paths
Linking to pages/posts on other websites requires an absolute path - href attribute value must include the full domain.
E.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">More on links</a>
Links pointing to other pages of the same website can have a relative path - href attribute value needs to include only the filename of the page being linked to. No need to include the domain (.com, .org, .edu, etc.)
E.g. <a href="course-details.html">HTML Course</a>
If the page being linked to reside within a different directory/folder, the href attribute value needs to reflect this as well.
E.g. <a href="pages/course-details.html">HTML Course</a>
Linking to parts of the same page
E.g. Back to top links, Sub-heading links
First set an id attribute on the element you wish to link to.
<h2 id="first-subheading">My sub-heading number 1</h2>
Then use the value of that id attribute within an anchor element’s href attribute.
<a href="#first-subheading">Go to first subheading</a>
To create a link that leads to nowhere (kind of a placeholder link):
<a href="#">Remain on the same page</a>
Attributes of Hyperlink element
Target Attribute
We can determine where a link opens when clicked:
Default behaviour - links open in the same window/tab
To open a link in a new window - use the target attribute with a value of _blank
E.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types" target="_blank">More on links</a>
_self is the default value of target attribute.
Relationship Attribute
rel attribute - identifies the relationship between the current document and the document being referenced.
Various values of rel attribute:
- copyright - When linking to a copyright statement.
<a href="legal.html" rel="copyright">Terms of Use</a>
- nofollow - When you do not want the spiders of search engines to provide any additional weight or ranking to the destination of that hyperlink.
<a href="https://www.w3schools.com/html/html_links.asp" rel="nofollow">More about links…</a>
Title Attribute
title attribute - specifies extra information about an element. (tooltip text)
<a href="https://www.cheers2freedom.com/html/" title="HTML Course">Visit our HTML Tutorial</a>