Table of Contents
anchor tag html | How to use Anchor tag
Today we’ll be taking a look at anchor tag which is one of the most used tags in web development.
It is crucial to understand anchor tag completely before getting into actual coding part. The Anchor tag <a> along with it’s ‘href‘ i.e. “Hyper REFerence” attribute is used to link webpages , locations , emails, etc.
Given below is an example of anchor tag :
While using anchor tag attributes play an important role, let us take a closer look at the attributes which are used in anchor tags.
Attributes used in Anchor Tag
1.a Href Attributes used in Anchor Tag
Href attribute is like default attribute to redirect to another webpage when the word between the anchor tag is clicked.
Href attribute can be used to
- point at different sections on the same webpage.
- link different webpages.
- create a call link with “tel”
- create a mail link with “mailto”
2.Download Attributes used in Anchor Tag
3.Hreflang Attributes used in Anchor Tag
Hreflang attribute is used to specify the language of the linked page in the href attribute.
Syntax:
<a href=”URL” hreflang=”lang_code”></a>
NOTE: The language code is a two-letter code used to identify the languages.
The Hreflang can only be used when the Href attribute is defined.
3.Target Attributes used in Anchor Tag
The Target attribute specifies how to open the linked webpage.
Syntax:
<a href=”URL” target=”_blank”></a>
By default, the value of the target attribute is set to “_self”.
Following are the values used in target attribute and what are they used for:
- _self – opens the webpage in the same tab.
- _blank – opens the webpage on a new tab.
- _parent – opens the web page in the parent frame.
E.g:
4.Rel Attributes used in Anchor Tag
Relation attribute specifies the relation between the linked webpage and current webpage.
Syntax:
<a href=”URL” rel=”value”></a>
The value which are accepted in the rel attribute.
- nofollow
- alternate
- author
- bookmark
- noopener
- noreferrer
- license
- search
- external
- next
- prev
- help
- tag
You can visit our other useful blog for collecting fronted development knowledge.thank you for visit our website ☺!
Written by: @OmBandiwan