A hyperlink is an HTML tag that connects one page to another

A hyperlink — the clickable text or image that takes you somewhere else on the web — is built with the <a> tag. The tag has two parts: the text a visitor sees and clicks on, and the destination address hidden inside the tag itself. You write it like this:

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

When a browser reads this code, it shows the visitor the words "Click here" in blue and underlined. When they click it, the browser goes to https://example.com. The href attribute is what tells the browser where to go — href stands for "hypertext reference."

Key Takeaways

  • Every hyperlink uses the <a> tag with an href attribute that contains the destination web address.
  • The text between the opening <a> and closing </a> tags is what the visitor sees and clicks on.
  • You can link to external websites, pages within your own site, email addresses, or specific sections of a page using different href formats.
  • The target="_blank" attribute opens a link in a new tab instead of replacing the current page.

Writing the basic link structure

The <a> tag always needs an opening tag and a closing tag, with the clickable content between them. The opening tag contains the href attribute with the destination address in quotation marks.

Here are three real examples:

  • <a href="https://www.wikipedia.org">Learn more on Wikipedia</a> — links to an external website
  • <a href="about.html">About Us</a> — links to another page in the same folder
  • <a href="mailto:contact@example.com">Email us</a> — opens the visitor's email program

The text between the tags is what appears on the page. Make it descriptive so visitors know where the link goes before they click it. "Click here" tells them nothing; "Read our privacy policy" tells them exactly what they will find.

Linking to pages on your own website

When you link to another page within your own site, you do not need the full web address. You can use a relative path — just the filename or folder structure relative to where the current page is.

If your site has this structure:

  • index.html (your home page)
  • about.html (in the same folder)
  • blog/post1.html (in a subfolder called blog)

From index.html, you would write <a href="about.html">About</a> to link to the about page. To link to post1.html from the home page, you would write <a href="blog/post1.html">Read our first post</a>. The browser figures out the full address based on where the current page is located.

Opening links in a new tab

By default, a link replaces the current page when clicked. If you want the link to open in a new tab instead, add the target="_blank" attribute to the opening tag.

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

This is useful when you are linking to an external site and want visitors to stay on your page. Many sites use this for links to social media, news articles, or other resources they do not control. Some visitors find it annoying, so use it only when it makes sense — usually for external links, not for navigation within your own site.

Linking to a specific section of a page

You can link directly to a heading or section within a page using an anchor. First, give the section an id attribute: <h2 id="pricing">Our Pricing</h2>. Then link to it with a hash symbol: <a href="#pricing">Jump to pricing</a>.

To link to a section on a different page, combine the filename with the anchor: <a href="services.html#pricing">See pricing</a>. When the visitor clicks this link, the browser goes to services.html and scrolls down to the element with id="pricing".

This is especially useful on long pages where you want to let visitors jump to the section they care about without scrolling through everything else.

Making links accessible to all visitors

Visitors using screen readers — software that reads web pages aloud — rely on the link text to understand where the link goes. If your link says "Click here" or "Read more," they hear those generic words without context. Instead, write link text that makes sense on its own.

Bad: "We have a privacy policy. <a href="/privacy">Click here</a> to read it."

Good: "<a href="/privacy">Read our privacy policy</a>."

The second version works for everyone — sighted visitors and those using screen readers both know what the link does before they click it. You can also add a title attribute for extra context: <a href="/privacy" title="Our privacy policy">Privacy</a>. The title appears as a tooltip when someone hovers over the link.

Frequently Asked Questions

Can I make an image into a hyperlink?

Yes. Put the <img> tag inside the <a> tag instead of text: <a href="home.html"><img src="logo.png" alt="Home"></a>. When visitors click the image, they go to the destination in the href. Always include alt text on the image so screen reader users know what the link does.

What is the difference between href and src?

href is used in the <a> tag to point to a destination you want to link to. src is used in the <img> tag to point to an image file you want to display. They do the same job — pointing to a file — but in different tags for different purposes.

Do I need to include https:// when linking to external websites?

Yes, for external websites. Always use the full address: <a href="https://example.com">. Without it, the browser treats it as a relative path and looks for a folder called "example.com" on your own server. For pages within your own site, you do not need https:// or the domain name.

What happens if the destination page no longer exists?

The browser will show a 404 error page. The link itself is still valid HTML — the problem is that the destination is gone. Check your links regularly, especially external ones, because websites move or delete pages over time.