The HTML <a> element creates hyperlinks. Attributes are added inside the opening <a> tag to control the behavior and additional information of the link.

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

The most commonly used link attributes are: href, target, title, download, rel, and id.

2. href Attribute

The href attribute specifies the destination URL of a hyperlink. It is the most important attribute of the <a> element.

<a href="https://www.google.com">Open Google</a>

Result:
A link named Open Google is displayed.

3. target Attribute

The target attribute specifies where the linked document should open.

Value	Description
`_self`	Opens the link in the current tab. This is the default.
`_blank`	Opens the link in a new tab or window.
`_parent`	Opens the link in the parent browsing context.
`_top`	Opens the link in the full browser window.

Example

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

Result:
Open Example

Note: When using target="_blank", using rel="noopener noreferrer" is a common security practice.

4. title Attribute

The title attribute provides additional information about a link. Browsers commonly display its value as a tooltip when the user moves the mouse over the link.

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

Result:
Example Website

5. rel Attribute

The rel attribute defines the relationship between the current page and the linked resource.

Value	Purpose
`noopener`	Prevents the new page from accessing the original window through JavaScript.
`noreferrer`	Prevents the browser from sending the referrer information.
`nofollow`	Provides a hint to search engines not to pass ranking signals through the link.
`external`	Indicates that the linked resource is external to the current site.

Example

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

6. download Attribute

The download attribute tells the browser that the linked resource should be downloaded instead of simply opened.

<a href="files/resume.pdf" download>
    Download Resume
</a>

Use Case:

The download attribute is commonly used for PDFs, documents, images, reports, and other downloadable resources.

Custom Download Filename

<a href="files/resume.pdf" download="MyResume.pdf">
    Download Resume
</a>

The value of the download attribute can suggest a filename for the downloaded resource.

7. id Attribute for Page Sections

The id attribute can be used on an element to create a target for a same-page link.

<h2 id="contact">Contact Us</h2>

<a href="#contact">Go to Contact Section</a>

The #contact part of the URL points to the element having id="contact".

8. Linking to Another Page in the Same Website

A relative URL can be used when linking to another page within the same website.

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

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

Common Examples:

about.html
contact.html
products.html
services.html

9. Linking to a Specific Section

You can combine href and an element's id to navigate directly to a specific section.

<a href="#services">View Services</a>

<h2 id="services">Our Services</h2>

<p>We provide web development services.</p>

10. Email Link

The mailto: scheme opens the user's default email application.

<a href="mailto:info@example.com">
    Email Us
</a>

Example:
Email Us

11. Telephone Link

The tel: scheme can be used to create a clickable telephone number, especially useful on mobile devices.

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

Example:
Call Us

12. Complete Link Example

Multiple link attributes can be used together.

<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer"
   title="Visit Example Website">
    Visit Example
</a>

Result:
Visit Example

13. Common Link Attributes Summary

Attribute	Purpose	Example
`href`	Specifies the destination	`href="about.html"`
`target`	Specifies where to open the link	`target="_blank"`
`title`	Provides additional information	`title="About Us"`
`rel`	Defines the relationship with the linked resource	`rel="noopener"`
`download`	Requests download of the resource	`download`
`id`	Creates an anchor target	`id="contact"`

14. Accessibility Considerations

Link text should clearly describe where the link leads. Avoid vague text such as "Click Here" when possible.

<!-- Less descriptive -->
<a href="courses.html">Click Here</a>

<!-- More descriptive -->
<a href="courses.html">View HTML Courses</a>

Descriptive link text helps users understand the purpose of a link, including users who navigate websites with assistive technologies.

15. Common Mistakes

Forgetting the href attribute.
Using incorrect or broken URLs.
Using unclear link text.
Using target="_blank" without considering rel.
Using unnecessary attributes.
Forgetting to use matching id values for page anchors.

16. Practice Task

Create an HTML page containing:

A link to Google.
A link that opens in a new tab.
A link with a tooltip using the title attribute.
A downloadable PDF link.
An email link.
A telephone link.
A same-page link using an element id.

17. Complete Practice Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Link Attributes</title>
</head>
<body>

    <h1>Link Examples</h1>

    <a href="https://www.google.com"
       target="_blank"
       rel="noopener noreferrer">
        Open Google
    </a>

    <br><br>

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

    <br><br>

    <a href="mailto:info@example.com">
        Email Us
    </a>

    <br><br>

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

    <br><br>

    <a href="#contact">
        Go to Contact
    </a>

    <h2 id="contact">Contact Section</h2>

    <p>Thank you for visiting our website.</p>

</body>
</html>

Summary

HTML link attributes control how hyperlinks work and provide additional information about linked resources. The most commonly used attributes are href, target, title, rel, download, and id. Understanding these attributes helps you create useful, accessible, and well-structured navigation in HTML pages.

← Previous: Hyperlinks Next: Images →