What a web link is and why you need the right syntax

A web link is a piece of HTML code that lets someone click text or an image and jump to another page. The code itself is called an anchor tag, and it looks like this: <a href="https://example.com">Click here</a>. The part that says href="https://example.com" tells the browser where to go. The text between <a> and </a> is what the reader actually sees and clicks.

You need the correct syntax — the exact spelling and punctuation — because browsers read HTML strictly. A missing quotation mark or a typo in the web address will break the link. The browser will either show the link as plain text that does nothing, or it will try to navigate somewhere wrong. Testing your links before you publish is the only way to catch these mistakes.

Key Takeaways

  • The basic link code is <a href="web-address">visible text</a>, where the web address goes inside the quotation marks after href=.
  • Web addresses must start with https:// or http:// for external links, but internal links to pages on your own site can use just the file path.
  • The visible text between the opening and closing tags should tell the reader what they will find, not just say "click here".
  • You can link to images, PDFs, email addresses, and phone numbers by changing what goes inside the href attribute.
  • Test every link in a real browser before publishing, because a typo in the address or missing punctuation will silently break it.

Creating a basic link to another website

Start with the anchor tag structure. Type <a href="https://example.com">Click here</a>, but replace https://example.com with the actual web address you want to link to. The address must start with https:// or http:// — this tells the browser it is an external link on the internet.

Replace the text "Click here" with something that describes where the link goes. For example, if you are linking to a recipe site, write <a href="https://recipes.example.com">Find cookie recipes</a>. This is better for readers because they know what to expect before they click, and it is also better for search engines, which use link text to understand what a page is about.

Copy the entire code — including the angle brackets and quotation marks — and paste it into your HTML file where you want the link to appear. Save the file, open it in a browser, and click the link to make sure it works. If the browser shows an error page, check that the web address is spelled correctly and includes the https:// part.

Linking to pages on your own website

Links to pages within your own site work differently because you do not need the full web address. Instead, you use the file path — the location of the file relative to the page you are on.

If both pages are in the same folder, the code is straightforward: <a href="about.html">About us</a>. If the page you are linking to is in a subfolder called "pages", write <a href="pages/about.html">About us</a>. If you need to go up one level to a parent folder, use <a href="../about.html">About us</a>. The two dots mean "go up one folder level".

Internal links are faster for readers because the browser does not have to go out to the internet — it just loads a file from your own server. They also keep working even if your site moves to a different web address, as long as you keep the folder structure the same. Always test internal links carefully, because a wrong file path will show a "404 not found" error.

Linking to images, files, and email addresses

You can link to almost anything by changing what goes in the href attribute. To link to a PDF file, use <a href="document.pdf">read the guide</a>. To link to an image, use <a href="photo.jpg">View the full photo</a>. The browser will open or read the file depending on what type it is and what the reader's browser settings are.

To create a link that opens the reader's email program and starts a new message, use <a href="mailto:name@example.com">Email us</a>. Replace name@example.com with the actual email address. You can also add a subject line: <a href="mailto:name@example.com?subject=Question about pricing">Email us</a>.

To link to a phone number so mobile readers can tap to call, use <a href="tel:+1-555-123-4567">Call us</a>. Include the plus sign and country code, then the number with hyphens. On a phone, this link will open the dialer app; on a desktop, it usually does nothing, which is fine.

Making links open in a new tab or window

By default, a link opens in the same tab or window, replacing the page the reader is on. If you want the link to open in a new tab instead, add target="_blank" to the anchor tag: <a href="https://example.com" target="_blank">Visit the site</a>.

Use this sparingly. Opening a new tab is useful when you are linking to an external site and you want the reader to stay on your page, but it can also be annoying if you do it too much. A good rule is to open external links in a new tab, but keep internal links in the same tab so the reader can use the back button normally.

Some developers also add rel="noopener noreferrer" for security when using target="_blank": <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit the site</a>. This prevents the linked page from accessing certain information about your site. It is a small safety measure that costs nothing.

Testing your links before publishing

Open your HTML file in a real browser — not just in your code editor — and click every link. Make sure each one goes to the right place. If a link does not work, the browser will show an error page or nothing will happen. Go back to your code and check three things: the web address is spelled correctly, all quotation marks are in place, and the file path is right.

A common mistake is forgetting the quotation marks around the address: <a href=https://example.com> will not work. Another is typing the address without https:// for external links. If you link to a file on your own site, make sure the file actually exists in the folder you specified.

If you are working on a live website, test links in multiple browsers — Chrome, Firefox, Safari, and Edge — because they sometimes behave slightly differently. Also test on a phone if your site is meant to be mobile-friendly. A link that works on desktop might not work on mobile if the file path is wrong or the address is too long.

Frequently Asked Questions

What is the difference between href and src?

href is used in anchor tags to link to another page or file. src is used in image tags to load an image into the page. They do the same job — pointing to a file — but they are used in different HTML elements.

Can I link to a specific part of a page?

Yes, using an anchor with an ID. First, add an ID to the element you want to link to: <h2 id="section-two">Section Two</h2>. Then link to it with <a href="#section-two">Jump to section two</a>. The hash symbol tells the browser to look for an ID on the same page.

Why does my link show as plain text instead of a clickable link?

You are probably missing the opening or closing tag, or the quotation marks around the address. Check that your code has <a href="address"> at the start and </a> at the end, with no missing punctuation. Save the file and refresh the browser.

Is it better to use relative or absolute paths for internal links?

Relative paths (like pages/about.html) are better for internal links because they keep working if you move your site to a different web address. Absolute paths (the full web address) work too, but they break if your domain changes.

How do I make a link to a PDF open in a new tab?

Use both attributes: <a href="document.pdf" target="_blank">read the PDF</a>. The browser will open the PDF in a new tab instead of replacing your page.