HTML - <a> Tag

The HTML <a> tag or anchor tag defines a hyperlink. It is used to link one page to another.

The anchor tag(<a>) with its href attribute creates a hyperlink to web pages, where the href attribute indicates the link’s destination. After clicking on the link by default, it will appear as follows in all browsers.

If the href attribute is present in an anchor tag, pressing the Enter key while the focus on the <a> tag will activate it.

The anchor <a> tag includes the global attributes as follows −

  • download − It causes the browser to treat the linked URL as a download(it will work for the same URLS origin).
  • href − It points to the link destination.
  • rel − The relationship of the linked URL as space-separated link types.
  • target − Using this attribute, we can set where to display the linked URL.
  • type − Hints at the linked URL’s format with a media type.
  • name −It is required to define a possible target location in a page.
  • res − It is used to specified a reverse link.

Syntax

Following is the syntax for HTML <a> tag −

<a href="..."></a>

Example

In the following example, we are creating a hyperlink using the <a> tag with its href attribute, and the href = "" attribute does not contain any source for the link destination.

Since we didn't provide the link destination to the href attribute, nothing will happen if the user clicks on the link.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
</head>
<body>
   <!--create a anchor tag-->
   <a href="" name=‘nosource’>Hyperlink</a>
</body>
</html>

Example

The following is another example of an HTML anchor tag (<a>). Here, we are creating a hyperlink using the <a> tag with its href attribute, and we are giving the link destination to the href attribute as the landing page of Tutorialspoint website, which is: "https://www.tutorialspoint .com/ is. index.htm".

We are giving the target attribute value as target = ‘_blank’, when the user clicks on the link the link destination will be open in new window.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
</head>
<body>
   <!--create a anchor tag-->
   <a href=https://www.tutorialspoint.com/index.htm target="_blank" name=‘tutorialspoint’>TutorialsPoint</a>
</body>
</html>

Example

In this example, we are creating two HTML files named page1.html and page2.html. Then, we are creating hyperlinks in both HTML files using the <a> tag with its href attribute, where the page1.html <a> tag href attribute contains the link destination as page2.html file name and vice-versa.

If the user clicks on the HTML page1.html file anchor link, it will redirect to the HTML page2.html file and vice-versa.

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <style>
      body {
         background-color: aqua;
      }
   </style>
</head>
<body>
   <!--create a anchor tag-->
   <h1>Welcome to page1</h1>
   <a href="page2.html" name=‘page2’>Redirect to page2</a>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <style>
      body {
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create a anchor tag-->
   <h1>Welcome to page2</h1>
   <a href="page1.html">Redirect to page1</a>
</body>
</html>

Example

In this example, we are creating multiple hyperlinks using the anchor <a> tag. Then, we are giving different link destinations to the href attribute, and when users click on those links, it will redirect them to different web pages based on the link destination we have given to the href attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <style>
      a {
         width: 100px;
         padding: 10px;
         background-color: rgb(6, 86, 13);
         margin: 10px 10px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a anchor tag-->
   <a href=https://www.tutorialspoint.com/index.htm name=‘tutorialspoint’>TutorialsPoint</a>
   <a href=https://www.google.com/ name=‘google’>Google</a>
   <a href=https://www.amazon.com/ name=‘amazon’>Amazon</a>
   <a href=https://www.microsoft.com/en-in/ name=‘microsoft’>Microsoft</a>
</body>
</html>

On running the above code, the output window will pop up displaying the different hyperlinks on the webpage.

Example

Using the download attribute with the anchor <a> tag, we can download our local images from the browser just click on the links or particular images.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <style>
      a {
         width: 100px;
         padding: 10px;
         background-color: rgb(6, 86, 13);
         margin: 10px 10px;
         color: white;
      }
   </style>
</head>
<body>
   <!--create a anchor tag-->
   <a href="simply-easy-learning.png" name=‘image’ target="_blank" download>Download Image <img src="https://www.tutorialspoint.com/images/logo.png?v3" alt="" width="200" height="100">
   </a>
</body>
</html>

When we run the above code, it will generate an output consisting of the image along with a hyperlink displayed on the webpage.

html_tags_reference.htm
Advertisements