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.
Example:
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 John with <a> tag.
<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?
The anchor tag has an attribute called href, this attribute holds the location for the <a> tag. The location could be a relative path or could be an absolute path.
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
<a href="tel:+918456327514">+918456327514</a>4. Link to a JavaScript Code
When you click on the link, the javascript code will execute – alert('Hello World!');
<a href="javascript:alert('Hello World!');">Click Me</a>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. The _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
The <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 -->
