Mastering HTML Links: href & target Attributes

Go beyond simple links. Learn to control their destinations and behavior like a pro with the essential `href` and `target` attributes.

🔗

Welcome! Let's master HTML links, the very backbone of the web.

/* Let's begin... */

The `href` Attribute: The Destination

The href (Hypertext Reference) attribute is the most crucial part of a link. It specifies the destination URL. Without it, the <a> tag is just a placeholder. It can be an absolute URL (e.g., `https://www.google.com`) or a relative URL (e.g., `/about.html`).

The `target` Attribute: Controlling Behavior

The target attribute dictates where the linked document will open. The most common value is _blank, which opens the link in a new tab or window. The default value is _self, which opens it in the same tab.

A Note on Security: `rel` Attribute

When using target="_blank", it's a security best practice to also include rel="noopener noreferrer". This prevents the new page from potentially accessing and manipulating the original page, protecting your users.

Practice Zone

Interactive Test 1: Build the Link

Complete the link by dragging the attributes into the correct places.

Arrastra en el orden correspondiente.

Arrastra las opciones:

href="https://example.com"

target="_blank"

Completa el código:

<a ______>Visit our site</a>

Unlock with Premium

Interactive Test 2: Name the Attributes

Rellena los huecos en cada casilla.

<a ="https://example.com" ="_blank">...</a>

Unlock with Premium

Practice Example: Code Editor

Write a complete HTML link that points to `https://www.todotutorial.com`, opens in a new tab, and displays the text "Learn More".

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<a href="https://www.todotutorial.com" target="_blank">Learn More</a>

Unlock with Premium

Knowledge Check

What is the primary purpose of the 'target' attribute in an <a> tag?

Unlock with Premium

Link Best Practices

Creating links is easy, but creating *great* links requires a bit more thought. Here are some tips for accessibility, SEO, and user experience.

1. Use Descriptive Link Text

The text inside your <a> tag should clearly describe where the link goes. This helps users with screen readers and improves your site's SEO.

Avoid ❌

<p>To learn more, <a href="/about">click here</a>.</p>

Prefer ✅

<p>Learn more <a href="/about">about our company</a>.</p>

2. Provide a `title` Attribute for Tooltips

The title attribute provides extra information that appears when a user hovers over the link. It can be useful for clarifying the link's purpose.

<a href="/docs" title="Opens the official documentation">View Docs</a>

View Docs

Opens the official documentation

3. Link to Email and Phone Numbers

You can use special prefixes in `href` to trigger actions like opening an email client or a phone dialer.


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


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

Email Us Call Us

Link Attributes Glossary

<a>: The "anchor" element. It creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
href: Stands for "Hypertext Reference". This attribute contains the destination URL or URL fragment that the hyperlink points to.
target: Specifies where to display the linked URL. Common values include _self (default, same frame) and _blank (new tab/window).
rel: Specifies the relationship between the current document and the linked document. Important values include noopener (prevents the new page from accessing `window.opener`) and noreferrer (prevents sending the Referer header).
title: Contains advisory text about the element. This text is often displayed as a tooltip when the mouse hovers over the link.
download: When present, this attribute indicates that the browser should download the URL instead of navigating to it. You can optionally provide a filename as its value.