HTML Links Guide: External and Internal Links with the a Tag

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

---

HTML Links
The <a> TAG

INTRODUCTION TO HTML LINKS: THE <a> TAG AND THE href ATTRIBUTE

The web, as the name suggests, is made of connections. Links allow us to jump from one page to another, from one site to another, or even to different sections within the same page. Without links, every page would be an isolated island.

To create these digital "bridges" in HTML, the fundamental tool is the <a> tag, which stands for anchor. Everything you put between the opening <a> tag and the closing </a> tag becomes clickable.

But an anchor alone isn't enough. We need to tell it where to take the user when clicked. And that's where the most important attribute of the <a> tag comes in: the href attribute (which stands for Hypertext REFerence). The value you assign to the href attribute defines the link's destination.

The basic structure is therefore:

<a href="destination">Clickable text or element</a>

Now let's see how to use this structure to create the two main types of links: those pointing to external resources and those pointing to specific points within the same page.

CREATING LINKS TO EXTERNAL SITES (ABSOLUTE URLS)

This is the most common type of link: you want to link a page on your site to a page on another website (e.g., Google, Wikipedia, another blog, etc.).

To do this, you must use an absolute URL in the href attribute. An absolute URL is the complete web address of the resource, the one you see in the browser's address bar. It's essential to include the protocol at the beginning, which is usually https:// (for secure connections) or, less commonly today, http://. If you forget it, the browser might think you're looking for a page within your own site, and the link won't work as expected.

Example: We want to create a link to Google's main page.

<p>To search, you can use <a href="https://www.google.com">the Google search engine</a>.</p>

In this case:

• <a> and </a> enclose the clickable text: "the Google search engine".
• href="https://www.google.com" specifies the complete address (absolute URL) of the destination.

One important thing: always try to make the link text descriptive. Instead of writing "click here", write something that makes it clear where the link leads (as in the example above). This helps both users understand what to expect and search engines understand the context of the linked page.

NAVIGATING WITHIN THE SAME PAGE (INTERNAL LINKS OR ANCHORS)

You know those very long pages where there's a clickable table of contents at the beginning that takes you directly to the section you're interested in? Those are internal links, also called anchors (or fragment identifiers). They allow you to jump to a specific point on the same page you are currently on.

To create an internal link, you need two things:

1. The Destination (The Anchor): You need to uniquely identify the HTML element you want the link to point to. This is done by adding an id attribute to that element. The id attribute must have a unique value within that page (you can't have two elements with the same id). It's commonly used to identify section headings (<h2>, <h3>, etc.) or <div> containers.

   Example of destination:

   <h2 id="contact">Contact Information</h2>
   <!-- ... section content ... -->

   Here we've given the <h2> heading a unique id called "contact".

2. The Link: You need to create a normal <a> tag, but in the href attribute, instead of a full URL, you'll put the hash symbol (#) followed immediately (with no spaces) by the id of the destination element.

   Example of link:

   <p>For more details, <a href="#contact">go to the contact section</a>.</p>

   When the user clicks on "go to the contact section", the browser will automatically scroll the page to the element with id="contact".

Let's Put the Pieces Together:

Here's how the link and destination might look on a hypothetical page called "user-profile.html":

<!-- Top of the page or in an index -->
<p>Jump to: <a href="#personal-info">Personal Info</a> | <a href="#contact">Contact</a></p>

<!-- ... other page content ... -->

<h2 id="personal-info">Personal Information</h2>
<p>Name: John Doe</p>
<!-- ... other details ... -->

<!-- ... other page content ... -->

<h2 id="contact">Contact Information</h2>
<p>Email: john.doe@email.com</p>
<!-- ... other details ... -->

KEY POINTS AND BEST PRACTICES FOR LINKS

• The <a> tag is the foundation for all links.
• The href attribute is essential and defines the destination.
• For external links, use absolute URLs complete with https:// or http://.
• For internal links (anchors):
  • Assign a unique id attribute to the destination element (e.g., <h2 id="my-section">).
  • Create the link with href="#id_name" (e.g., <a href="#my-section">).
• Always write clear and descriptive link text. Avoid "click here". The text should indicate where the user will go.
• Ensure that the ids used as anchor destinations are unique within the same HTML page.

---