<!–
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:
Example
<!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:
Example:
<!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.
Table Of Content-
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:
Example:
<!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:
Example
<!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:
Example
<!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:
Example
<!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:
Example
<!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:
Example
<!DOCTYPE html>
<html>
<body><a href="#section2">Jump on Section 2</a></body>
</html>
Here’s how to link to JavaScript:
Example
<!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
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
Attributes
| 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 no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Indicate which referrer details to include with the link |
| target | _blank _parent _self _top | 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 author bookmark external help license next nofollow noreferrer noopener prev search tag | The connection between the linked document and the active document is defined. |
Event Attributes
Tag A <a> accepts Event Attributes in HTML as well.<!–
Advertisement
–><!–
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);
}
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.
+1
+1
+1
+1
+1
+1
+1
