A link is specified using HTML tag <a>, this tag is called anchor tag and anything between the opening </a> tag becomes part of the link and a user can click that part to reach to the linked document.
Links allow users to move seamlessly from one page to another, on any server anywhere in the world. A link has two ends called anchors and a direction. The link starts at the source anchor and points to the destination anchor, which may be any web resource
HTML Link Syntax
- When you move the mouse over a link, the mouse arrow will turn into a little hand.
- A link does not have to be text. It can be an image or any other HTML element.
- A link or hyperlink could be a word, group of words, or image.
Syntax Linking Documents
<!DOCTYPE html>
<html>
<body>
<a href="url">Text for Hyperline goes here</a>
</body>
</html>
Why we use Hyper Link
HTML Links are very important, because of them we are able to travel from one page to another page, so let know the major reason why we use them.
- To connect one web page to another web page, In HTML <a> tag is used as HTML link or Hyperlink.
- To connect one section of page to another section.
- href is the name of attribute where we pass address of other page or address of other section in page.
Example
<!DOCTYPE html>
<html>
<head>
<titel>Hyperlink Example </title>
</head>
<body>
<a href="http://www.gdatamart.com">I'm gdatamart's home link, click me/a>
</body>
</html>
Explanation
In above example <a> tag is used as Hyperlink and <href> attribute is used to provide address of page where we want to visit, and text between <a> opening and </a> closing tag is called hyperlink text, this text not important it can be image or other HTML Element.
HTML Links - Create a Bookmark
- HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
- Bookmarks can be useful if your webpage is very long.
- To make a bookmark, you must first create the bookmark, and then add a link to it.
- When the link is clicked, the page will scroll to the location with the bookmark.
Example
<h3 id="CSS_Home">Chapter 1</h3>
Result
Then, add a link to the bookmark ("Jump to Chapter 1"), from within the same page
<h1 href="#CSS_Home">Jump to Chapter 1</h1>
<a> Tag href Attributes
This attribute is used to provide address, the address can be of a webpage of same website, webpage of other website or section of a webpage in same website, let’s see how it works.
Example
<a href="http://www.gdatamart.com/html/html_images.aspx">Click me to read next topic</a>
<a href="http://www.google.com">hi, click me I will take you on google </a>
Link a section of webpage
While working with HTML Links it’s become more important to know eject path, now if we want to visit one section of webpage to other section of webpage then it’s become more important to know address of that section where we want to visit. In webpage is we want to identify a element uniquely then the best way is to provide an id attribute to that element or section. So we will use id to link section of webpage.
We have passed a id as toph to the topmost heading of this webpage and we want to visit there by hyper link, so let’s see how we are connection with id in below example.
Example
<a href="#toph">I'm linking top heading, Click me to go there </a>
Advance in <a> Tag
Image as a HTML Link
Till now we have passed Text as <a> as content , now we will pass image as content of link tag. Let’s see how?
Example
<a href="http://www.gdatamart.com" target="_blank">
<img src="img/b1-led.png"/>
</a>
Output
Link Local Path
In href attribute, while working in local folder it is good practice to provide local path, for example – in below example the link associated with text and this current webpage are lies in same folder of project so we are passing local path as href value.
Example
<a href="html_quotations.aspx" target="_blank">Here url is local path </a>
HTML Target Attribute
This attribute is used to specify the location where linked document is opened.
| Tag |
Description |
| _blank |
It is used when we want to open link in new tab of browser window. |
| _self |
Open the link document in the same frame. If we are not target attribute then still this value is working by default. |
| _parent |
After clicking on link the link will be opened in parent window. |
| _top |
Open the link document in the full body of the window. |
| targetframe |
If we want to open link in a particular frame then we can pass frame name as attribute value, we will learn about frame latter in deep. |
Extra Knowledge
Just imagine a situation, due to some reason if we last this domain means gdatamart.com, if we have used every-where full path. Now if we want to move whole content of this website on other domain, in such condition we needs to change all paths which are connection pages, so it’s good practice to use local path as possible.
Keep in Mind: As a developer it’s a good practice to less use of target attribute, use only there where it is necessary.