❮ Previous Next ❯

HTML <a> tag

The <a> tag or anchor tag is an HTML tag which is used to link one page to another page either within the same website or to another website by using its attributes.

The hyperlink created by an anchor element can be applied to text, images, or any other HTML documents by nesting them between <a> and </a> tags.

The most commonly used attributes of the <a> tag are href, target, and download.

Type: Inline Element

Uses of <a> tag as Hyperlink in text

Text can be used as a link by using the href attribute with a target URL inside the <a> tag to navigate to another page.

Example

<a href="target_url"> HyperLink Text </a>

Output on the browser

HyperLink Text

By default, text links have the following features:

  1. An unvisited link is underlined and blue.
  2. A visited link is underlined and purple.
  3. An active link is underlined and red.

Uses of <a> tag as Hyperlink in Image

Images can also be used as links by placing the <img> tag inside the <a> tag with a target URL.

Example

<a href="target_url">
<img src="img_name">
</a>

Output on the browser

Demo output

By default, images with link have the following output:

  1. The images has a border of grey in some earlier browsers.
  2. The produced image has its original size - both in height & width.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<a> Yes Yes Yes Yes Yes

Important attributes of <a> tag

Attributes Value Notes
href Target URL It specifies the location of the URL that the link goes to.
hreflang Link Language It specifies the language of the linked document.
download Name of the media It allows the link documents to download when click.
target _blank
_parent
_self
_top		 It specifies where the linked document has to open.
title Link title It defines the title of a document, which can be appeared when hover over the link document.

Full code example of text as link

From the above study, you know that text can be used as HyperLink by using <a> tag with the attribute href.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
To learn HTML5, <a href="https://www.learncodinghub.com/"> Click Here </a>
</p>
</body>
</html>
Run The code »

Output on the browser

To learn HTML5, click here

Full code example of image as link

From the above study, you know that image can be used as HyperLink by using <a> tag with the attribute href.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://learncodinghub.com/">
<img src="bala.jpg">
</a>
<p>
When you click on the picture, the page will redirect you tolearncodinghub.com
</p>
</body>
</html>
Run The code »

Output on the browser

Demo output

When you click on the picture, the page will redirect you to learncodinghub.com

Full code example of button as link

From the above study, you know that image can be used as HyperLink by using <a> tag with the attribute href.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="alert('Hello World!)">
Click Me!
</button>
<p>
When you click on this button, the page will alert you by saying Hello World!.
</p>
</body>
</html>
Run The code »

Output on the browser

When you click on this button, the page will alert you by saying Hello World!.

More reference

<a> tag is one of the most common tag of HTML. You have to use this tag oftenly, and don't forget to add </a>(end tag) if you use <a> (start tag) once. A linked document either may texts or images or button, is normally displayed in the current browser window or tab, unless you specify another target .

❮ Previous Next ❯