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



mediamedia_queryIndicates the media/device for which the Linked document is optimized
pinglist_of_URLsThis 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.
hrefURLProvides the URL of the link’s destination
Indicate which referrer details to include with the link
Provides instructions for opening the linked document
typemedia_typeThe linked document’s media type is determined
downloadfilenameA hyperlink identifies that they will be a download target after clicking on it.
hreflanglanguage_codeDeclare the language of the linked document.
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 *