What are HTML hyperlinks?
HTML hyperlinks are used to move from one page to another HTML page.
Actually, the hyperlinks are used to move the visitors from the current location to the specified location.
The specified location could be an HTML page or could also be a file (image, audio, video, pdf, software, etc.).
How do the hyperlinks work?
- First, define a hyperlink with a destination path or location to an HTML element (a text, image, etc.).
- After that, whenever a visitor clicks on that element, the visitor will be redirected to the specified location.
How to add HTML hyperlinks?
The HTML anchor tag (
<a>) is used to add HTML hyperlinks.
We have already learned that you need to add hyperlinks to an HTML element. Therefore, put that element inside the anchor tag which you want to make a link.
In the following code you can see there is a text element – “Hello John, how are you?”, and I want to add link only to John, so I wrapped only the
<p>Hello <a>John</a>, how are you?</p>
But the job is not done yet!, we have to specify a location to the
<a> tag where a visitor will be redirected whenever the visitor clicks on the text John.
How to specify a location or URL to an anchor <a> tag?
So, I want that whenever a visitor clicks on the text John, the visitor will be redirected to
google.com. Therefore the code will be –
<p>Hello <a href="https://www.google.com">John</a>, how are you?</p>
Some different usage of the anchor tag
1. How to add link to an HTML Image element?
<a href="https://example.com"> <img src="mypic.png" alt="My Image"> </a>
2. Link to an email address
Syntax – mailto:[email protected]
<a href="mailto:[email protected]">Send email</a>
3. Link to a phone number
5. Open link in new tab
<a> tag has an attribute called
target="...", this attribute can take 4 types of values, and one of them is
_blank is used to open a link in new tab.
<a href="https://www.devbabu.com" target="_blank">DevBabu.Com</a>
6. Download a file on click on the link
<a> has an attribute called
download, this attribute turns a normal link into a downloadable link.
Whenever a visitor clicks on the link the link will start downloading.
<a href="./images/image.png" download>Download Image</a> <!-- image.png will start downloading when the link is clicked. -->
Note: The download attribute only works for same-origin URLs.
Download file with different name
If you want to download the file with a different name, pass the name as the value of the download attribute.
Result of the follwing code: When you click on the link
luck.png will start downloading.
<a href="./images/image.png" download="luck">Download Image</a> <!-- image.png => luck.png -->