The Basic Link Tag: <a> and href

A link in HTML uses the <a> tag, short for "anchor". The tag wraps around the text you want to click, and the href attribute tells the browser where to go when someone clicks it. Here is the simplest form:

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

When a browser reads this, it displays "Click here" as a clickable link. The href value can be a full web address like https://example.com, a relative path to another file on your site like about.html, or even an email address prefixed with mailto:.

The text between the opening <a> and closing </a> tags is what the reader sees and clicks. You can put a single word, a sentence, or even an image inside those tags.

Key Takeaways

  • The <a> tag creates a link, with the href attribute holding the destination URL or file path.
  • Relative links like about.html point to files on your own site; absolute links like https://example.com point elsewhere.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.
  • Email links use href="mailto:name@example.com" and open the user's default email program.
  • Links to a specific section of a page use a hash symbol: href="#section-name" paired with an id on the target element.

Absolute Links vs. Relative Links

An absolute link includes the full web address and works the same way no matter where your HTML file sits. Use it when pointing to another website: <a href="https://wikipedia.org">Wikipedia</a>. The browser knows to go to that exact address.

A relative link describes a path from your current file to another file on your own site. If your HTML file and a file called contact.html sit in the same folder, you write: <a href="contact.html">Contact us</a>. If contact.html is in a subfolder called pages, you write: <a href="pages/contact.html">Contact us</a>.

Relative links are useful because they keep working if you move your entire site to a different server. Absolute links always point to the same place, which is what you want when linking to external sites.

Opening Links in a New Tab

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

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

This is useful when you link to an external site and want readers to stay on your page. Many sites use this for outbound links. You can also add rel="noopener noreferrer" for security reasons — it prevents the new page from accessing certain information about your site:

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

Email Links and Phone Numbers

To create a link that opens the reader's email program, use mailto: in the href:

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

When clicked, this opens the default email client with the recipient field already filled in. You can add a subject line and body text by appending ?subject= and &body=:

<a href="mailto:contact@example.com?subject=Question about pricing&body=Hi, I wanted to ask...">Email us</a>

For phone numbers, use tel: followed by the number. On mobile devices, this usually opens the phone dialer:

<a href="tel:+1-555-123-4567">Call us</a>

Linking to a Specific Section on the Same Page

You can link to a specific part of a page using an anchor — a combination of a hash symbol and an id. First, give an element an id attribute:

<h2 id="pricing">Our Pricing</h2>

Then link to it using the hash and that id:

<a href="#pricing">Jump to pricing</a>

When someone clicks this link, the page scrolls to the element with id="pricing". This works on the same page or on another page — you can link to a section on a different page by combining the file path with the anchor: <a href="about.html#team">Meet the team</a>.

Styling Links with CSS

By default, links appear blue and underlined. You can change their appearance using CSS. The most common approach is to target the <a> tag and use pseudo-classes to style different states:

a { color: green; text-decoration: none; } removes the underline and makes links green. a:hover { color: darkgreen; } changes the color when someone hovers over the link. a:visited { color: purple; } styles links the user has already clicked.

You can also add a class to specific links and style them differently. For example, <a href="signup.html" class="button">Sign up</a> lets you style that link as a button while leaving other links unchanged.

Common Mistakes to Avoid

Forgetting the href attribute is the most common error. <a>Click here</a> without an href creates text that looks like a link but does nothing. Always include href with a destination.

Mixing up relative and absolute paths causes broken links. If you write <a href="https://example.com/about.html"> when you meant to link to a file on your own site, the link will only work if your site is actually at that address. Use relative paths for internal links and absolute paths for external ones.

Using javascript: in the href attribute is outdated and creates accessibility problems. If you need a link to run JavaScript code, use an event listener in a script tag instead of putting code in the href.

Frequently Asked Questions

Can I put an image inside an <a> tag?

Yes. Wrap the <img> tag inside the <a> tag: <a href="home.html"><img src="logo.png" alt="Home"></a>. The entire image becomes clickable. This is common for logo links that return to the homepage.

What does rel="noopener noreferrer" do?

When you open a link in a new tab with target="_blank", the new page can access the window.opener object and potentially redirect your original page. rel="noopener noreferrer" prevents this. It is a security best practice for external links.

How do I link to a PDF or downloadable file?

Use the same <a> tag with the file path in href: <a href="documents/guide.pdf">Download our guide</a>. Most browsers will download the file instead of displaying it, though this depends on the browser and file type.

Can I style a link differently based on whether it has been visited?

Yes, using the :visited pseudo-class in CSS: a:visited { color: purple; }. However, browsers limit what you can change for security reasons — you can only modify color, background-color, border-color, and outline-color on visited links.

What is the difference between <a> and <button>?

Use <a> for navigation to a new page or section. Use <button> for actions on the current page, like submitting a form or toggling content. Semantically, they mean different things to browsers and assistive technology.