HTML Anchor tag
Anchor tag is used for creation of link to another page. If this link to the page of same website then it called Internal link, on the other hand if it point to the page from other domain/website is called external link. It is commonly used practice to link webpage to other documents. HTML anchor tag has some element specific attributes. Moreover we can also style anchor tag using inline style of predefined CSS class.
Anchor tag Attributes
Beside some common attributes such as id, class, style and title we will focus on specific attributes. That only used inside a tag. These attributes include.
- href
- target
Href attribute
This stands for hyper reference. Href value is written inside single or double quotes. This attribute hold the address of other webpage or resource. Address may be absolute or relative.
Relative Address
In relative address technique only resources name is specified. Server will automatically get and load the resource from current directory. This address is useful only for internal links.
Example
<a href="contacts.php"> Contacts </a>
Absolute Address
Absolute address contain the complete path of the target resource. This include domain name, folder as well as the file name with extension. Absolute path can be used for both internal and external links. For external links it is strongly recommended to use absolute path.
Example
<a href="https://www.instms.com/folder/contacts.php"> Contacts </a>
Email Anchor Tag
Anchor tag can also be used to open mailing application and automatically fill sender/receiver address in application. For this purpose we have to use prefix mailto: in value of href attribute.
Example
<a href="mailto:valiid_email_address">Email Us </a>
Telephone Anchor Tag
In smart phones anchor tag can behave surprisingly. It can open dial paid with already fill of the phone no, specified in href attribute. For this purpose we just have to use tel: prefix. Today approximately all web application are mobile first websites. Means these websites are responsive, so that tel anchor may very useful.
Example
<a href="tel:+123456789">+ 0000-00000000 </a>
Anchor Target Attribute
As the name of attribute is already much descriptive. Target attribute values are started with underscore character. Target attribute has some predefined values in HTML. We can use one of these as per requirement. The possible values of target attribute are.
- _blank
- _self
- _top
- _parent
_blank Attribute
Blank value is used to open the webpage or resource in new tab or window. This is preferable for external links and file resources.
Example
<a href="abc.php" target="_blank"> Blank Target Attribute </a>
_self Attribute
Self _target value open the specific resource in the same window or tab of the browser. It is recommend for internal links. We have to avoid use to this attribute value for external links.
Example
<a href="abc.php" target="_self"> Self Target Attribute </a>
_top Attribute
This value is much similar to _self, it also open the link resource on full window.
Example
<a href="abc.php" target="_top"> Top Target Attribute </a>
_parent Attribute
Parent attribute value is used to open hyper link value in parent frame, where this anchor tag used.
Example
<a href="abc.php" target="_parent"> Parent Target Attribute </a>
HTML Bookmarks
Anchor tag can also used to reference in the d same page using id. The reference to any element within same page. Browser will scroll to the target element when we click this anchor tag. This is most commonly used technique in blogs for quick navigation to blog posts or comments.
Example
<body>
<a href="#myDiv"> Go Down</a>
<div id="myDiv">
<h1> Some Test Heading</h1>
</div>
</body>
HTML Anchor Colors
In every web browser anchor tag is represented using three different colors. These colors represent different states of the link tag.
- Unvisited is of blue color
- Visited is of purple color
- Active anchor text is of purple color.
We can use custom colors for all these states of anchor tag to make webpage look more eye-catching.