What are HTML Links?
Links gives the connection between two web pages.
An HTML <a>(anchor) tag is used to set links. Inside the <a>..</a> tag, the href attribute is used which defines the hyperlink.
A hyperlink defines the destination of the link. When you click on this link, it will redirect to another web page.
In HTML, the hyperlink can be an external link, internal link, telephone link, link to emails, and images.
Syntax:
<a href= “https://www.tutorialbrain.com/”>Link of tutorialbrain website</a>
HTML Links - Link Colors
Example
a:link { color: blue; } a:visited { color: orange; } a:hover { color: tomato; } a:active { color: green; }
HTML Links - Image Link
Links are given to images using ‘href‘ and the source of the image must be given using ‘src‘ attribute.
For example –
- If the name of the image is ‘image1.jpg’ and it is located in the same folder where HTML file is located, then you must give the path of the file like –
<img src="image1.jpg">
- Similarly, if the file is present in a folder ‘img‘ which is 1 level above the location where HTML file is present, then your syntax will be like –
<img src="img/image1.jpg">
- You can also give an external location of your image path like –
<img src="https://image.ibb.co/jxrtqf/purpleflower.jpg">
Example
<a href="https://www.tutorialbrain.com/" target="_blank"> <img src="purpleflower.jpg"><br>Image</a>
HTML Links - Email Links
Email links are given to help users to solve or ask any doubts or to convey any messages to the website.
In HTML, the mailto attribute is used to give a direct link for email Id.
HTML Links - Link Targets
The target attribute specifies the destination to open the linked document.
The target attribute will open the links as shown below:
| Targets | Description |
|---|---|
| _blank | If we use blank attribute the given link will open in new tab. |
| _self | The given links under self-attribute will open in the same tab. Most of the time by default is given links are opened in the same tab or page. |
| _parent | Linked pages given under the parent attribute will open in parent frame. |
| _top | It adds the new page to the current window by closing all other frames. |
Example for Link Targets in HTML
<a href="https://TutorialBrain.com/" target="_blank">blank attribute</a><br>
<a href="https://www.facebook.com/TutorialBrain/" target="_self">self attribute</a><br>
<a href="https://twitter.com/tutorial_brain" target="_parent">parent attribute</a><br>
<a href="https://TutorialBrain.com/" target="_top">top attribute</a>
HTML Links to another web document in the same folder
Suppose, you have a file with the name link1.html which contains a link to another web page(link2.html) and both these links are present in the same folder.
Then, how do we refer the link link2.html from link1.html?
<a href="link2.html" target="_blank">Link to another file in the same folder(same level)</a>
HTML Links to sub folder
Suppose, you have a file with the name link11.html which contains a link to another web page(link22.html). Here link22.html is present inside a sub folder folder22.
Basically, the folder22 is at the same level as link11.html which means that the file link222.html is one level after link11.html.
So, how do we refer the link link22.html from link11.html?
<a href="folder22/link22.html" target="_blank"> Link to another file which is present in sub-folder </a>
HTML Links to a parent folder(Back folder)
Suppose, you have a file with the name link111.html which contains a link to another web page(link222.html). Here link222.html is present inside a parent folder folder222.
So, the folder22 is 1 level before as compared to link111.html.
So, how do we refer the link link222.html from link111.html?
<a href="../folder222/link222.html" target="_blank"> Link to another file which is present in parent folder </a>
So, 2 dots (..) is required to go 1 level backwards. Similarly to go 2 level backwards, you need –
../../
HTML Links- Download Files link
You can give Links to download the files like PDF, PPT, DOC, and ZIP files. You need to provide the link along with the location of the document with the document type.
Example
<!DOCTYPE html> <html> <body> <h4> Example for downloading File link</h4> <a href="document.txt" download>Download File</a> </body> </html>
Interview Questions & Answer
The HTML provides an anchor tag to create a hyperlink that links one page to another page. The default color of these links are:-
Active link – Underlined and red.
Unvisited link – Underlined and blue.
Visited link – Underlined and purple.
To create hyperlinks, or links that connect to another web page, use the href tag.
Syntax:
<a href="https://TutorialBrain.com/">Open the given link</a>
Normal links are links which are there on the page and have not been clicked yet.
Active links are those links, which have just been clicked at that instant.
The default color of an active and normal link is red.
An HTML (anchor) <a> tag is used to give links. And inside <a>..</a> tag href attribute is used, where href attribute defines the hyperlink..
If we use “_blank” attribute the given link will open in new tab.
Example,
<a href="https://TutorialBrain.com/" target="_blank">blank attribute</a>
“href” comes from “hyperlink reference”. It is an attribute of the <a> tag, and it identifies a place (called a hyperlink, or commonly a link) in a hypertext that links the user to another place. The link can be accessed by clicking or by hovering over it.
For example,
<a href="https://www.tutorialbrain.com/">Click here to visit Tutorialbrain</a>
It will create hyperlink that will send the user to the Tutorialbrain website.
To create a link to sections within the same page, create the link that allows you to jump to that section.
Syntax to do this:-
<a href="#section_ name"> Topic Name</a>
Here, the link will jump to the section on the page named “section_name”, but now we need to create the actual section named section_name for it to work.
Syntax to do this:-
<a name="section_name">Text</a>
Example,
<!DOCTYPE html> <html> <body> <p><b>Mahatma Gandhi</b><br> <a href="#Early life and background">Early life and background</a><br> <a href="#English barrister">English barrister</a><br> <p><a name="Early life and background"><b>Early life and background</b></a><br> Mohandas Karamchand Gandhi[17] was born on 2 October 1869[1] into a Gujarati Hindu Modh Baniya family[18] in Porbandar (also known as Sudamapuri), a coastal town on the Kathiawar Peninsula and then part of the small princely state of Porbandar in the Kathiawar Agency of the Indian Empire. His father, Karamchand Uttamchand Gandhi (1822–1885), served as the diwan (chief minister) of Porbandar state.[19] <p><a name="English barrister"><b>English barrister</b></a><br> Gandhi came from a poor family, and he had dropped out of the cheapest college he could afford.[48] Mavji Dave Joshiji, a Brahmin priest and family friend, advised Gandhi and his family that he should consider law studies in London.[49] In July 1888, his wife Kasturba gave birth to their first surviving son, Harilal.[50] His mother was not comfortable about Gandhi leaving his wife and family, and going so far from home. Gandhi's uncle Tulsidas also tried to dissuade his nephew. Gandhi wanted to go. </body> </html>