HTML Links

Links are one of the core features of the web. They allow users to navigate from one page to another, jump to a specific section, download a file, or open an email client — all with a single click.

In HTML, links are created using the <a> tag, which stands for anchor.

Basic Link Syntax

<a href="URL">Link Text</a>

<!-- Example -->
<a href="https://estudy247.com/">Visit eStudy247</a>

The href attribute (short for Hypertext Reference) specifies the destination of the link. The text between the opening and closing <a> tags is what the user sees and clicks.

Types of Links

1. External Link

An external link points to a page on a different website. It uses the full URL including https://.

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

2. Internal Link

An internal link points to another page within the same website. It uses a relative path (just the file name or folder path).

<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
<a href="pages/products.html">Products</a>

3. Anchor Link (Jump to a Section)

An anchor link allows navigation to a specific section on the same page. The destination section must have an id attribute, and the link uses # followed by that id.

<!-- Navigation link -->
<a href="#about">Go to About Section</a>
<a href="#contact">Go to Contact Section</a>

<!-- Target sections further down on the page -->
<h2 id="about">About Us</h2>
<p>Information about our company.</p>

<h2 id="contact">Contact Us</h2>
<p>Reach us at info@example.com</p>

4. Email Link

An email link opens the user's default email application with a pre-filled recipient address. Use mailto: followed by the email address.

<a href="mailto:support@example.com">Send us an Email</a>

5. Phone Link

A phone link allows mobile users to call a number directly by tapping the link. Use tel: followed by the phone number.

<a href="tel:+919999999999">Call: +91 9999999999</a>

Opening a Link in a New Tab

By default, links open in the same browser tab. To open a link in a new tab, add the target="_blank" attribute.

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

Link with a Title Tooltip

Adding a title attribute to a link shows a tooltip when the mouse hovers over it.

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

Image as a Link

An image can be made clickable by wrapping it inside an <a> tag.

<a href="https://www.example.com">
  <img src="logo.png" alt="Company Logo">
</a>

Download Link

The download attribute tells the browser to download the linked file instead of opening it.

<a href="files/brochure.pdf" download>Download Brochure</a>
<a href="files/report.xlsx" download="Annual-Report">Download Report</a>

Link Target Values

Key Points to Remember

• Links are created using the <a> tag with the href attribute
• Use full URLs for external links and relative paths for internal links
• Use target="_blank" to open a link in a new tab
• Use mailto: for email links and tel: for phone links
• Use anchor links (#id) to navigate to sections on the same page
• Any HTML element, including images, can be wrapped in <a> to make it clickable