Creating Links in HTML

Master the foundation of web navigation. Learn how the simple <a> tag connects the entire digital world.

🔗

Welcome! Links are the heart of the web, connecting billions of pages. Let's learn how to create them.

/* Links make the web go 'round! */

The Anchor Tag <a>

The anchor tag <a> creates a hyperlink. The text between the opening <a> and closing </a> tags becomes the clickable link text that users see on the page.

The 'href' Attribute: Destination

The href (Hypertext Reference) attribute is the most crucial part of a link. It specifies the destination URL. Without an href, the anchor tag is just a placeholder.

The 'target' Attribute: Where to Open

The target attribute determines where the linked document opens. Using target="_blank" is very common as it opens the link in a new browser tab, keeping your original page open.

Beyond Web Pages: Other Link Types

Links aren't just for web pages. You can create links to trigger emails with mailto:, or initiate phone calls on mobile devices with tel: within the href attribute.

Practice Zone

Interactive Test 1: Build a Link

Assemble a complete HTML link by dragging the parts into the correct order.

Arrastra en el orden correspondiente.

Arrastra las opciones:

href="https://todotutorial.com"

>Visit Us</a>

Completa el código:

______

Unlock with Premium

Interactive Test 2: Name the Attributes

Fill in the attribute names to create a link that opens in a new tab.

Rellena los huecos en cada casilla.

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

Unlock with Premium

Practice Example: Code Editor

Create an HTML link to `https://google.com` with the text "Go to Google" that opens in a new browser tab.

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

<a href="https://google.com" target="_blank">Go to Google</a>

Unlock with Premium

Knowledge Check

Which attribute is essential for an <a> tag to function as a link?

Unlock with Premium

Styling and Controlling Links

A link's journey doesn't end with HTML. CSS and JavaScript give you powerful tools to style their appearance and control their behavior.

1. Styling Links with CSS Pseudo-classes

CSS provides special "pseudo-classes" to style links based on their state. You can change the color of a link when a user hovers over it, or after they have visited it.

/* CSS */
a:hover {
  color: red;
  text-decoration: none;
}
a:visited {
  color: purple;
}

Hover over me!
I'm a visited link.

2. Controlling Link Behavior with JavaScript

Sometimes you want to prevent a link's default action (like navigating to a new page) and run your own code instead. JavaScript's `event.preventDefault()` is the tool for this job.

// JS
const specialLink = document.querySelector('#special');

specialLink.addEventListener('click', (event) => {
  event.preventDefault();
  alert('You stopped the link!');
});

Practical Takeaway: Use CSS pseudo-classes for visual feedback on links. Use JavaScript event handling when you need to intercept a link's default navigation to create more complex, app-like interactions.

HTML Links Glossary

<a>: The "anchor" tag. It's used to define a hyperlink.
href: Stands for "Hypertext Reference". This attribute specifies the destination URL of the link. It is essential for a link to work.
target: Specifies where to open the linked document. The value _blank is commonly used to open the link in a new tab.
Absolute URL: A full web address, including the protocol (https://), domain name, and path. Example: https://www.google.com/search.
Relative URL: A partial address that points to a file within the same website. It does not include the domain name. Example: /about/contact.html.
mailto:: A protocol used within an href to create a link that opens the user's default email client, pre-filled with a recipient address.