Anchor Tag in HTML
Images and Links
In this lesson, we will learn how to create and use the anchor tag in HTML.
What is Anchor Tag in HTML
Anchor tags, also known as hyperlinks, are used to create clickable links between web pages. It is defined by the <a> tag, which is used to link a source page to a target page. The source page is the page where the hyperlink is placed, and the target page is the page that the hyperlink points to.
The href Attribute
The <a> element is used to create the hyperlink, and it requires a minimum of one attribute: the href attribute.
The href attribute is used to specify the URL of the target page. Here is an example of an anchor tag with an href attribute:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Anchor Tag Example</title>
</head>
<body>
<a href="https://www.google.com">Open Google</a>
</body>
</html>Output
In the above example, "http://www.google.com" is the URL of the target page, and Open Google is the text that will appear as a hyperlink on the source page. When you click on link Open Google it will open the website google.com.
The target Attribute
The target attribute is used to specify where the target page will open. By default, the target page will open in the same window or tab as the source page. However, the target attribute with a value _blank can be used to open the target page in a new window or tab. Here is an example of an anchor tag with a target attribute:
Example
<a href="https://www.google.com" target="_blank">Open Google</a>The title Attribute
The title attribute can be used to add a tooltip or additional information to the anchor tag, which will only appear when the user places the mouse cursor on the hyperlink text. Here is an example of an anchor tag with a title attribute:
Example
<a href="https://www.google.com" target="_blank" title="This link will open google.com on a new tab">Open Google</a>The download Attribute
The download attribute can be used to download the file specified in the href tag when the user clicks the hyperlink text. Chrome version 65+ and Firefox both browser allow the target file to be downloaded only when it belongs to the origin, which means the file is present on the same website on which the hyperlink is created.
Example
<a href="https://www.dremendo.com/images/logo.png" download="logo">Download Logo</a>
In the above example, we have also specified the file name in the download attribute. When a user clicks the link, the file will be downloaded with the specified name. The file name in the download attribute is optional.
Creating an Email Link
To create an email link, you can use the mailto: prefix in the href attribute. Here is an example of an anchor tag that will open the user's email client and set the email [email protected] to the recipient list:
Example
<a href="mailto:[email protected]">Send an Email</a>Creating a Telephone Link
To create a telephone link, you can use the tel: prefix in the href attribute. Here is an example of an anchor tag that will call the specified number:
Example
<a href="tel:123-456-7890">Call Us</a>Creating an Image Link
To create an image link, place an img tag between the opening and closing <a> tags. See the example given below.
Example
<a href="https://www.dremendo.com" target="_blank"><img src="https://www.dremendo.com/images/logo.png"></a>Creating a Link to a Specific Part of a Webpage
You can create a hyperlink that links to a specific part of a webpage by using an anchor tag with an id attribute. It is helpful when you have a long webpage and want your user to move to a specific part of your webpage without scrolling the page. Here is an example of an anchor tag that links to a specific section of a webpage:
Example
<a href="#information">Go to About HTML</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="information"></a>
<h2>About HTML</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>Creating a Link to a Downloadable File
You can create a hyperlink that links to a downloadable file by using the href attribute to specify the URL of the downloadable file. The downloadable file is a file that can not be opened in a browser. Here is an example of an anchor tag that links to a PDF file:
Example
<a href="example.pdf">Download PDF</a>
The id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <a> tag and use it to apply a specific style to that particular tag.
Example
<a href="https://www.google.com" id="web">Open Google</a>In the above example, we assign an id attribute to the a tag with a value web. In CSS and JavaScript, we can use the name web to access the specific a tag whose id value is set to the name web.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the anchor tags and use it to apply a specific style to all the anchor tags that belong to a particular class.
Example
<a href="https://www.google.com" class="info">Open Google</a>
<a href="https://www.facebook.com" class="info">Open Facebook</a>In the above example, both <a> tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both <a> tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style Attribute
The style attribute can be used to apply inline css styles to an anchor tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<a href="https://www.facebook.com" style="color: red">Open Facebook</a>Output
The style="color: red" will change the font color of the anchor tag to red.
