main_leaderboard, all: [728,90][970,90][320,50][468,60]


HTML <a> Tag

The purpose of this post is to explore Tag A so that it may be of assistance to you.

Build a hyper-link for mrexamples.com:


<!DOCTYPE html> <html> <body> <a href="https://mrexamples.com">Visit mrexamples.com!</a> </body> </html>

Here is an example of the anchor <a> tag with contact info:


<!DOCTYPE html> <html> <body> <p>You can contact us at:</p> <ul> <li><a href="https://mrexamples.com">Website</a></li> <li><a href="mailto:[email protected]">Email</a></li> <li><a href="tel:+1724378923">Phone</a></li> </ul> </body> </html>

Example Explanation

The above provided code is an HTML document that creates a contact page with three ways to contact the website owner. Here are the main points:

  • The first line declares the HTML version used, which is HTML5.
  • The <html> tag starts the HTML document and contains all the content of the web page.
  • The <body> tag begins the body section of the document, which holds the main content of the web page.
  • The <p> tag creates a paragraph that contains the text “You can contact us at:”.
  • The <ul> tag starts an unordered list to show three ways to contact the website owner.
  • The first <li> tag contains a hyperlink to the website of the owner. The <a> tag with the attribute “href” sets the website’s URL, and the hyperlink text says “Website”.
  • The second <li> tag has a hyperlink to the email of the owner. The <a> tag with the attribute “href” sets the email address of the owner, and the hyperlink text says “Email”.
  • The third <li> tag has a hyperlink to the phone number of the owner. The <a> tag with the attribute “href” sets the phone number of the owner, and the hyperlink text says “Phone”.
  • The </ul> tag marks the end of the unordered list.
  • The </body> tag marks the end of the body section of the document.
    The </html> tag marks the end of the HTML document.

Uses and Definitions

A <a> tag is used to define a hyperlink, which is used to link from one page to another site via the web.

Among the most significant attributes of the <a> element is the href attribute, which shows the source of the link.

Browsers, by default, display links in the following format:

  • Underlined and blue links have not been visited.
  • Links that have been visited are underlined and purple.
  • Active links are underlined and red.

An example of <a> tag with the id attribute for later styling:


<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <a href="https://www.mrexamples.com" target="_blank" id="link">Visit MrExample.com</a> </body> </html>

Here’s how to link an image:


<!DOCTYPE html> <html> <body> <a href="https://mrexamples.com"> <img border="0" alt="mrexamples" src="https://mrexamples.com/wp-content/uploads/html_images/logo-mrs.gif" width="150" height="150"> </a> </body> </html>

Here’s how to open a new browser tab with a link:


<!DOCTYPE html> <html> <body> <a href="https://mrexamples.com" target="_blank">Open mrexamples.com!</a> </body> </html>

To link an email address, follow these steps:


<!DOCTYPE html> <html> <body> <a href="mailto:[email protected]">Send email</a> </body> </html>
Tip: If you do not define another target for the linked page, it will display in the active browser window.

A phone number can be linked in the following way:


<!DOCTYPE html> <html> <body> <a href="tel:+1724378923">+17 243 78923</a> </body> </html>

A link to another section of the same page can be created as follows:


<!DOCTYPE html> <html> <body> <a href="#section2">Jump on Section 2</a> </body> </html>

Here’s how to link to JavaScript:


<!DOCTYPE html> <html> <body> <a href="javascript:alert('Hello%20World');">Run JavaScript</a> </body> </html>
Tip: CSS Links & CSS Buttons can be customized to style links.

Browser Compatibility

<a> Yes Yes Yes Yes Yes


Attribute Value Overview
media media_query Indicates the media/device for which the Linked document is optimized
ping list_of_URLs This method identifies a list of URLs to which, when the link is followed, the browser will, in the background, send post requests with body pings. Tracking is usually done with this method.
href URL Provides the URL of the link’s destination
referrerpolicy no-referrer
Indicate which referrer details to include with the link
target _blank
Provides instructions for opening the linked document
type media_type The linked document’s media type is determined
download filename A hyperlink identifies that they will be a download target after clicking on it.
hreflang language_code Declare the language of the linked document.
rel alternate
The connection between the linked document and the active document is defined.

Event Attributes

Tag A <a> accepts Event Attributes in HTML as well.<!–



mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]


Global Attributes

The Tag A <a> also accepts HTML Global Attributes.

Default CSS Settings

Most browsers will likely display the Tag A <a> element with the values listed below:

a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}a:link:active, a:visited:active {
color: (internal value);

Benefits of HTML <a> Tag

The HTML <a> tag, also known as the anchor tag, is used to create hyperlinks between web pages, making it an essential component of the World Wide Web. Some benefits of the <a> tag include:

  • The <a> tag allows you to link to other pages, enabling users to navigate easily across different websites and web pages.
  • By using the <a> tag to create hyperlinks, you can provide users with relevant information and resources, making their browsing experience more enjoyable and useful.
  • Using the <a> tag to create links to other relevant and authoritative websites can help boost your own website’s SEO by signaling to search engines that your site is a valuable resource for users.
  • The <a> tag can be used to create internal links within a website, allowing users to navigate quickly and easily to specific sections or pages.
  • By using the <a> tag with appropriate descriptive text, you can make your website more accessible for users who rely on screen readers or other assistive technologies.
  • By using the <a> tag with tracking parameters, you can track user behavior on your website, including which links they click on and how they interact with your content.

If this article was helpful enough to fulfill your educational desires, do leave your reaction below as a token of appreciation or a suggestion to improve the quality and quantity of content on this site.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *