Sponsored Ads
Html Links or Hyperlinks are part of every web page and they help us navigate from one page to another page or another part of the same web page and even another pages from another website just by clicking on the link.
Sponsored Ads
Html links can be created on words, phrases, images or any part of a web page. Html links can be easily identified by hovering over the link, the curser turns into a little hand. By clicking the link you are directly taken to the target page.
Linking Documents
Html links are specified using the <a> tag. <a> tag is known as anchor tag and anything in between the opening <a> tag and closing </a> tag becomes part of the link. Users can click on that part to reach the linked document. The target address is specified using the href attribute.
Here is a simple syntax of the <a> tag
<a href=”Target usl” …attribute list…>Link text</a>
Example
<p>Click following link</p>
<a href = "https://www.tutorialmanthra.com">Tutorials Point</a>
This will produce the following output and you can easily reach the home page of tutorial manthra website just by clicking the link.
Click following link
Tutorials PointThe target Attribute
We can use the target attribute specify where the linked document should open. The possible options are given below
- _blank : Opens the linked document in a new window or tab.
- _self : Opens the linked document in the same frame.
- _parent : Opens the linked document in the parent frame.
- _top : Opens the linked document in the full body of the window.
- targetframe : Opens the linked document in a named targetframe.
Example
<p>Click any of the following links</p>
<a href = "https://www.tutorialmanthra.com" target = "_blank">Opens in New</a> |
<a href = "https://www.tutorialmanthra.com" target = "_self">Opens in Self</a> |
<a href = "https://www.tutorialmanthra.com" target = "_parent">Opens in Parent</a> |
<a href = "https://www.tutorialmanthra.com" target = "_top">Opens in Body</a>
Output
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in BodyHTML Link Colors
By default Html links appear in different colours in different situations like
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the default colors of the links, like link, active link and visited link using link, alink and vlink attributes of <body> tag.
You can also change the default colors, by using CSS which you will learn later in the CSS tutorials. Now it is recommended to change link colour using CSS but for the time being just check how to change colour using html.
Sponsored Ads
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Check the colour of Link before and after clicking it.</p>
<a href = "./" target = "_blank" >HTML Tutorial</a>
</body>
Output
Check the colour of Link before and after clicking it.
HTML TutorialLink Titles
The title attribute is used to give extra information about an element. It is commonly shown as a tooltip text when the mouse is hovered over the element.
<a href="https://www.tutorialmanthra.com" title="Home page of Tutorial Manthra">Go to home Page</a>
Output
Go to home PageUse of Base Path
When you are linking pages of the same website you don’t need to give the complete URL. You can use <base> tag to provide the base path in the html head and then specify only the remaining part of the url in all other places. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
Example
<head>
<title>Base Path Example</title>
<base href = "https://www.tutorialmanthra.com/">
</head>
<body>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
Now the url will be converted to <a href = http://www. tutorialmanthra.com/html/index.html>
The above example may work without the base path also but there are situations where the relative link fails like when we use .htaccess to modify the links. In such places the base path solves the problem.
Linking to Sections of same Page
You can create a link to a particular section of the same page by using name attribute. This is a two-step process.
Note: The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute instead.
First create a link at the place where you want to reach using <a> tag and give a name to it.
<div>HTML destination part <a name = "top"></a></div>
Secondly crate a hyperlink at some other part of the page from where you want to reach the above place again with <a> tag providing url and name like below.
<a href = "/html/test_link.html#top">Go to Top</a>
Linking to Page Sections using ID
Now let us see how we can achieve the above result using id since the name is deprecated
The procedures are same. Only difference is instead of name you use the id.
<div id=”top”>HTML destination part></a></div>
<a href = "/html/test_link.html#top">Go to Top</a>
Sponsored Ads
Or you can simplify it since it is the same page
<a href = "#top">Go to Top</a>
Sponsored Ads