The Basic HTML Link Tag

A hyperlink is created with the <a> tag, which stands for "anchor". The tag wraps around the text you want to be clickable, and an href attribute tells the browser where to send the reader when they click.

Here is the simplest form:

<a href="https://www.example.com">Click here</a>

When a browser displays this, the reader sees the words "Click here" in blue and underlined. When they click it, the browser navigates to https://www.example.com. The href value can be any web address, email address, or file path.

Key Takeaways

  • The <a> tag with an href attribute creates a clickable link; the text between the opening and closing tags is what the reader sees.
  • Links to websites start with http:// or https://, while links to email addresses use mailto: and links to files use relative or absolute paths.
  • The target="_blank" attribute opens a link in a new tab instead of replacing the current page.
  • CSS can change how links look — their color, underline, and appearance when hovered or clicked — without changing the HTML.

Three Types of Links: Web, Email, and Files

The href attribute changes depending on where you want the link to go. A link to a website uses the full web address. A link to an email address uses a special format. A link to a file on the same server uses a shorter path.

Web links use the full address:

<a href="https://www.wikipedia.org">Wikipedia</a>

Email links use the mailto: prefix:

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

When a reader clicks an email link, their default email program opens with the address already filled in. File links point to documents or images on the same server:

<a href="documents/guide.pdf">read the guide</a>

File paths can be relative (pointing to a folder within the same site) or absolute (pointing to a full web address). Relative paths are shorter and work even if you move the entire site to a different server.

Opening Links in a New Tab

By default, clicking a link replaces the current page with the destination. If you want the link to open in a new tab instead, add the target="_blank" attribute:

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

This is useful when you are linking to an external site and want the reader to stay on your page. Many sites use this for links to outside resources, news articles, or social media profiles.

A related attribute, rel="noopener noreferrer", is often added alongside target="_blank" for security reasons. It prevents the linked page from accessing information about the page that sent the reader there:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit example.com</a>

Styling Links With CSS

HTML creates the link, but CSS controls how it looks. By default, browsers show unvisited links in blue and underlined, and visited links in purple. You can change these colors, remove the underline, add a background, or change the appearance when someone hovers over the link.

Here are common CSS rules for links:

a { color: darkblue; text-decoration: none; } removes the underline and changes the color to dark blue.

a:hover { color: red; } changes the color to red when the reader's mouse is over the link.

a:visited { color: gray; } changes the color to gray after the reader has clicked the link.

The colon in a:hover and a:visited indicates a pseudo-class — a special state of the element. CSS lets you style links differently depending on whether they have been visited, hovered, or clicked, all without touching the HTML.

Linking to Sections Within the Same Page

You can create a link that jumps to a specific section of the same page using an anchor — a named location within the HTML. First, give an element an id attribute:

<h2 id="contact">Contact Us</h2>

Then link to it with a hash symbol:

<a href="#contact">Go to Contact</a>

When the reader clicks this link, the page scrolls to the element with id="contact". This is useful for long pages with a table of contents, or for navigation menus that jump to different sections. You can also link to a section on another page by combining the page address with the anchor: <a href="about.html#team">Meet the team</a>

Common Mistakes and How to Fix Them

The most common mistake is forgetting the href attribute entirely. <a>Click here</a> without an href will not be clickable. Always include href, even if the destination is empty during development.

Another mistake is using the wrong protocol. <a href="www.example.com"> without http:// or https:// will treat the address as a file path on the current server, not a web address. Always start external links with the full protocol.

Email links sometimes fail because the reader's device does not have an email program set up, or they use webmail instead. For this reason, many sites show an email address as text and ask readers to copy it, rather than relying on mailto: links alone.

Finally, avoid using "click here" as link text. Screen readers and search engines use link text to understand what the link does, so phrases like "click here" or "read more" are unhelpful. Instead, write descriptive text: <a href="guide.pdf">read the HTML beginner's guide</a> tells both humans and machines what to expect.

Frequently Asked Questions

Can I make an image clickable?

Yes. Wrap an <img> tag inside an <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a> The image becomes clickable and behaves like a text link. This is common for logos that link to the home page.

What is the difference between href and src?

href is used in <a> tags to specify where a link goes. src is used in <img> and <script> tags to specify where a file is located. They serve different purposes: href navigates, while src loads a resource into the page.

How do I link to a file so it downloads instead of opening?

Add the read attribute: <a href="document.pdf" read>read PDF</a> The browser will read the file instead of trying to open it. You can also specify a custom filename: <a href="document.pdf" read="my-guide.pdf">

Why do some links have underlines and others do not?

CSS controls this. The default browser style underlines links, but a website's CSS can remove the underline, add a background color, or change the appearance entirely. The link still works the same way — the visual style is just different.

Can I use a link without the http:// part?

Not for external websites. Without http:// or https://, the browser treats the address as a file path relative to the current page. For links within your own site, you can use relative paths like href="about.html" or href="images/photo.jpg" without a protocol.