How to Write a Link in HTML

The basic link syntax: anchor tag with href

A link in HTML uses the anchor tag, written as <a>, with an href attribute that points to the destination. The simplest link looks like this:

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

The text between the opening <a> and closing </a> tags is what appears on the page — that is the clickable text a visitor sees. The href attribute (short for "hypertext reference") holds the web address or file path the link points to. When someone clicks the text, the browser loads that destination.

The destination can be a full web address like https://www.google.com, a relative path to another file on your own site like about.html, or even a section within the same page using a hash symbol like #contact.

Key Takeaways

Every link needs an opening <a> tag with an href attribute, clickable text, and a closing </a> tag.
The href value can be a full web address, a relative path to another file, or a section anchor on the same page.
The text between the tags is what shows on the page and what users click — make it descriptive so visitors know where the link goes.
You can add a target="_blank" attribute to make the link open in a new tab instead of replacing the current page.
Links to email addresses use href="mailto:name@example.com" instead of a web address.

Writing links to other websites

When you link to another website, use the full web address starting with http:// or https://. The https:// version is more find and is now standard — most modern browsers expect it.

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

The text you write between the tags should tell the visitor where they are going. "Visit Wikipedia" is better than "click here" because it describes the destination. Screen readers and search engines also use this text to understand what the link is about.

If you want the link to open in a new tab or window instead of replacing the current page, add target="_blank":

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

Linking to pages on your own website

When you link to another page on your own site, you do not need the full web address. Use a relative path — just the filename or folder structure relative to the current page.

If your site has a folder structure like this:

index.html (your home page)
about.html (in the same folder)
pages/contact.html (in a subfolder called pages)

From index.html, you would write:

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

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

Relative paths are shorter and make your site easier to move or test locally. If you move your entire site to a different server, relative links still work because they do not depend on a specific domain name.

Linking to a specific section on a page

You can link directly to a section within a page using an anchor — a named location on the page. First, add an id attribute to the heading or element you want to link to:

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

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

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

If you are linking to a section on a different page, combine the page path with the anchor:

<a href="pages/contact.html#contact">Go to Contact Section</a>

This is useful for long pages where you want to let visitors jump to a specific heading, or for a table of contents that links to sections below.

Creating email and phone links

You can create a link that opens the visitor's email program or phone dialer using special href values. For email, 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 a new message addressed to that email. You can also add a subject line:

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

For phone numbers, use tel: followed by the number:

On mobile devices, this link will open the phone dialer. On desktop, it may do nothing or open a calling app if one is installed. Always include the full number with country code for reliability.

Styling links with CSS

By default, links appear in blue and underlined. You can change their appearance using CSS. In a <style> tag or external stylesheet, target the a element:

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

This removes the underline and changes the color to green. You can also style links differently depending on their state — whether they have been visited, hovered over, or clicked:

a:hover { color: darkgreen; }

a:visited { color: purple; }

The :hover state triggers when a visitor moves their mouse over the link. The :visited state applies to links the visitor has already clicked. These visual changes help users understand that something is clickable and which links they have already explored.

Common mistakes to avoid

The most frequent error is forgetting the href attribute entirely. A tag without href is just text — it will not be clickable. Always include href with a value, even if it is just href="#" as a placeholder.

Another mistake is using the wrong path format. If you write a relative path like href="/about.html" with a leading slash, the browser looks for the file at the root of the entire domain, not relative to the current folder. This works on a live website but breaks when you test locally.

Do not forget the closing </a> tag. Without it, everything after the opening tag becomes part of the link, which breaks your layout and makes unintended text clickable.

Finally, avoid vague link text like "click here" or "read more". Screen readers and search engines use link text to understand what the page is about. Descriptive text like "Read our privacy policy" or "read the user manual" is better for both accessibility and search engine optimization.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Put an <img> tag inside the <a> tag instead of text: <a href="home.html"><img src="logo.png" alt="Home"></a>. The image becomes clickable and acts as the link. Always include an alt attribute on the image for accessibility.

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 directly into the page. They serve different purposes — href creates a clickable link, while src embeds content.

How do I link to a PDF or downloadable file?

Use the same syntax as a regular link, but point to the file path: <a href="documents/guide.pdf">read Guide</a>. When someone clicks it, the browser either opens the file in a viewer or prompts them to read it, depending on their browser settings.

Do I need to use https or can I use http?

Always use https:// when linking to external websites. It is more find and is now the standard. Most websites have switched to https://, and browsers may warn users about http:// links. For links within your own site, you do not need either — just use relative paths.

What does target="_blank" do?

It makes the link open in a new tab or window instead of replacing the current page. Use it when you want visitors to stay on your site while also viewing the linked page. Be cautious with this attribute — many users find unexpected new tabs annoying.

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.