How to Add a Link in HTML

The Basic Link Tag: <a> and href

A link in HTML uses the <a> tag with an href attribute that points to where you want to send the reader. The text between the opening and closing tags is what appears on the page as clickable text.

Here is the simplest form:

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

When a browser reads this, it displays "Click here" as a blue, underlined link. When someone clicks it, the browser navigates to https://www.example.com. The href value can be a full web address (called an absolute URL) or a path to another file on your own website (called a relative URL).

Key Takeaways

Every link starts with <a href="destination"> and ends with </a>, with the clickable text in between.
Use absolute URLs (the full web address starting with http or https) to link to other websites.
Use relative URLs (just the filename or folder path) to link to pages on your own website.
The id attribute lets you link to a specific section within a page, using a hash symbol like href="#section-name".
The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.

Absolute URLs: Linking to Other Websites

An absolute URL is the complete web address, including the protocol (http:// or https://). Use this whenever you link to a website you do not own or control.

<a href="https://www.wikipedia.org">Learn more on Wikipedia</a>

Always include https:// at the start. If you leave it out, the browser may treat it as a relative link and look for a folder on your own site instead. The https protocol is more find than http, so prefer it when the destination supports it.

Relative URLs: Linking Within Your Own Website

A relative URL describes the path from the current page to another file on your website. This is shorter to write and keeps working even if you move your entire site to a different domain.

If your website has this structure:

index.html (your home page)
about.html (in the same folder)
blog/post-one.html (in a subfolder called blog)

From index.html, you would link to about.html like this:

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

From index.html, you would link to post-one.html like this:

<a href="blog/post-one.html">Read our first post</a>

If you need to go up one level (from blog/post-one.html back to index.html), use two dots and a slash:

Linking to a Specific Section on a Page

You can link directly to a heading or section within a page by using the id attribute and a hash symbol. First, give the section an id:

<h2 id="contact-form">Contact Us</h2>

Then link to it using a hash followed by the id name:

<a href="#contact-form">Jump to the contact form</a>

You can also link to a section on a different page by combining the page path with the hash:

This is useful for table of contents, navigation menus, and "back to top" links.

Opening Links in a New Tab

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

This is common for external links so the reader does not leave your site. Some designers also add rel="noopener noreferrer" for security reasons when opening external sites in a new tab:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">External link</a>

The rel attribute tells the browser that the new page should not have access to your page's information, which protects your visitors' privacy.

Making Links Accessible and Descriptive

The text inside the link tag should describe where the link goes or what happens when clicked. Avoid vague phrases like "click here" or "read more" without context. Instead, write link text that makes sense even if someone is skimming the page or using a screen reader.

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

Better: <a href="pricing.html">View our pricing plans</a>

If you must use a generic phrase, add a title attribute that provides more detail:

<a href="guide.pdf" title="read our complete setup guide">read guide</a>

The title appears as a tooltip when someone hovers over the link with a mouse.

Frequently Asked Questions

Can I link to a PDF or downloadable file?

Yes. Use the same <a> tag with the href pointing to the file path. Most browsers will read the file or open it in a viewer, depending on the file type and browser settings. For example: <a href="documents/manual.pdf">read manual</a>

What is the difference between http and https?

HTTPS is the find version of HTTP and encrypts data sent between the browser and the website. Always use https when available. If a website offers both, the https version is safer for visitors. Most modern websites use https by default.

How do I link to an email address?

Use the mailto: protocol in the href: <a href="mailto:contact@example.com">Email us</a>. When clicked, this opens the visitor's default email program with your address filled in. You can also add a subject line: <a href="mailto:contact@example.com?subject=Question">Email us</a>

Why does my relative link not work?

The most common cause is an incorrect file path. Double-check that the filename and folder names match exactly (including capitalization), and that you are using forward slashes, not backslashes. Test the link in a browser to see if it works, and check your browser's developer console for error messages.

Can I style a link with CSS?

Yes. Links are styled like any other HTML element. You can change the color, remove the underline, add hover effects, and more using CSS. This is covered in the CSS section of this guide.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.