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.
<a href= “https://www.tutorialbrain.com/”>Link of tutorialbrain website</a>
HTML Links - Link Colors
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 –
- 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 –
- You can also give an external location of your image path like –
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.
Example of Email links
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:
|_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
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?
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?
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?
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.
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.
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.
“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.
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:-
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:-