A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate from page to page by clicking on words, phrases, and images.
In HTML you can create links using
<a> tag. This tag is called anchor tag.
Anything between the opening
<a> tag and the closing
</a> tag becomes part of the link and you can click that part to reach to the linked document.
<a href="https://parrot-tutorial.com/">Parrot Tutorial</a>
href attribute contains the web address you want to link.
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without https://www....):
<a href="/tags/a.html">The a tag</a>
To learn more about file paths, visit: HTML File Paths Chapter.
By default, links will appear as follows in most of the browsers:
You can change the default colors, by using CSS:
/* unvisited link */
/* visited link */
/* mouse over link */
/* selected link */
target attribute is used to specify the location where linked document should be opened.
target attribute can have 5 different values.
_blank- Opens the linked document in a new window or tab
_self- Opens the linked document in the same window or tab
_parent- Opens the linked document in the parent frame
_top- Opens the linked document in the full body of the window
targetframe- Opens the linked document in a named targetframe
<a href="https://www.wikipedia.org/" target="_self">Visit Wikipedia</a>
<a href="https://www.wikipedia.org/" target="_blank">Visit Wikipedia</a>
<a href="https://www.wikipedia.org/" target="_parent">Visit Wikipedia</a>
<a href="https://www.wikipedia.org/" target="_top">Visit Wikipedia</a>
_self is the default value for links, it means if you omit target attribute then your browser will treat it as
<a href="https://www.wikipedia.org/">Visit Wikipedia</a>
It's easy to use an image as hyperlink. We just need to use an image inside
<a> element at the place of text as shown below:
<a href="https://parrot-tutorial.com/CSS3/" target="_blank">
It's easy to specify an email address to send an email using hyperlink. We just need to use
mailto: along with
href attribute as shown below:
<a href="mailto:firstname.lastname@example.org">Send email to nowhere</a>
Note: If user do not have email client installed on their computer then it would not be possible to send email.
Do not use this because there are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.
download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.
<a href="parrot-icon.png" download="random.png">
The value of the attribute will be the name of the downloaded file.
If the value is omitted, the original filename is used.
<a href="parrot-icon.png" download>
Another attribute you may want to add to your links is
title. This is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:
<a href="/CSS3/" title="CSS Tutorial">CSS</a>
The information is most often shown as a tooltip text when the mouse moves over the element.
You can create a link to a particular section of a given webpage by using
id attribute. This is a two-step process.
First, create an element with the
<h1 id="bottom">Here i am!!!</h1>
Second step is to add a link to the element ("Go to Bottom"), from within the same page:
<!-- links to element on this page with id="bottom" -->
<a href="#bottom"> Go to Bottom </a>
This is useful useful if your webpage is very long.