HTML - Text Links

Previous
Quiz
Next

HTML Links

HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked.

HTML Hyperlinks

A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create hyperlinks using text or images available on a webpage. A hyperlink is created using the HTML Anchor Tag (</a>).

The Anchor (<a>) Tag

An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages. Anything which is written between the opening <a> and the closing </a> tags become clickable and when someone clicks on it, the linked page will be opened.

Syntax

Here is the syntax to create a hyperlinks in HTML:

<a href="URL" target="_target_type">Link Text</a>

Read more about creating URLs, we recommend to read this chapter: Understanding URL

Creating Hyperlinks (Linking Webpages/Documents)

You can link other webpages or documents by creating the hyperlinking to specific words, images, or any HTML element.

As discussed above, you can create hyperlinks by using the HTML <a> tag with the href attribute. The href attribute specifies the page/document to be linked.

Syntax

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

Example

In this example, we are creating a simple HTML document that demonstrates how to use a hyperlink:

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

On executing the above example, a link will be displayed. You can click on the link generated to reach to the home page of Tutorials Point.

The "target" Attribute

The target attribute specifies the location where linked document is opened. Following are the possible values of target attribute:

S.No. Option & Description
1

_blank

Opens the linked document in a new window or tab.
2

_self

Opens the linked document in the same frame.
3

_parent

Opens the linked document in the parent frame.
4

_top

Opens the linked document in the full body of the window.
5

targetframe

Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target attribute.

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

This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.

Use of Base Path in Hyperlinks

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

Example

Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link:

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

This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.

Linking to a Page Section

Linking to a section on the same page allows users to navigate directly to that section. You can create a link in the same to a specific section by using the href attribute with a #id value, where the #id targets an element on the page with a corresponding id attribute.

Example

In the below code, we demonstrate the usage of the href attribute to navigate to a different section within the same page. We provide #idofsection inside the href to navigate sections of our need:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
   <h2>Ed-Tech</h2>
   <div> 
      <p>
         Tutorialspoint: Simply Easy Learning
      </p>
      <a href="#about">Know More</a>
   </div>
   <h2 id="about">Section 2</h2>
   <div> 
   <p>
      Tutorials Point is an online learning platform
      providing free tutorials, paid premium courses,
      and eBooks. Learn the latest technologies and 
      programming languages SQL, MySQL, Python, C, 
      C++, Java, Python, PHP, Machine Learning, data
      science, AI, Prompt Engineering and more.
   </p>
   </div>
</body>

</html>

Styling Hyperlinks (Setting Link Color)

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.

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

This will produce the following 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.

Downloadable Links

HTML allows you to create downloadable links where you can create links to make your PDF, DOC, or ZIP files downloadable. To create any link downloadable, you can use the download attribute with the <a> tag and specify the downloadable file path in the href attribute.

Example

The following example demonstrates creating a downloadable link in HTML:

<!DOCTYPE html>
<html>
<head>
   <title>Downloadable Link Example</title>
</head>
<body>
   <a href="/https/www.tutorialspoint.com/html/src/sample.txt" download>Download File</a>
</body>
</html>

Custom File Name

You can also specify the filename for the downloaded file. To give a custom filename the file, you need to provide it to the download attribute.

Here is an example:

<a href="/https/www.tutorialspoint.com/html/src/sample.txt" download="custom-report.txt">Download File</a>

File Download Dialog Box

You can also allow HTML to open a file download dialog box before starting the download so that the user can select the location to download the file. You can do it by using an HTTP header in your HTTP response.

For example, if you want to make a filename file downloadable from a given link, then its syntax will be as follows.

Syntax

#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note: For more detail on PERL CGI programs, go through tutorial PERL and CGI.

Print Page
Previous
Next
Advertisements