A link in HTML is made with the <a> tag, and it needs two things: the destination address and the text a visitor clicks

The simplest link looks like this: <a href="https://example.com">Click here</a>. The href attribute holds the web address. The text between the opening and closing tags is what shows up on the page — that is what visitors see and click on.

When you save and open that HTML in a browser, "Click here" appears as blue underlined text. Click it, and the browser goes to example.com. That is the whole mechanism. Everything else is variation on where the link points and what text labels it.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute, the clickable text, and a closing </a> tag.
  • The href can be a full web address (https://example.com), a relative path to another file on your site (/about.html), or an anchor to a section on the same page (#section-name).
  • Descriptive link text like "Read our privacy policy" is better for visitors and search engines than generic text like "Click here".
  • You can link to email addresses, phone numbers, and downloadable files by changing what goes in the href attribute.

Three types of links: external, internal, and anchors

External links point to websites outside your own. They always start with http:// or https://. Example: <a href="https://www.wikipedia.org">Learn more on Wikipedia</a>. The browser knows to open a new destination.

Internal links point to other pages on your own website. They use a relative path — just the filename or folder structure, no domain name. If you have a file called about.html in the same folder, you write <a href="about.html">About us</a>. If about.html is in a subfolder called pages, you write <a href="pages/about.html">About us</a>.

Anchor links jump to a specific section on the same page or another page. They use the # symbol followed by an id. If you have a heading with id="contact", you link to it with <a href="#contact">Go to contact section</a>. On another page, you would write <a href="about.html#contact">Contact us</a>.

Link text matters more than you might think

The words you put between <a> and </a> should describe where the link goes. "Read our privacy policy" tells a visitor what they will find. "Click here" does not. Search engines also read link text to understand what a page is about, so descriptive text helps your site show up in the right searches.

Avoid link text that says "link" or "website" or repeats the URL itself. Do not write <a href="https://example.com/privacy">https://example.com/privacy</a> when you could write <a href="https://example.com/privacy">Privacy policy</a>. The second one is clearer for everyone reading the page.

Linking to email addresses and phone numbers

To create a link that opens the visitor's email program, use mailto: in the href. Example: <a href="mailto:contact@example.com">Email us</a>. When someone clicks it, their default email app opens with the address already filled in.

For phone numbers, use tel:. Example: <a href="tel:+1-555-123-4567">Call us</a>. On a mobile phone, this opens the phone dialer. On a desktop, it might do nothing or open a calling app if one is installed. Always include the plus sign and country code for international numbers.

You can also add a subject line to email links. <a href="mailto:contact@example.com?subject=Question about pricing">Ask about pricing</a> will fill in the subject line automatically when the email opens.

Opening links in a new tab or window

By default, a link opens in the same tab or window. If you want it to open in a new tab instead, add target="_blank" to the tag. Example: <a href="https://example.com" target="_blank">Visit example.com</a>.

Use this sparingly. Opening a new tab without warning can frustrate visitors who expected to stay on your page. It is useful for external links that you want visitors to explore without leaving your site, but internal links should usually open in the same tab.

Linking to downloadable files

To let visitors read a PDF, Word document, image, or other file, point the href to the file itself. Example: <a href="documents/guide.pdf">read our guide</a>. The browser will either open the file or prompt the visitor to save it, depending on the file type and browser settings.

Make the link text clear about what is being downloaded and what format it is in. "read our guide (PDF)" is better than "read" because it tells visitors what to expect before they click.

Common mistakes and how to fix them

Forgetting the closing </a> tag is the most common error. Everything after an unclosed tag becomes a link, which breaks your page layout. Always check that every opening tag has a closing tag.

Typing the href wrong — misspelling the domain, forgetting https://, or using backslashes instead of forward slashes in file paths — makes the link go nowhere. Test every link you create by clicking it in your browser.

Using target="_blank" on every link annoys visitors. Reserve it for external links where you specifically want people to stay on your site while exploring elsewhere.

Frequently Asked Questions

What is the difference between href and src?

href is used in the <a> tag to link to another page or resource. src is used in tags like <img> and <script> to load an image or code file directly into the page. They do different jobs.

Can I style a link with CSS?

Yes. By default, links are blue and underlined, but you can change the color, remove the underline, add a background, or change the appearance when someone hovers over it. This is done in your CSS file, not in the HTML tag itself.

How do I make a link that does not go anywhere?

Use <a href="#">Text</a>. The # by itself does nothing. This is sometimes used when JavaScript will handle the click instead, but it is better to use a <button> tag if the element is not actually a link.

What does rel="noopener noreferrer" do?

When you use target="_blank", add rel="noopener noreferrer" to the tag for security. This prevents the new page from accessing information about your page. Example: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>.

Can I link to a specific part of a PDF?

Some browsers support linking to a page number in a PDF using #page=3. Example: <a href="document.pdf#page=3">Jump to page 3</a>. Support varies, so test it in your target browsers first.