Links are found on almost all web pages. By clicking them we can either move from one page to another or scroll to different sections on the same page. A link can be in the form of a text or image. By default hovering over the link shows a little hand. The HTML link is also called hyperlink. Links contains a “href” attribute which contains Http or https URL.
Table of contents
- The basic A tag
- HTML Link styling
- Href attribute
- Target attribute
- Title atribute
- Internal link with Anchors
- Mailto links, to send emails
- Links with images
- Base Href
- Conclusion
The basic “A” tag
<a> tag is defined as a hyperlink in HTML and is also known anchor tag. This is the simple tag which creates links in web pages. The “href” is the most important attribute of the <a> element which tells us about the destination of the link. The “target” attribute of <a> tag defines how to open the link (same page, a new page, or a new window), be default target tag opens the link in the same page.
Example:
<a href="https://www.instagram.com">Instagram</a>
Output:
HTML Link Styling
By default, a link in all browsers will appear like this:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
But you can change the color and style of the link by using CSS (Cascading Style Sheet). CSS is used for the styling purpose to make the appearance of the website more presentable. You can apply CSS to any element. You can style the links by using any CSS property such as color, background, font-size, font-style, display, etc depending upon what styles you want for it. Links can also be styled differently depending upon their state. There are four links state
- a:link – normal, unvisited link
- a:visited – links the user has already visited
- a:hover – when user mouse over the link
- a:active – the moment it is clicked or is in focus
Example
<style>
a {color:#fff; background-color:red;}
</style>
<a href="https://www.instagram.com/ ”>Instagram</a>Output
Instagram
You can also specify HTML font colors and background colors for links.
Href attribute
Href is the most important attribute of <a> tag. It helps us to determine the destination of the link or URL of the page the link goes to, in other words, it defines the link address. It is used with the <a> tag and without the “href” attribute <a> tag is no longer consider a hyperlink. The Href attribute not only gives us information about the link’s destination but it can also link to an element within an “id” on the same page. It can also link to the phone number, email addresses with specified subject and message.
Target Attribute
It is one of the attributes of the <a> tag which determines where the link should be opened. You can open the link on the same page or on the next page depending upon what type of target attribute you use.
These types are: _blank, _self, _parent, _top and framename.
Its syntax examples:
<a href="https://www.copahost.com" target=”
XXX
”>
- _blank opens the link in new tab
- _self opens the link in the same tab
- _parent opens the link in the parent frame
- _top opens the link in full body of the window
- framename opens the link in another frame inside the same HTML page.
Code example to open a link in a new tab:
<a href="https://www.instagram.com/” target=_blank>Instagram</a>
Code example to open a link in the same tab:
<a href="https://www.instagram.com/” target=_self>Instagram</a>
The link “Title” Attribute
The title attribute is part of the global attribute which means that it can be used on any HTML element. So it gives us extra information about the element when we move the mouse pointer over it. This information is a tooltip text. The title tag can be added to <a> tag by writing the following code
<a href="http://www.copahost.com" title="Any title of your choice">Link text</a>
When you move the mouse pointer over “Html tag” the tooltip text will appear as “Hypertext Markup Language”
Internal link with an anchor
Href attribute not only link to another website but can also link to a specific element within the page that has been assigned an id. Internal links will move the users from one section of the website to other sections without having to load the page every time and bring users to the exact location on a page. Any element can be assigned an id attribute and we can link with the <a> tag. You can use the ID as an anchor, as per this example:
<div id="item-1"></div>
And then we can create <a> tag to link to the above element by writing the following code
<a href="#item-1"></a>
You can check an example of the anchors, which are used in this article. With this link you can go to the top, and with this other link you will go to the page bottom.
Mailto: HTML links to send an email
“mailto” is a type of hyperlink in HTML use for sending email. mailto is a Uniform Resource Identifier (URI) for email addresses that produce hyperlinks on a website that allows the user to send email to a specific address without copying it and entering it manually. <a> tag is used as email tag by using it with mailto along with the href attribute
Example
<a href="mailto: abc@example.com">Send Email</a>
This will open your default email program (of mobile app) to send an email to the address abc@example.com
Note that this option to send email is simple and requires an email application to be installed in your PC or mobile phone. For more complete contact form examples, you can check this article about HTML forms.
Links with images
You can place links in images, also. For example, by clicking an image you can open the link. It can be achieved by using <img> tag. <img> tag is used for the image purpose when you want to insert certain image in the website.
In order to apply the image as a link we have to write <img> tag within the <a> tag and then choose a certain image which you want to choose as the link. For example, the following HTML link code will place an image with a link:
<a href=” https://www.instagram.com/” > <img scr=”instagram_logo.jpg”> </a>
You can further adjust and style your image by using the style attribute.
Base HREF explanation
You can use the base tag in HTML in the head section of an Html document. It simply specifies the relative path used within the website. All the links and images will go through this location automatically. For example, you can add a base tag as shown below:
<base href="https://www.website.com/folder" target="_blank">
And later in the body section we can simply call the image or file name and don’t have to worry about writing the complete path every time. For example:
<img src="instagram.jpg">
Now the image tag here will fetch the image from this location: https://www.website.com/folder/instagram.jpg
In another example, by using the base HREF option:
<a href="page.html">My page</a>
This link will open https://www.website.com/folder/page.html
Now, if you want to bypass the Base HREF directive and set a link to an exact page, you must use the full URL in the link. For example:
<a href="https://www.website.com/otherfolder/page.html">My page</a>
Conclusion
The <a> tags are the most essential element on the website. Without it, one cannot think of developing a website. Navigation can only be carried out using <a> link tag and there is no other alternative to it in HTML like we have for other Html elements.
