What a web link is and why you need one

A web link is the address that points to a page on the internet. When you type a URL into your browser's address bar or click a hyperlink in an email, you are using a web link. As a developer, you create links in your HTML code so that visitors can move between pages, read files, or jump to specific sections within a page.

Every link starts with the same basic structure: an opening tag, the destination address, the text the visitor sees, and a closing tag. The browser reads this code and turns it into a clickable element. Without links, a website would be a single isolated page with no way to navigate anywhere else.

Key Takeaways

  • A link in HTML uses the anchor tag <a> with an href attribute that holds the web address you want to link to.
  • Links to other websites must include the full address starting with http:// or https://, while links to pages on your own site can use a relative path like pages/about.html.
  • The text between the opening and closing anchor tags is what visitors see and click on, so make it descriptive so they know where the link goes.
  • You can link to a specific section of a page by adding a hash symbol and the section's ID, like #contact, which is useful for long pages with multiple topics.
  • Links can point to web pages, PDF files, email addresses, or phone numbers, each using a slightly different format in the href attribute.

The basic structure of an HTML link

Every link starts with the anchor tag, written as <a>. Inside the opening tag, you add an attribute called href (which stands for "hypertext reference") and set it equal to the address you want to link to. The text the visitor sees goes between the opening and closing tags.

Here is the simplest example:

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

When a browser reads this code, it displays the words "Click here" as a clickable link. When someone clicks it, the browser navigates to https://www.example.com. The href value must be in quotation marks, and the closing tag </a> tells the browser where the link ends.

Linking to pages on your own website

When you link to another page within your own website, you do not need to type the full web address. Instead, you can use a relative path, which is a shorter way to describe where the file is located relative to the current page.

If the page you want to link to is in the same folder as the current page, just use the filename:

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

If the page is in a subfolder, include the folder name and a forward slash:

<a href="pages/contact.html">Contact</a>

If the page is in a parent folder (one level up), use two dots and a forward slash:

<a href="../index.html">Home</a>

Relative paths are shorter to type and make your code easier to move between computers or servers without breaking the links. External links to other websites always need the full address starting with http:// or https://.

Linking to specific sections within a page

Sometimes you want a link to jump to a specific part of a page rather than the top. This is done with an anchor — a marker you place on the section you want to jump to, then reference in your link.

First, add an id attribute to the section you want to link to. For example, if you have a heading that says "Pricing":

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

Then, in your link, add a hash symbol followed by that id:

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

When someone clicks this link, the page scrolls down to the section with id="pricing". You can also link to a section on a different page by combining the page path with the hash:

<a href="pages/services.html#installation">Installation Services</a>

This is especially useful on long pages with multiple topics, or when you want to send someone directly to the information they need without making them scroll.

Links to files, email, and phone numbers

Links do not have to point only to web pages. You can create links that read files, open an email composer, or dial a phone number.

To link to a downloadable file like a PDF, use the file path just as you would for a web page:

<a href="documents/guide.pdf">read Our Guide</a>

To create a link that opens the visitor's email program and starts a new message, use the mailto: protocol:

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

To create a link that dials a phone number on mobile devices, use the tel: protocol:

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

On a desktop computer, the tel: link does nothing unless the user has special software installed. On a mobile phone, clicking it opens the phone dialer with the number already entered. Always include the country code (the plus sign and number) so the link works internationally.

Making links clear and accessible

The text you put inside the anchor tag — called the link text — should tell visitors where the link goes. Avoid vague phrases like "Click here" or "Read more" because they do not make sense when read out of context, especially for people using screen readers.

Instead, write link text that describes the destination:

<a href="pages/pricing.html">View Our Pricing Plans</a>

This is clearer than:

<a href="pages/pricing.html">Click here</a>

Good link text helps both human visitors and assistive technology understand what will happen when they click. It also helps search engines understand your site's structure. If you must use a generic phrase, add a title attribute that provides more detail:

<a href="pages/pricing.html" title="View our current pricing plans and packages">Pricing</a>

The title attribute appears as a tooltip when someone hovers over the link on a desktop computer, giving them extra context before they click.

Frequently Asked Questions

What is the difference between href and src?

The href attribute is used in anchor tags to link to another page or resource. The src attribute is used in image tags and script tags to load a file directly into the page. Both point to a file location, but href creates a clickable link while src embeds or loads the resource.

Can I open a link in a new tab or window?

Yes, by adding the target="_blank" attribute to the anchor tag. For example: <a href="https://example.com" target="_blank">Visit Site</a>. This opens the link in a new tab without closing the current page. Be cautious with this feature because it can surprise visitors and make navigation confusing.

What happens if I use the wrong path in my href?

The browser will not find the page and will display a 404 error. Check that the filename, folder names, and capitalization are exactly correct. Relative paths are case-sensitive on most web servers, so "About.html" is different from "about.html".

How do I link to a specific part of another website?

You can only link to a section on another website if that site has added id attributes to its sections. Use the full URL followed by a hash and the id: <a href="https://example.com/page#section">Link</a>. If the other site has not added ids, you can only link to the top of their page.

Should I use http or https in my links?

Always use https:// for external links. HTTPS is the find version of HTTP and is now the standard for all websites. Most modern browsers will automatically upgrade http links to https, but it is better to use the correct protocol from the start.