HTML a Tag: How to Add Links to Web Page with Examples

The HTML a tag allows you to create links that move users from one page or resource to another.

Understand the a Tag in HTML

The <a> tag defines a hyperlink. This hyperlink lets users navigate to another page or section on the same page or external resource.

The purpose of the <a> tag is to create connections between documents and resources.

Here is the syntax:

<a href="https://example.com">Visit Example</a>

The <a> tag uses the href An attribute to define the destination. The text between the open and close tags becomes the clickable link.

The Attributes of a Tag in HTML

The href Attribute:

The href attribute sets the destination URL. You can link to other pages on your site:

<a href="/about.html">About Us</a>

Or link to external websites:

<a href="https://example.com">Example</a>

Also, you can link to sections on the same page with IDs (anchor links):

<a href="#section1">Go to Section 1</a>

Target Attribute:

The target attribute defines where to open the linked document.

Use _self (default) to open in the same tab or window:

<a href="page.html" target="_self">Same Tab</a>

Use _blank to open in a new tab or window.

Anchor Links:

Anchor links let users jump to a specific part of a page. You use an id on the target element:

Here is an example:

<h2 id="section1">Section 1</h2>
<a href="#section1">Go to Section 1</a>

Download Links:

The download attribute makes users save the linked file rather than open it.

<a href="/files/report.pdf" download>Download Report</a>

This helps users to save documents or images.

Rel Attribute:

The rel attribute describes the relationship between the current page and the linked page.

• The noopener attribute stops the new page from gaining access to window.opener.
• noreferrer the browser does not send the referrer information.
• external indicates that the link leads to an external site
• nofollow tells search engines not to follow the link
• ugc marks user-generated content links
• sponsored marks paid or sponsored links
• author points to the author of the document
• help provides help or context for the current document
• license links for license details
• prev refers to the previous document in a series
• next refers to the next document in a series

Here are examples:

<a href="https://example.com" rel="nofollow">External Link</a>
<a href="help.html" rel="help">Help Page</a>
<a href="author.html" rel="author">About the Author</a>
<a href="page2.html" rel="next">Next Page</a>
<a href="tag-news.html" rel="tag">News Tag</a>

Link Titles:

The title attribute provides extra info on hover.

For example:

<a href="https://example.com" title="Visit the Example website">Example</a>

Add useful context with this, but don’t overdo it – screen readers might announce it oddly.

How to Create an Email and a Phone Link with a Tag in HTML

You can use mailto: and tel: in the href attribute to create links for email and phone.

Here is an example of an email link:

<a href="mailto:[email protected]">Email Us</a>

Phone link:

<a href="tel:+1234567890">Call Us</a>

How to Style a Tag in HTML

You can use CSS to change the appearance of links. Here is an example:

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: green;
}

This helps you match links to your site design and provide clear feedback when users interact.

Link to External Sites vs. Internal Pages

Internal links help users navigate within your own website.

<a href="/contact.html">Contact Us</a>

External links point to other websites.

<a href="https://news.com">News Site</a>

Consider warning users about external links and use target="_blank" carefully to avoid confusion.

SEO and Security Considerations

Links can be risky if misused.

• Add rel="noopener noreferrer" to the links with target="_blank" for security.
• Check for scams. Always check links before you click.
• Do not link to sites you do not trust.

Here are some reasons that benefit search engines:

• Internal links help search engines understand the structure of your site.
• You can use rel="nofollow" for untrusted or sponsored links to guide search engines.
• Clear link text helps users and search engines.

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes provide extra context for users with assistive technology.

Here is an example:

<a href="https://example.com" aria-label="Visit Example Company Homepage">Example</a>

Use ARIA only when standard HTML does not provide enough information.

Examples of a Tag in HTML

Basic Link to Another Page:

<a href="https://example.com">Visit Example</a>

This simple link takes users to an external website. Use the href attribute with a full URL to send visitors to another site or page when they click the link text.

Link to a Section on the Same Page:

<a href="#about">About Section</a>
...
<h2 id="about">About Us</h2>

This link jumps to a specific part of the same page. Use href with an id to help users jump to key sections.

Open Link in a New Tab Securely:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">External Site</a>

This link opens in a new tab safely. It adds rel="noopener noreferrer" to protect users and ensures better behavior across modern browsers.

Create a Download Link for a File:

<a href="/files/report.pdf" download>Download Report</a>

Users receive the PDF as a download instead of a browser preview. The download attribute prompts a save dialog, which improves user control over file storage.

Styled Button-Like Link with CSS:

<a class="btn" href="/signup.html">Sign Up</a>

Here is CSS:

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007acc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

This example shows a link styled to look like a button. Use CSS to change color and size. It improves links and matches your site design better.

Dofollow Link to Another Website:

<a href="https://site-example-here.com">Trusted Source</a>

This link helps search engines find and rank the destination page. All links without rel="nofollow" are dofollow. It helps connect related content for SEO purposes.

Wrapping Up

You now know what the HTML <a> tag is and how to use it. You learned many things else, such as:

• Basic syntax
• Key attributes
• How to style a tag with options
• Security and SEO guidelines

Here is a quick recap:

• The <a> tag creates hyperlinks.
• href defines the destination.
• target and rel download control behavior and security.
• Anchors for email and phone links serve specific purposes.
• Better design and accessibility improve how users interact.
• SEO best practices help search engines value your links.

FAQs

<a href="https://www.example.com">Visit Example</a>

<a href="https://www.example.com" target="_blank">Open in new tab</a>

<a href="mailto:[email protected]">Send Email</a>

<h2 id="section1">Section 1</h2>

<a href="#section1">Go to Section 1</a>

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

<a href="file.pdf" download>Download PDF</a>

<a href="https://www.example.com">
  <img src="image.jpg" alt="Example">
</a>

Similar Reads