Quick Reach
Links of HTML
HTML link, also called as Hyperlink, is the way to connect one web page to another or allow visitors navigate across the website. If you are new to HTML, you have seen links on almost all websites that you come across in the headers, the left menu or right menu or within the paragraphs.
The clicks that you use to open Contact us, about, product pages, service page, details, Add to basket or cart etc. and the source you came across to this page (most probably via google or some other search engine) is also by the link.
In this tutorial, you can see dozens of hyperlinks that are linked to other pages within the website.
You can give hypertext or anchor text to the links or also can use images as the links by using the <a> tag.
A few examples of hyperlinks of HTML with code are
Link with and without underline example with CSS
Link in hover state with CSS properties
A short video about links
The HTML <a> tag
The tag that is used in HTML to create the links in HTML is the <a> tag. Where <a> stands for Anchor. In this tutorial, we will explain how to create the links with <a> tag of HTML along with its mostly used attributes.
The basic syntax of the <a> tag is:
<a href=”some link”>Hypertext</a>
Where:
- <a>: opens the hyperlink tag
- href=””: is where the location of destination page is specified (href is explained below)
- Hypertext: The Hypertext or also called as the anchor text is the information/text visible to the visitor. For example “Click here” can be the hypertext or anchor text.
- </a>: Closing tag of the link
A running example with HTML code is:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”>Tutorials Collection</a>
</body>
</html>
|
By default, the color of the link is blue till it is in the normal state, i.e. until it is clicked. A clicked link default color is purple while the active link is red. You can change all these setting by using style or CSS which is explained below.
HTML href attribute
The href is an attribute of the <a> tag. This is the most important attribute of hyperlinks or <a> tag.
The href stands for Hypertext Reference. Where H is for Hypertext and Ref for Reference.
The href tells or specifies the location of the destination path or URL where your visitor will be taken to, as clicked on the given anchor text.
For example:
<a href=”https://www.tutorialscollection.com/”>Tutorials Collection</a>
Where href specifies the path or URL where the user will be taken as “Tutorials Collection” is clicked.
You can use complete URL or relative path in the href. See both examples below:
Specify full path in HTML <a> href
The example below specifies the full path in the link tag:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/”>HTML table</a>
</body>
</html>
|
Specify relative path in <a> href HTML
The example below sets relative path in the link tag:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/”>HTML table</a>
</body>
</html>
|
The anchor text
The anchor text is the text that is visible to the visitor of the web page. The anchor text should be descriptive so that a user easily understands the intention of the link given in anchor tag. The anchor text is given after the href attribute. See the example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/”>HTML table</a>
</body>
</html>
|
In the above example, the text HTML table is the anchor text which is readable to the user where a visitor can easily understand where the link will lead to.
HTML target attribute
The target is an attribute of the link, <a> tag. The <a>’s target attribute specifies where the link should open. For example, if you give a reference link in your web page to an external website then you may want a visitor to open the link in a new window or a new tab of the web browser. While your active page should remain open.
If the link goes to your own website then you may want to open the link in the same window. See examples below of opening links to the same and new tab or window.
A target _blank example
The target value set to “_blank” will open the link in the new window or tab of the web browser. See example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/” target=“_blank”>HTML table</a>
</body>
</html>
|
The target is specified after the HTML href attribute.
HTML target _self example
The _self is the default value of target attribute. If you do not specify the target attribute, the link in HTML will be opened in the same window, where it was clicked. See example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/” target=“_self”>HTML table</a>
</body>
</html>
|
How to create an image link
In the above examples, we used anchor text that is linked to other web pages or URLs. You can also use images rather anchor text in the HTML links. To use an image link, simply use the img tag in place of hypertext.
Example of HTML image link
The example below takes our site’s logo, which is a .png image and links it to another page by using HTML a tag with the img tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/” target=“_self”>
<img src=“TC_logo.png”>
</a>
</body>
</html>
|
As you can see, we used the <img> tag and specified image path rather using the hypertext. The HTML image code is
<a href=”https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/” target=”_self”>
<img src=”TC_logo.png”>
</a>
HTML mailto link
The HTML mailto is used if you need to link an email address to the hyperlink. You can specify an email address, subject etc. If a user has set up an email program, for example, outlook express. Clicking on the link will open outlook with the given email address and subject.
Example of using the mailto link
The example below shows how to link an email address by using mailto.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<title>link / hyperlink demo</title>
</head>
<body>
<a href=“mailto:toaddress@email.com” target=“_top”>
Email example</a>
</body>
</html>
|
You can also specify subject etc. To read more about mailto link go to this tutorial.
The button link
You can also make the button a link. By placing button code in place of the anchor text, the button can be used as a link.
Example of a button with <a> and href
Following is a demo of HTML button link. The example below uses a button inside the anchor tag with href:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<title>link demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”>
<button>Tutorials Collection</button>
</a>
</body>
</html>
|
links with CSS styling
You can use the power of CSS to make hyperlinks look appealing and stand out with beautiful text effects and controlled visited, active and hover states.
You can set the link color, font size, styles, background, border etc with CSS.
A complete chapter is dedicated to CSS links where you can see running examples of the links in the normal state, hover state, active and visited states.
Further Reading: Tables of HTML | The HTML tutorial
Leave A Comment?