Common Things you need to know about Anchor tag in HTML
What is a link in HTML?
HTML links are hyperlinks. You can click on those links and jump to another web page, website, or document attached to it. Links are not only text. You can also use buttons, images as links.
We use anchor tag <a></a> to create links in HTML. You can see how anchor tag works by reading this article.
<a href="URL of website"> text </a>What are the common attributes of the anchor tag?
Anchor tag required attributes to work properly. Some attributes are optional and some are mandatory. Let see what are those attributes.
href = “ ” Attribute
This is the required attribute for the anchor tag. Href is referred to as hyper reference. We write the URL we want to link inside “ ” in href.
Let get example,
<a href="https://twitter.com/?lang=en"> Twitter </a>This code segment links the home page of Twitter to word Twitter in the anchor tag. When you click on Twitter it redirects you to the home page of Twitter.
target=” ” Attribute
When you click on a link, the linked page appears in the current browser window. Using the target attribute we can define where we need to open the linked page. This is an optional attribute. These are the values the target attribute can get.
_self:- opens the document in the same window/tab
_blank:- opens the document in a new window or tab
_parent:- opens the document in the parent frame
_top:- opens the document in the full body of the window
Example :
<a href="https://twitter.com/?lang=en" target="_blank"> Twitter </a>title=” ” Attribute
This attribute explained further information about an element. The information is shown as a tooltip text when the mouse moves over the element. This is an optional attribute.
This is how we define the title attribute.
<a href="https://twitter.com/?lang=en" title="Go to the twitter home page"> Twitter </a>download=” ” Attribute
When we want to download an image or document we can use the download attribute inside the <a> tag. However, when we add the download attribute, the anchor tag will turn into a download link. This attribute works in HTML5.
when we use the download attribute without value the file will download its original name. In following example file will download under the name anchor.png
<a href="anchor.png" download> Download </a>If we use some value in the download attribute the downloaded file name will be that value. The following example file will download under the name logo.png
<a href="anchor.png" download="logo"> Download </a>Now I think you had a basic idea about attributes in the anchor tag.
I mentioned, in the beginning, using text is not the only way we can create links. Let’s see how can we create images as a link using the anchor tag.
Use an Image as a link
To use an image as a link we just need to put the image tag inside the anchor tag.
For example, when you click on the anchor.png image you redirect to the Twitter home page.
<a href="https://www.Twitter.com/"><img src="anchor.png" style="width:600px;height:400px;"></a>
Link to an email account using anchor tag
If you want the user to send an email to the given email address we can use mailto: inside href attribute. When the user clicks on the link, the user’s email account will be opened and the email address we provided will be set in the recipient’s address.
<a href="mailto:someone@example.com">Send email</a>This is an example code that included all points that I explained today. You can see how things work running this code in your code editor.
Now I think you get a clear idea about how to create a link using anchor tag in HTML. So it’s enough for today. I will explain more important things about HTML in my next blog post.
