Creating Hyperlinks

Hyperlinks are the connective tissue of the web. Without them, every HTML page would be an isolated island — readable on its own but entirely disconnected from every other page, resource, or site in existence. The ability to click a piece of text or an image and instantly travel to another location is so fundamental to how the web works that it is easy to take for granted. Understanding how to create hyperlinks correctly, and understanding all the options available to you, is one of the most important foundational skills in HTML.

At the heart of every hyperlink is the anchor element, written as <a>. Like most HTML elements, it has an opening tag and a closing tag, and whatever you place between them becomes the clickable part of the link. That content can be plain text, an image, a button, or even a whole block of styled content. The browser will typically render linked text in blue with an underline by default, signalling to the user that it is interactive, though this appearance can be changed entirely with CSS.

Here is the simplest possible anchor element:

<a>Click here</a>

This renders the words "Click here" as what appears to be a link, but it does nothing when clicked. That is because the anchor element, on its own, has no destination. To make a link actually navigate somewhere, you must add the href attribute — short for Hypertext Reference. The href attribute tells the browser where to go when the link is activated.

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

Now the anchor has both a visible label ("Visit Example") and a destination (the URL in the href attribute). The browser knows what to show and where to go. Everything between the opening <a href="..."> and the closing </a> is clickable.

The href attribute is remarkably versatile. It does not only accept web addresses. It accepts a wide range of values that serve different purposes:

• Absolute URLs — full web addresses for external pages and resources.
• Relative paths — file paths relative to the current file, used for internal navigation.
• mailto: links — open the user's email client with a pre-filled recipient address.
• Page anchors (fragment identifiers) — jump to a specific section within the same page using an element's id.
• File paths — link directly to downloadable files such as PDFs, images, or ZIP archives.

Each of these is explored in depth below.

External hyperlinks use absolute URLs as their href value. An absolute URL is a complete, self-contained web address that specifies everything the browser needs to locate a resource anywhere on the internet. It always starts with a protocol — most commonly https:// (the secure version of HTTP) or http:// — followed by the domain name, and then optionally a path to a specific page or file.

<a href="https://www.wikipedia.org/wiki/HTML">Read about HTML on Wikipedia</a>

Breaking this URL down: https:// is the protocol, www.wikipedia.org is the domain, and /wiki/HTML is the path to the specific article. The browser uses all three parts together to find the exact resource. An absolute URL works from any file, in any folder, on any server, because it describes the destination completely rather than relative to anything else.

When linking to external resources, always verify that the URL is accurate and that the destination page still exists. A broken external link frustrates users and can harm your site's credibility. It is also good practice to use descriptive link text rather than generic phrases. Compare these two examples:

• Poor: <a href="https://www.example.com/report.pdf">Click here</a>
• Better: <a href="https://www.example.com/report.pdf">Download the 2024 Annual Report (PDF)</a>

The second version tells the user — and any screen reader — exactly what they will get before they click. This matters enormously for accessibility and for users who scan pages without reading every word.

Internal hyperlinks connect pages within your own website. Instead of a full URL, they use a relative path — a file path described relative to the location of the current HTML file. Relative paths are shorter, easier to maintain, and continue working even if you move your entire site to a different domain.

Imagine a simple website with the following file structure:

my-website/
├── index.html
├── about.html
└── pages/
    └── contact.html

From index.html, you can link to about.html like this, since both files sit in the same folder:

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

To link from index.html to contact.html, which is inside the pages subfolder, the path must reflect that folder structure:

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

Conversely, if you were writing a link inside contact.html that needed to point back up to index.html, you would use ../ to navigate one level up in the folder hierarchy:

<a href="../index.html">Back to Home</a>

Each ../ moves one folder level upward. This system of relative paths is what transforms a set of disconnected HTML files into a coherent, navigable website. Every navigation menu you have ever used on a website is built from anchor elements with internal links exactly like these.

The target attribute controls where the linked resource opens. By default, when a user clicks a link, the destination replaces the current page in the same browser tab. This is the expected, standard behavior for most navigation. However, sometimes — particularly when linking to an external site — you may want the destination to open in a new tab so that the user does not leave your site entirely.

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

Setting target="_blank" instructs the browser to open the link in a new tab or window. While useful, this comes with a subtle but important security consideration. Without additional protection, the newly opened page has the ability to access and manipulate the originating page through the window.opener JavaScript property — a vulnerability known as reverse tabnapping. To prevent this, always pair target="_blank" with the rel attribute set to "noopener noreferrer":

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visit Example (opens in new tab)
</a>

• noopener — prevents the new page from accessing the window.opener reference, closing the security vulnerability.
• noreferrer — additionally prevents the browser from sending the referring page's URL to the destination site, which also implies noopener behavior in modern browsers.

Using both together is the accepted best practice whenever you use target="_blank".

Beyond navigating between pages, anchor elements play a broader structural role in web development. A navigation menu is simply a list of anchor elements, typically wrapped in a <nav> element and styled with CSS to look like a horizontal bar or dropdown. Every item in that menu is an <a> tag pointing to a different section of the site.

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="pages/contact.html">Contact</a>
</nav>

Anchor elements can also link to non-HTML resources. You can link directly to a PDF, an image file, a ZIP archive, or any other file type. If the browser can display the file type, it will; otherwise it will typically prompt the user to download it:

<a href="files/brochure.pdf">Download our brochure (PDF)</a>

You can also use mailto: links to open the user's default email client with a pre-filled address:

<a href="mailto:hello@example.com">Email us at hello@example.com</a>

The following table summarises the most common href values and their purposes:

Ultimately, the anchor element and its href attribute are the building blocks of the entire interconnected web. Used thoughtfully — with descriptive link text, correct paths, appropriate use of target and rel, and a clear understanding of absolute versus relative URLs — they give users a reliable and accessible way to navigate your site and explore the wider web.