What are HTML text links?
HTML text link tags (also known as hyperlink), allow users to link other web pages using images, words or phrases. When you hover a mouse arrow over these links, they take a shape of a hand. By default, the color of an unvisited link is blue, and of visited link is purple. The following syntax used to link a web page:
<a href = “URL”> Text </a> |
In above syntax, href refers to destination URL and ‘Text’ represent linking text.
-
HTML Text Link:
HTML anchor element <a> tag is used to link a web page with another web page. If you will insert any text between html tag <a>…</a> it will be shown as a hyperlink. Example of html text link is explained below:
<!DOCTYPE html> <html> <head> <title>HTML Text Link Example</title> </head> <body> <p> You can learn free html at </p> <a href=”http://freetutorialpoint.com”> our site. </a> </body> </html> |
The result will be displayed as:
You can learn free html at our site |
-
HTML Image Link:
A link for an image can be created by inserting html <img> tag inside html <a> tag. Let’s look at the following example to get a clear picture:
<!DOCTYPE html> <html> <head> <title> Adding link to an image</title> </head> <body> <p>Html Icon </p> <a href= “http://freetutorialpoint.com”> <img src=”http://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” /> </a> </body> </html> |
The result will be displayed as:
Html Icon ![]() |
You can learn more about html <img> tag here.
-
HTML Target Attribute:
A target attribute defines, where a web page will open. The options available are listed below:
HTML Tag | Description |
_blank | Opens a web page in new tab |
_self | Opens a web page in same window |
_parent | Opens a web page in parent frame |
_top | Opens a web page in full body of the window |
_framename | Opens a web page in named frame. |
Example of html target attribute:
Click any of the following links Opens in a new web page / Opens in same window / Opens in parent frame / Opens in the full body of window |
-
HTML Base Path Link:
Now, if you are required to link 2 or more different pages of your website on a single webpage then you don’t need to mention a complete URL every time, instead you can use html<base> tag. You just have insert the html base tag into the header section of a webpage and relative URL of other webpages into the body section. Let’s learn more with following example:
<!DOCTYPE html> <html> <head> <title>Base Path Example</title> <base href = “http://freetutorialpoint.com”/> </head> <body> <p>Click any of the following links</p> <a href=”/lesson-4-html-elements/” target=”_blank”>HTML lesson 4</a> <a href=”/lesson-5-html-formatting/” target=”_blank”>HTML lesson 5</a> </body> </html> |
The result will be displayed as:
Click any of the following links HTML lesson 4HTML lesson 5 |
-
Download Text Links:
If you are required to put a download text link for a file (word, pdf, zip etc), you can do so by inserting a downloadable URL between html <a> ..</a> tags. Example of download link is explained below:
<!DOCTYPE html> <html> <head> <title> Download Link Example</title> </head> <a href=”http://freetutorialpoint.com/wp-content/uploads/2016/11/PDF-2.pdf”>Download PDF File</a> </body> </html> |
The result will be displayed as:
|