HTML a (anchor) Tag
HTML <a> tag is an anchor tag that is used to create a hyperlink. A hyperlink is used to interconnect the current web page with other web pages or any other web resource available on the Internet. It uses the href attribute to specify the URL of the web resources.
The web resource can be an HTML page, a file, an image, a video, etc present over the network.
By default, anchor tag appears as follows in the browsers:
-
If the link is unvisited, it is underlined and blue.
-
If the link is visited, it is underlined and purple.
-
If the link is active, it is underlined and red.
HTML <a> tag - Syntax and Usage
The <a> tag requires the start(opening) tag and end(closing) tag.
Also, this is an inline element. Following is the syntax for using the anchor tag in your HTML code:
<a href="SOME-URL">
<!-- Some content -->
</a>
Although the href attribute is not mandatory, but without it, the HTML anchor tag is meaningless, hence we have included it as part of the basic syntax.
HTML <a> Tag Basic Example:
Below we have a basic example showing how we use the HTML anchor tag, providing the href attribute and the target attribute.
HTML <a> Tag Attributes
HTML <a> tag supports both global attributes and event attributes and some of the common attributes are given below:
| Attributes |
Description |
target |
This attribute is used to specify where to display the linked URL - In a new browser tab, in a new browser window, etc. can be controlled using this attribute. |
href |
This attribute is used to specify the URL of the web resource/document where the user should be redirected when the hyperlink is clicked. |
rel |
This attribute is used to specify the relationship of the target document to the linking document. For example, we can specify author if the target document has details about author, or we can specify help if the target document is a webpage containing helpful information.
So we can use this to specify what the user should expect from the target document. This is used just to add more information to the hyperlink and has no effect on the hyperlink view on browser.
|
type |
This attribute is used to specify the media type of the linked URL. |
hreflang |
This is used to indicate the human language of the linked resource. |
id |
This attribute is used to create a fragment identifier in the document. |
1. HTML <a> Tag - href Attribute
The term href in href attribute stands for hypertext reference. The href attribute is used to set the URL of the target resource.
The HTML <a> element uses the href attribute to specify the target source or document that you want to open when the user clicks the hyperlink.
In the example covering the basic use of HTML <a> tag above, we have used the href attribute.
<p>Click on <a href="https://www.studytonight.com/"> this link </a> to go to the home page of Studytonight</p>
2. HTML <a> Tag - target Attribute
The <a> element uses the target attribute to specify a window where you want to open the HTML document when the hyperlink is clicked.
For instance, you can open a document in the same window or another window by using the target attribute.
There are five values of the target attribute which is given below in the table:
| Value |
Description |
_blank |
opens the linked document in a new unnamed browser tab. |
_self |
Opens the linked document in the current browser tab and (_self is the default value) |
_parent |
It opens the linked document in the parent window |
_top |
Opens the linked document in the topmost window |
framename |
It opens the linked document in the given frame name which means inside an iframe. |
Let's see a few usage examples for the <a> tag along with the target attribute.
3. HTML <a> Tag - id Attribute
This attribute is used by the <a> tag to create a fragment identifier in the document.
A fragment identifier specifies a particular location within a document like a heading or any particular section of the webpage. You can navigate to different locations within a webpage by using id attribute.
The id attribute takes a character string as a value and this value must be unique in the same document, however, it can be reused in different documents.
For example,
<h1 id="top">Page Title</h1> <!-- first define the location within the document -->
<!-- If you have this hyperlink at bottom of a webpage, when clicked it will take you to the h1 tag. -->
<a href="#top">Scroll to Top</a>
Note: The Hash (#) symbol indicates that the value is a fragment identifier. Hence it concludes that URL followed by #(hash symbol) along with the defined location(fragment identifier) is used to redirect to a particular named hyperlink within the same webpage or on a different webpage if the # symbol is added after the URL of another webpage, in which case we will be redirected to the new webpage and the browser will automatically scroll to the specified section of the webpage which matches the value of the fragment identifier.
Let's take a code example,
4. HTML <a> tag - hreflang Attribute
The hreflang attribute in HTML <a> tag is used to specify the language of the target HTML document on which user will be taken when the hyperlink is clicked.
<html>
<body>
<h1>The a hreflang attribute</h1>
<p><a hreflang="en" href="https://www.studytonight.com/">StudyTonight.com</a></p>
</body>
</html>
Default CSS Style for HTML <a> tag
Given below are the default CSS settings used by most of the browsers for the HTML <a> tag:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
Browser Support for HTML <a> tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 2+
-
Apple Safari 1+
-
Opera 4+
