In This Tutorial
HTML Hyperlink
Hyperlink is the way to connect one web page to other or allow visitors navigate across the website. If you are new to HTML, you have seen hyperlinks in almost all websites that you come across in headers, left menu and right menu or within paragraphs. The clicks that you use to open Contact us, about, product pages, service page, details, Add to basket or cart and the source you came across to this page (most probably via google or other search) is also by HTML link.
Within this tutorial you can see dozens of hyperlinks that are linked to other pages (tutorials and chapters) within the website.
You can give hypertext or anchor text to links or also can use images to links by using <a> tag. For example lining logo to home page.
A few examples of hyperlinks of HTML with code are:
A HTML link with target as _blank
Link with and without underline example with CSS
HTML Link in hover state with CSS properties
HTML <a>
The tag that is used in HTML to create links is HTML <a> tag. Where <a> stands for Anchor. In this tutorial we will explain how to create html links (hyperlinks) with HTML <a>.
The basic syntax to create an HTML hyperlink is:
<a href=”some link”>Hypertext</a>
Where:
<a : opens the hyperlink tag
href=”” : is where the location of destination page is (href explained below)
Hypertext: Hypertext or also called as anchor text is the information/text visible to visitor. For example “Click here” is the hypertext or anchor text.
</a> Closing tag of HTML 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>HTML link / hyperlink demo</title>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”>Tutorials Collection</a>
</body>
</html>
|
By default a link created is of blue color till it is in normal state, i.e. till it is not clicked. A clicked link default color is purple while active link is red. You can change all these setting by using style or CSS which is explained below.
HTML hypertext
The hypertext is the text that is visible to visitor of the web page. The hypertext should be descriptive so that a user easily understands the intention of link given in html anchor tag. The hypertext is given after href attribute. See examples below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<title>HTML 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 above example the text HTML table is hypertext which is readable to user where visitor can easily understand where hyperlink will lead to. If we simply used “click here” or “visit” then it might not easily understandable.
Also see HTML Table | HTML tutorial
Leave A Comment?