The Basic Hyperlink Syntax

A hyperlink in HTML uses the <a> tag, short for "anchor". The simplest hyperlink has two parts: the tag itself and the href attribute, which tells the browser where to go when someone clicks the link.

Here is the structure:

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

The text between the opening and closing tags — in this case "Click here" — is what appears on the page and what the user clicks. The href attribute contains the destination URL. When you save this code and open it in a browser, you will see underlined text that changes color when you hover over it.

Key Takeaways

  • Every hyperlink starts with <a href="URL"> and ends with </a>, with the clickable text in between.
  • The href attribute can point to a full web address like https://example.com, a file on your own site like about.html, or an email address using mailto:.
  • You can link to a specific section of a page by adding a hash and an id, like href="#section2", but that id must exist on the target page.
  • The target attribute with the value _blank opens the link in a new tab instead of replacing the current page.

Linking to External Websites

When you want to link to another website, use the full web address in the href attribute, starting with http:// or https://. The https:// version is more secure and is now the standard.

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Without the https:// part, the browser will treat it as a relative link and look for a file on your own website instead. This is a common mistake that results in a broken link.

Linking to Pages on Your Own Site

When linking to another page within your own website, you do not need the full web address. Instead, use the filename or the path to the file relative to your current page.

If you have a file called about.html in the same folder as your current page, the link looks like this:

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

If the file is in a subfolder called pages, use:

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

If you need to go up one level to a parent folder, use ../:

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

Opening Links in a New Tab

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

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

This is useful when linking to external sites, so the user does not lose their place on your page. Many sites use this approach for outgoing links.

Creating Email Links

You can create a link that opens the user's email client and starts a new message. Use mailto: followed by the email address:

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

When someone clicks this link, their default email program opens with the "To" field already filled in. You can also add a subject line by including ?subject=:

<a href="mailto:contact@example.com?subject=Question about your site">Email us</a>

If you want to add a message body as well, use &body= after the subject. Replace spaces with %20.

Linking to a Specific Section on a Page

You can link directly to a specific part of a page using an anchor. First, add an id attribute to the element you want to link to:

<h2 id="section2">My Second Section</h2>

Then create a link to that id by adding a hash symbol followed by the id name:

<a href="#section2">Jump to Section 2</a>

This works on the same page or on a different page. To link to a section on another page, combine the filename with the id:

<a href="about.html#contact">Contact section</a>

The id you reference must exist on the target page, or the link will not jump to anything.

Styling Links with CSS

By default, links appear blue and underlined, and they turn purple after you visit them. You can change this appearance using CSS. The most common approach is to target the <a> tag directly:

a { color: green; text-decoration: none; }

You can also style links differently depending on their state. Use :hover to change the appearance when someone hovers over the link, and :visited to style links the user has already clicked:

a:hover { color: red; } a:visited { color: gray; }

Common styling changes include removing the underline with text-decoration: none, changing the color, adding a background, or changing the font weight.

Frequently Asked Questions

What is the difference between href and src?

The href attribute is used in the <a> tag to specify where a link goes. The src attribute is used in tags like <img> and <script> to specify where to load a file from. They serve different purposes in different tags.

Can I use an image as a link?

Yes. Wrap the <img> tag inside the <a> tag: <a href="page.html"><img src="image.jpg"></a>. When someone clicks the image, they will be taken to the URL in the href attribute.

Why is my link not working?

Check that the href value is correct. For external sites, make sure you included https://. For files on your own site, verify the filename and folder path are spelled correctly and match the actual file location. Broken links are usually caused by typos or incorrect paths.

How do I link to a PDF file?

Use the same syntax as linking to any other file: <a href="document.pdf">Download PDF</a>. When someone clicks it, the browser will either open the PDF in a new tab or prompt them to download it, depending on their browser settings.