HTML Links and Anchor tag <a>
is used in HTML to add hyperlinks in the web page which is used to jump to another page, an email address or any other URL.
The href attribute of the anchor tag defines the hyperlink’s destination.
For Example :
<h6>Hyperlink</h6>
<a href="https://technobrainz.in/">Visit TechnoBrainz.com!</a>
Output :
Hyperlink
In HTML, by default the HTML link is open in the same tab. However you can change it using the target attribute.
target attribute of the anchor tag can attain four values :
- _self – It is the default value of target. Opens the URL in the same tab in which it was clicked.
- _blank – It opens the URL in the new tab.
- _parent – It opens the URL in the parent frame.
- _top – It opens the URL in the full body of the tab in which it was clicked.
For Example :
<h6>Hyperlink</h6>
<a href="https://technobrainz.in/" target="_blank">Visit TechnoBrainz.com!</a>
Output :
Hyperlink
Absolute Links and Relative Links :
- Absolute URL refers to the full web address in the href attribute
- Relative URL refers to a link to a page within a same website. It does not have “https://www” part.
Button as a Link :
For Example :
<h6>Button as a Link</h6>
<p>Click the button to visit Techno Brainz</p>
<button onclick="document.location='https://technobrainz.in/'">Techno Brainz</button>
Output :
Button as a Link
Click the button to visit Techno Brainz
Email Address as a Link :
- mailto: is used inside the href attribute to create a link that opens the given email address to send a new email.
For Example :
<h1>Email as a Link</h1>
<p><a href="mailto:abc@gmail.com">Send email</a></p>
Output :
Email as a Link
Image as a Link :
Use <img>
tag inside the <a>
tag to use an image as a link.
For Example :
<h6>Image as a Link</h6>
<a href="https://technobrainz.in/"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
<p>Thanks</p?
Output :
Image as a Link
Note :-
Watch HTML Links and Anchor Tag video on YouTube – Click here
HTML Lists – click here
HTML Text Formatting Tags :– click here