The basic HTML tag for linking

A link to another website uses the anchor tag, written as <a> in HTML. The tag wraps around the text you want to be clickable, 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 full web address you want to link to. Browsers typically display link text in blue and underlined by default.

Key Takeaways

  • Every link needs an anchor tag with an href attribute containing the full web address, starting with https:// or http://.
  • The text between the opening and closing anchor tags is what appears clickable on your page — make it descriptive so readers know where the link goes.
  • Links to external websites should use the full address including the domain name, while links to pages on your own site can use relative paths like /about or pages/contact.html.
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.
  • Search engines and screen readers rely on descriptive link text, so avoid generic phrases like "click here" in favor of text that describes the destination.

Writing the href attribute correctly

The href attribute must contain the complete web address. If you are linking to an external website, always include the protocol — either https:// or http:// at the start. Without it, the browser treats the address as a relative path on your own site and the link breaks.

For example, <a href="https://www.wikipedia.org">Wikipedia</a> works correctly. Writing <a href="www.wikipedia.org">Wikipedia</a> without the https:// will not work as intended.

If you are linking to a page on your own website, you can use a shorter path. <a href="/about">About Us</a> links to a page in your site's root directory. <a href="pages/contact.html">Contact</a> links to a file inside a pages folder relative to the current page's location.

Making links open in a new tab

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

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

This is useful when linking to external sites, because it keeps your own page open in the original tab. Many websites use this approach for outbound links so visitors do not lose their place.

Writing link text that works for readers and search engines

The text inside the anchor tag should describe where the link goes. "Click here" or "Read more" tells the reader nothing about the destination. "Wikipedia article on photosynthesis" or "Our pricing page" is much clearer.

Search engines use link text to understand what a page is about, so descriptive text also helps your site rank better in search results. Screen readers — software that reads web pages aloud for people with vision disabilities — announce the link text, so descriptive wording makes your site more usable for everyone.

If you must use generic text, you can add a title attribute that displays a tooltip when someone hovers over the link: <a href="/products" title="See all our products">Click here</a>

Linking to specific sections within a page

You can link directly to a heading or section on another page using an anchor — a marker placed at that location. First, add an id attribute to the heading you want to link to: <h2 id="pricing">Pricing</h2>

Then link to it by adding a hash symbol and the id name to the href: <a href="https://www.example.com/page#pricing">See our pricing</a>

This works on your own site too. <a href="#pricing">Jump to pricing</a> links to the pricing section on the same page. The hash tells the browser to scroll to the element with that id.

Common mistakes to avoid

Forgetting the protocol is the most frequent error — href="example.com" breaks, but href="https://example.com" works. Spaces in the href attribute also cause problems, so always check that your web address has no extra spaces.

Using target="_blank" on every link can frustrate users who prefer to control whether a new tab opens. Reserve it for external links where it makes sense to preserve the user's place on your site.

Avoid link text that does not describe the destination. "Click here" and "Read more" force readers to look at the surrounding text to understand what they are clicking, and they provide no context for search engines or screen readers.

Styling links with CSS

By default, browsers show links in blue with an underline. You can change this appearance using CSS. Common customizations include changing the color, removing the underline, and adding effects when someone hovers over the link.

A basic example: a { color: #0066cc; text-decoration: none; } makes all links a specific shade of blue without an underline. a:hover { color: #ff0000; } changes the color to red when someone hovers their mouse over the link.

Keep in mind that users expect links to look different from regular text, so if you remove the underline, use a distinct color or add a hover effect so the link is still recognizable.

Frequently Asked Questions

Do I need to include www in the web address?

No. Most websites work with or without www at the start. https://example.com and https://www.example.com usually point to the same place. If you are unsure which version a site uses, copy the address directly from the browser's address bar.

What is the difference between http and https?

https is the secure version of the protocol and encrypts data between the browser and the website. Always use https when linking to modern websites. Most sites have switched to https, and browsers warn users when a site uses the older http.

Can I link to a PDF or other file type?

Yes. Use the full file path in the href: <a href="https://example.com/document.pdf">Download PDF</a> Most browsers will open the file in a new tab or prompt the user to download it, depending on their settings.

How do I link to an email address?

Use mailto: before the email address: <a href="mailto:contact@example.com">Email us</a> Clicking this link opens the user's default email program with the address already filled in.

Can I use an image as a link?

Yes. Wrap an <img> tag inside the anchor tag: <a href="https://example.com"><img src="image.jpg" alt="description"></a> The image becomes clickable and links to the destination in the href attribute.