HTML Links: Connecting the Web

Master the <a> tag and its essential attributes to build the navigation that powers every website.

🔗

Welcome! Let's explore HTML links, the very fabric that connects the World Wide Web.

/* Links make the web a 'web'. */

The <a> Tag: Your Anchor Point

The <a> tag, short for "anchor," is the fundamental building block for creating links. Anything you place between the opening <a> and closing </a> tags becomes the clickable part of the hyperlink.

The 'href' Attribute: The Destination

A link is useless without a destination. The href (Hypertext Reference) attribute tells the browser where to go when the link is clicked. This is the most crucial attribute of the <a> tag.

The 'target' Attribute: Controlling the View

By default, links open in the same browser tab. To open a link in a new tab, you use the target="_blank" attribute. This is highly recommended for external links to keep users on your site.

Absolute vs. Relative Paths

Link destinations can be absolute (a full URL like https://www.google.com) or relative (a path to another file on your own site, like /about.html). Relative links are great for internal navigation.

Practice Zone

Interactive Test 1: Assemble a Link

Drag the parts of this link into the correct order.

Arrastra en el orden correspondiente.

Arrastra las opciones:

href="..."

>Click</a>

Completa el código:

______

Unlock with Premium

Interactive Test 2: Fill the Attributes

Complete the link to open Google in a new tab.

Rellena los huecos en cada casilla.

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

Unlock with Premium

Practice Example: Code Editor

Create a link to "https://wikipedia.org" that says "Visit Wikipedia" and opens in a new tab.

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

<a href="https://wikipedia.org" target="_blank">Visit Wikipedia</a>

Unlock with Premium

Knowledge Check

What does the `target='_blank'` attribute do?

Unlock with Premium

Links in Action: Building a Nav-Bar

While single links are useful, their true power comes from grouping them to create navigation menus, the roadmap for your website.

1. Structuring with Lists

For semantics and accessibility, it's best practice to wrap your navigation links in an unordered list (<ul>) and list items (<li>). This tells browsers and screen readers that it's a grouped list of links.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
  </ul>
</nav>

2. Styling with CSS

With CSS, you can transform that basic list into a sleek, horizontal navigation bar. You can remove the bullet points, align the items, and add hover effects for a professional look.

/* styles.css */
nav ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color: #333;
}

Home About

Practical Takeaway: Combining <a> tags with list elements (<ul>, <li>) and a <nav> container is the standard, semantic way to build website navigation.

HTML Links Glossary

<a>: The "anchor" tag. It's used to define a hyperlink.
href: The "Hypertext Reference" attribute. It specifies the URL destination of the link.
target: An attribute that specifies where to open the linked document. The value _blank opens it in a new tab.
Absolute URL: A full web address that includes the protocol (e.g., `https://www.example.com`). Used for linking to external websites.
Relative URL: A partial address that points to a file within the same website (e.g., `/contact.html`). Used for internal site navigation.
mailto:: A special value for the `href` attribute that creates a link to open the user's default email client.
tel:: A special value for `href` that initiates a phone call when clicked on a mobile device.