How to Embed a Link in HTML

The basic HTML link tag and what each part does

A link in HTML uses the anchor tag, written as <a>. The tag has two essential parts: the href attribute, which tells the browser where to go, and the link text, which is what the reader sees and clicks.

Here is the simplest working link:

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

When a browser displays this, the reader sees the words "Click here" in blue, underlined text. When they click it, the browser navigates to https://example.com. The href value can be a full web address (called an absolute URL) or a relative path to another file on the same website.

Key Takeaways

Every link needs an opening <a> tag with an href attribute, the link text, and a closing </a> tag.
Use absolute URLs (starting with http:// or https://) to link to other websites, and relative paths to link to pages within your own site.
The target="_blank" attribute opens the link in a new browser tab instead of replacing the current page.
Link text should describe where the link goes or what happens when clicked, not just say "click here".
You can wrap images, buttons, or other HTML elements inside anchor tags to make them clickable.

Absolute URLs versus relative paths

An absolute URL is the complete web address, starting with the protocol (http:// or https://). Use absolute URLs when linking to other websites or when you want the link to work the same way no matter where the page is located.

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

A relative path is a shorter address that describes where a file is located relative to the current page. If your website has a folder called "about" with a file called "team.html" inside it, and you are linking from the homepage, you would write:

Relative paths are useful because they keep working if you move your entire website to a different domain. They are also shorter and easier to read in your code. Use them for links within your own site and absolute URLs for links to other websites.

Opening links in a new tab

By default, clicking 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 useful when linking to external websites, so the reader does not leave your site. Many websites use this for links to social media, news articles, or other resources that are not part of their own content.

You can combine target="_blank" with other attributes. For example, adding rel="noopener noreferrer" is a security best practice when opening external links in a new tab:

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

Making images and buttons clickable

You are not limited to linking text. You can wrap an image inside an anchor tag to make the image itself clickable:

When a reader clicks the image, they navigate to the URL in the href attribute. This is how many website logos work — clicking the logo takes you back to the homepage.

You can also wrap a button element inside an anchor tag, though using CSS or JavaScript to style a link as a button is more common in modern web design. The important thing is that any HTML element placed between the opening <a> and closing </a> tags becomes clickable.

Linking to sections within the same page

You can link to a specific section of a page using an anchor and an ID. First, give an element an ID attribute:

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

Then link to that section using a hash symbol followed by the ID:

<a href="#contact">Jump to contact section</a>

When the reader clicks this link, the page scrolls to the element with id="contact". You can also link to a section on another page by combining the page path with the ID:

This technique is useful for long pages with a table of contents, or for linking directly to a specific part of another page.

Writing link text that describes the destination

The text between the opening and closing anchor tags should tell the reader where the link goes or what happens when clicked. Avoid generic phrases like "click here" or "read more" without context.

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

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

Descriptive link text helps readers understand what to expect before they click, and it also helps search engines understand what your pages are about. People who use screen readers benefit especially from clear link text, because screen readers often read links separately from the surrounding text.

Common mistakes when embedding links

The most frequent error is forgetting the closing </a> tag. Without it, everything after the opening tag becomes part of the link, which breaks the page layout and makes unintended content clickable.

Another mistake is using the wrong quote marks. HTML requires straight quotes ("), not curly or smart quotes. If you copy code from a word processor like Microsoft Word, it may convert straight quotes to curly ones, which breaks the code.

A third common issue is mixing up the href attribute with other attributes. The href always comes first and holds the destination URL. Other attributes like target, class, or id come after.

Finally, be careful with relative paths. If you move a file to a different folder, relative links may break. Test your links after reorganizing your site structure, or use absolute URLs if you are unsure.

Frequently Asked Questions

Can I link to a PDF or a downloadable file?

Yes. Use the same anchor tag syntax, but point the href to the file path instead of a web page. For example, <a href="documents/resume.pdf">read my resume</a> works the same way as linking to an HTML page. The browser will either open the file or prompt the user to read it, depending on their browser settings.

What does the rel attribute do?

The rel attribute describes the relationship between the current page and the linked page. rel="noopener noreferrer" is a security measure that prevents the linked page from accessing information about your site. rel="nofollow" tells search engines not to count this link when ranking pages. Use rel="noopener noreferrer" for external links opened in new tabs.

How do I link to an email address?

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

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 a background, or create hover effects using CSS. For example, a { color: blue; text-decoration: none; } removes the underline from all links and sets their color to blue.

What is the difference between href and src?

href is used in anchor tags to link to another page or resource. src is used in image and script tags to load a file into the current page. Links navigate away; images and scripts load content into the page you are already on.

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.