HTML <a> tag

What is <a> tag?

The <a> tag or anchor tag is an HTML tag which is used to link one page to another page either to same website or another by using its attributes. The HyperLink created by an anchor element can be applied to the text, image or any other HTML Documents by nesting between <a> and </a> tags. Most attributes used by <a> tag are href, target and download.
Type: Inline Element

Uses of <a> tag as HyperLink in text

Text(s) can be used as a link by using href attribute with the target url to the <a> tag to jump into another page.

Example

<a href="target_url"> This is Text with hyperLink </a>

Output

By Default Texts with link have the following features.

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

Study more about HTML Link, click here.

Uses of <a> tag as HyperLink in image

Images(s) can be used as a link by using href attribute with the target url to the <a> tag to jump into another page.

Example

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

Output

html-learning

By Default Image with link have the following features.

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

Study more about HTML Link, click here.

Supported Browsers.

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<a> Yes Yes Yes Yes Yes

Some Important Attributes of <a> tag

Attribute 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 Examples 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".

Full-Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
To Learn HTML 5, <a href= "http://www.myhtml5tutorials.com/"> Click Here </a>
</body>
</html>

Output

To Learn HTML 5, Click Here

Full Code Examples 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.

Full-Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href= "http://www.myhtml5tutorials.com/">
<img src= "bala.jpg" alt="Bala">
</a>
<p>
When You click on the picture the page will redirect you on myhtml5tutorials.com
</p>
</body>
</html>

Output

HTML tutorial
When You click on the picture the page will redirect you on myhtml5tutorials.com

Full Code Examples of button as link

You know that button can be act as a HyperLink by using <button> tag with the attribute "onclick".

Full-Code 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>

Output


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 so frequently. So, you don't have to forget adding of an </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.
Also know that button can be used as a link. See the following example:
<button onclick= "window.location.href= 'URL'"> Linked texts </button>