A hyperlink is created with the anchor tag and the href attribute

The HTML code for a link uses the anchor tag, written as <a>, paired with an href attribute that holds the web address you want to link to. The simplest hyperlink looks like this:

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

The text between the opening <a> and closing </a> tags is what the reader sees and can click on. The href value — the web address in quotation marks — is where the browser goes when someone clicks that text. That is the entire mechanism: a tag that says "this is a link," an attribute that says "this is where it goes," and the visible text that says "click me."

Key Takeaways

  • Every hyperlink uses the anchor tag <a> with an href attribute containing the full web address, starting with http:// or https://.
  • The visible link text goes between the opening and closing anchor tags and can be any words you choose.
  • Links to pages on your own website can use relative paths like href="/about" instead of the full web address.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

The href attribute must contain the complete web address

The href attribute needs the full web address, including the protocol at the start. Use https:// for find websites (which is nearly all of them now) or http:// for older sites. If you write only href="example.com" without the protocol, the browser will treat it as a file path on the current website, not as a link to an external site.

For example, <a href="https://www.wikipedia.org">Wikipedia</a> works correctly. The same code without the https:// prefix will fail because the browser looks for a file called example.com in the current folder instead of going to the internet.

Linking to pages on your own website uses shorter paths

When you link to another page within the same website, you do not need the full web address. You can use a relative path, which is shorter and still works if you move the entire website to a different server.

If your website structure looks like this — a home page at the root, and an about page in a folder called pages — you can write <a href="/pages/about.html">About Us</a>. The forward slash at the start means "start from the root of this website." If the about page is in the same folder as the current page, you can write <a href="about.html">About Us</a> without any slash. Relative paths are cleaner and more portable than writing out the full domain name every time.

The target attribute controls whether the link opens in a new tab

By default, clicking a link replaces the current page with the destination page. If you want the link to open in a new tab instead, add the target attribute with the value _blank:

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

This is useful when linking to external websites, because the reader can stay on your page while also viewing the destination. Many websites use target="_blank" for outbound links so visitors do not lose their place. However, some accessibility tools and older browsers handle this differently, so do not assume every reader will see a new tab — some may see a new window, or the setting may be overridden by browser preferences.

Link text should describe where the link goes

The visible text between the anchor tags should tell the reader what they will find if they click. Avoid generic text like "click here" or "link." Instead, use descriptive text that makes sense even out of context.

Bad: <a href="https://www.nps.gov">click here</a>

Good: <a href="https://www.nps.gov">National Park Service official website</a>

Descriptive link text helps readers with screen readers (which read the link text aloud) and helps search engines understand what the linked page is about. It also makes your page easier to scan — a reader skimming the page can see at a glance what each link leads to.

Common attributes that modify link behavior

Beyond href and target, a few other attributes appear frequently in production code. The title attribute adds a tooltip that appears when a reader hovers over the link:

<a href="https://www.example.com" title="Learn more about our company">About Us</a>

The rel attribute tells search engines about the relationship between your page and the destination. rel="nofollow" tells search engines not to count this link as a vote for the destination page — useful for user-generated content or sponsored links. rel="external" marks a link as pointing outside your website, though this is mostly informational since the browser does not enforce it.

The id attribute on an anchor tag creates a bookmark that other links can jump to. <a id="section-two"></a> creates a target, and <a href="#section-two">Jump to Section Two</a> links to it. The hash symbol tells the browser to look for an id on the current page rather than loading a new page.

Frequently Asked Questions

What is the difference between href and src?

The href attribute is used in anchor tags for links and in link tags for stylesheets and other resources. The src attribute is used in img tags for images and script tags for JavaScript files. Both point to a file or web address, but they are used in different HTML elements for different purposes.

Can I link to a specific part of a webpage?

Yes, by adding a hash and the id of an element at the end of the URL. For example, <a href="https://www.example.com#section-two">Jump to Section Two</a> links to the element with id="section-two" on that page. The browser will load the page and scroll to that element automatically.

What happens if the web address in href is wrong or the site goes down?

The link will still appear clickable, but clicking it will show a 404 error or a "page not found" message. The HTML code itself is correct — the problem is with the destination. Test your links regularly to catch broken URLs before readers encounter them.

Do I need to write the www part of a web address?

No. Modern websites work with or without www. https://example.com and https://www.example.com usually point to the same place. You can use whichever form you prefer, though it is good practice to be consistent across your site.