Previous Next

HTML Text Links

HTML text links allow visitors to navigate between Web sites by clicking on words, phrases, and images.

These links are known as hyperlinks.


 

HTML Linking Documents

A link is specified using HTML tag <a> and tag is called anchor tag.

Link path is defined in href attribute.

Example

<a href="Document URL" ... attributes-list>Link Text</a>

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialsright.com" target="_self">Tutorials Right</a>
</body>
</html>

Result

Click following link

 

 

The target Attribute

The target attribute is used to specify the location where linked document is opened.

Following are possible options:

Option Description
_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

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="https://tutorialsright.com" target="_blank">Opens in New</a> |
<a href="https://tutorialsright.com" target="_self">Opens in Self</a> |
<a href="https://tutorialsright.com" target="_parent">Opens in Parent</a> |
<a href="https://tutorialsright.com" target="_top">Opens in Body</a>
</body>
</html>

Result

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body
 

 

HTML Base tag

<base> tag specify a default url and default target for all links in a web page.

It is not required to give a complete URL for every link.

Browser will concatenate given relative path to this base path and will make a complete URL.

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialsright.com/" target="_blank">
</head>
<body>
<p>Click following link</p>
<a href="/tutorials/html" target="_blank">HTML Tutorial</a>
</body>
</html>

Result

 

Click following link

HTML Tutorial
 

 

Linking to a Page Section

You can create a link to a particular section of a given webpage by using name attribute.

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach:

<a href="/tutorials/html/59/html-text-links#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.

Go to the Top

 

 

HTML Link Colors

Colors of active links and visited links can be set using link, alink and vlink attributes.

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialsright.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/tutorials/html" target="_blank" >HTML Tutorial</a>
</body>
</html>

Result

Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

Click following link

HTML Tutorial
 

 

HTML Download Links

You can create text link to make your PDF, or DOC or ZIP files downloadable.

In href specify complete URL of the downloadable file:

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="/pdf-sample.pdf">Download PDF File</a>
</body>
</html>

Result

Download PDF File

 
 


Previous Next