The Basic Link Tag

A link in HTML uses the <a> tag, which stands for "anchor". The tag wraps around the text you want to click, and an href attribute tells the browser where to go when someone clicks it. The simplest link looks like this:

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

The text between the opening <a> and closing </a> tags is what appears on the page. The href attribute holds the destination — either a full web address, a page on your own site, or a file to download. When a visitor clicks the visible text, their browser navigates to that destination.

Key Takeaways

  • Every link uses the <a> tag with an href attribute that points to the destination.
  • External links need the full web address starting with http:// or https://.
  • Links to pages on your own site use relative paths like href="about.html" or href="pages/contact.html".
  • You can link to a specific section of a page using a hash symbol and an anchor ID, like href="#section2".
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

External Links vs. Internal Links

An external link points to a website you do not own. It must include the full web address, starting with http:// or https://. For example:

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

An internal link points to another page on your own website. You can use a shorter path because the browser already knows it is on your site. If you have a file called about.html in the same folder, you write:

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

If the page is in a subfolder, include the folder name: <a href="pages/contact.html">Contact</a>. This relative path approach keeps your links working even if you move your entire site to a different server.

Linking to a Specific Section on a Page

You can link directly to a heading or section within a page using an anchor ID. First, add an id attribute to the element you want to link to:

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

Then create a link that points to that ID using a hash symbol:

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

This works on the same page or on a different page. To link to a specific section on another site's page, use the full address plus the hash: <a href="https://example.com/page.html#section">External section</a>. Note that this only works if the other website has set up IDs on their page — you cannot create IDs on someone else's site.

Opening Links in a New Tab

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

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

This is useful when linking to external sites so visitors do not leave your page. Many sites use this for external links but keep internal links opening in the same tab, since visitors expect to navigate within your site normally.

Linking to Email Addresses and Phone Numbers

You can create a link that opens the visitor's email program by using mailto: in the href:

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

Similarly, you can link to a phone number using tel:, which is useful on mobile devices:

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

On a phone, clicking a tel: link opens the dialer with the number already filled in. On a desktop, it may do nothing or open the default email or phone app, depending on what the visitor has installed.

Styling Links with CSS

By default, links appear in blue and underlined. You can change their appearance using CSS. Common properties include color for the text color, text-decoration to remove or change the underline, and background-color for a background:

a { color: green; text-decoration: none; }

You can also style links differently depending on their state. a:hover applies styles when the mouse hovers over the link, a:visited styles links the visitor has already clicked, and a:active applies while the link is being clicked. For example:

a:hover { color: red; text-decoration: underline; }

Common Mistakes and How to Fix Them

The most frequent error is forgetting https:// on external links. If you write <a href="example.com"> without the protocol, the browser treats it as a relative path and looks for a folder called example.com on your own site. Always include the full address for external links.

Another common issue is using spaces or special characters in file names for internal links. If your file is called my page.html with a space, the link breaks. Use hyphens or underscores instead: my-page.html. Also check that the file path is correct — if you write href="pages/about.html" but the file is actually in a folder called content, the link will not work.

Frequently Asked Questions

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

Yes. Wrap the <img> tag with the <a> tag: <a href="page.html"><img src="image.jpg"></a>. The entire image becomes clickable and acts as a link.

What is the difference between href="#" and href=""?

href="#" links to the top of the current page, while href="" reloads the page. Neither is usually what you want. If you need a clickable element that does not navigate anywhere, use a <button> tag instead and control its behavior with JavaScript.

How do I link to a PDF or downloadable file?

Use the same <a> tag with the file path in the href: <a href="documents/guide.pdf">Download our guide</a>. The browser will either display the file or prompt the visitor to download it, depending on their browser settings.

Why does my link not work when I test it locally?

If you are opening an HTML file directly from your computer (the address bar shows file:///), relative links may not work correctly in all browsers. Upload your files to a web server or use a local development server to test links properly.