The anchor tag makes a clickable link

A link in HTML uses the anchor tag, written as <a>. 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.

The basic structure is: <a href="https://example.com">Click here</a>. The text between the opening and closing tags is what appears on the page. The href value is the destination — a web address, a file path, or an anchor point on the same page.

When a browser renders this code, the reader sees underlined text in blue (the default styling). Clicking it navigates to the URL in the href attribute.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute and a closing </a> tag around the clickable text.
  • External links start with https:// or http://; internal links use relative paths like pages/about.html or absolute paths like /pages/about.html.
  • You can link to a specific section of a page by giving that section an id attribute and using #sectionid as the href value.
  • The title attribute adds hover text that appears when a reader holds their cursor over the link without clicking.

External links point to other websites

An external link goes to a different domain. Always include the full web address, starting with https:// or http://. Without the protocol, the browser treats it as a relative path and looks for a folder on your own server.

Example: <a href="https://www.wikipedia.org">Learn more on Wikipedia</a>. The reader sees "Learn more on Wikipedia" as a link. Clicking it opens Wikipedia in the same tab (or a new tab if you add the target attribute — see below).

Always test external links after you publish. A URL can change, a domain can expire, or a site can move. Broken external links frustrate readers and hurt your credibility.

Internal links connect pages within your own site

An internal link points to another page on your website. You can use a relative path (relative to the current page) or an absolute path (relative to the root of your domain).

If your site structure is:

  • index.html (home page)
  • pages/about.html (about page)
  • pages/contact.html (contact page)

From index.html, a relative link to the about page is: <a href="pages/about.html">About Us</a>. An absolute link is: <a href="/pages/about.html">About Us</a>. Both work, but absolute paths are more reliable if you move pages around later.

From pages/contact.html, a relative link back to the home page is: <a href="../index.html">Home</a>. The ../ means "go up one folder level."

Anchor links jump to sections on the same page

An anchor link lets readers jump to a specific section without scrolling. First, give the target section an id attribute: <h2 id="pricing">Pricing</h2>. Then link to it with a hash: <a href="#pricing">Jump to pricing</a>.

You can also link to a section on another page: <a href="pages/services.html#faq">See our FAQ</a>. This opens the services page and scrolls to the element with id="faq".

Id values must be unique on the page — no two elements can have the same id. Use lowercase letters, numbers, and hyphens. Avoid spaces and special characters.

The target attribute controls where the link opens

By default, a link opens in the same tab or window. Add target="_blank" to open it in a new tab: <a href="https://example.com" target="_blank">Visit example</a>.

Use target="_blank" sparingly. Readers expect links to open in the same tab unless you give them a reason to expect otherwise. Opening new tabs without permission frustrates users and can feel like a trap.

Other target values exist (_self, _parent, _top) but are rarely needed in modern web design. Stick with the default behavior or _blank when you have a specific reason.

The title attribute adds helpful hover text

The title attribute displays text when a reader hovers their cursor over the link: <a href="https://example.com" title="Visit our homepage">Example</a>. The hover text helps readers understand where the link goes before they click.

Keep title text short and descriptive. Avoid repeating the link text itself — that wastes space. Instead, explain what the reader will find: "View our pricing plans" instead of just "Pricing."

Title text is optional. Use it when the link destination is not obvious from the visible text alone.

Email and phone links use special protocols

To create a link that opens the reader's email client, use mailto:: <a href="mailto:contact@example.com">Email us</a>. Clicking this link opens the default email program with the address already filled in.

For phone links on mobile devices, use tel:: <a href="tel:+1-555-123-4567">Call us</a>. On a phone, this becomes a clickable call button. On a desktop, it usually does nothing.

You can add a subject line to email links: <a href="mailto:contact@example.com?subject=Question about pricing">Email us</a>. The question mark separates the email address from the parameters.

Frequently Asked Questions

What's the difference between href and src?

The href attribute is for links (the <a> tag). The src attribute is for images and scripts — it tells the browser where to load a file from. They serve different purposes and are not interchangeable.

Can I link to a PDF or a read?

Yes. Use the full file path in the href: <a href="documents/guide.pdf">read our guide</a>. The browser will either open the PDF in a new tab or prompt the reader to read it, depending on their browser settings.

How do I make a link open in a new window instead of a new tab?

You cannot reliably control whether a link opens in a new tab or new window — that is up to the browser and the reader's settings. The target="_blank" attribute opens a new tab in modern browsers. Respect the reader's preference.

What happens if I use an incorrect URL in the href?

The link will be clickable, but clicking it will show a 404 error or take the reader to the wrong page. Always test your links after publishing. Broken links damage your site's credibility and frustrate readers.

Can I style a link with CSS?

Yes. Links respond to CSS like any other element. You can change the color, remove the underline, add a background, or create hover effects. Use the :hover pseudo-class to style what happens when a reader hovers over the link.