Summary -
In this topic, we described about the <a> tag along with detailed example.
HTML links are defined by using <a> tag. The <a> tag adds the 'a' element to a web page. <a> tag called as Anchor. The 'a' element creates a hypertext anchor (hyperlink) from one page to another.
To use the <a> tag, place the text in between the opening and closing <a></a> tags. Attributes used to specify more information along with <a> tag. The link destination should specify in href of <a> tag. URL needs to provide when by using the href attribute.
If attribute not included, the <a> element will be simply place holder. An anchor does not need to be defined with a tag. Applying the id attribute to any tag will achieve anchor.
By default, links will appear as below without override -
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Syntax -
<a href=" ">.. text/image here.. </a>
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| charset | Specifies the character set of a linked document<font color="red">Not supported in HTML5</font> | Char_encoding |
| coords | Specifies the coordinates of a link<font color="red">Not supported in HTML5</font> | Coordinates |
| download | Specifies the target should be downloaded instead of navigated to.<font color="green">HTML5 attribute</font> | None. |
| href | Specifies the target destination of a link. | URL. |
| hreflang | Specifies the language of the target link. This attribute can be used if href is used.<font color="green">HTML5 attribute</font> | Language code |
| Media | Specifies media/device the linked document is optimized.<font color="green">HTML5 attribute</font> | media_query |
| Name | Specifies the name of the anchor.<font color="red">Not supported in HTML5</font> | name |
| rel | Specifies the relationship between the link’s page and the link’s target destination. |
alternate: Indicates an alternative version of the current web page.
author: Indicates author of the page / article. bookmark: link to the current section of the page. help: Indicates the Help specific to the context. license: Indicates copyright license for the current document. next: Indicates the linked next page in the sequence. nofollow: Indicates the linked resource is not certified by the current document’s author. noreferrer: Indicates the browser not to send an HTTP referrer header. prefetch: Indicates the linked resource should be cached. prev: Indicates the linked previous page in the sequence. search: Indicates the search facility used to search the current, and related, documents. tag: A tagging term that applies to the link. |
| Shape | Specifies the shape of the link<font color="red">Not supported in HTML5</font> | default
rect circle poly |
| target | Specifies in which the target destination should open. |
_self: Opens link in current window / tab.
_blank: Opens link in a new window / tab. |
| type | Specifies type of the linked resource. | Text. |
A linked page is normally displayed in the current browser window, unless you specify another target.
Example -
<!DOCTYPE html>
<html>
<head>
<title>HTML link tag example</title>
</head>
<body>
<a href="https://www.tutorialscampus.com">Home Page</a>
</body>
</html>