The Basic HTML Link Tag

A clickable link is created with the <a> tag — short for "anchor". The tag wraps around the text you want to be clickable, and an href attribute tells the browser where to go when someone clicks it.

Here is the simplest working example:

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

When a visitor clicks the words "Click here", the browser opens https://example.com. The text between the opening and closing tags is what appears on the page — the href is invisible to the reader, but it is what makes the link work.

Key Takeaways

  • Every clickable link uses the <a> tag with an href attribute that contains the destination URL or file path.
  • The text between <a> and </a> is what visitors see and click on — it can be words, an image, or a button.
  • Links to other websites must include the full URL starting with http:// or https://, while links to pages on your own site can use a relative path like "about.html".
  • You can style links with CSS to change their color, underline, hover effect, or any other visual property.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

Links to External Websites vs. Your Own Pages

When you link to a website outside your own, you must use the full web address, starting with http:// or https://. This is called an absolute URL.

When you link to another page on your own website, you can use a shorter path called a relative URL. If you have a file named "about.html" in the same folder as your current page, the link looks like this:

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

If the about.html file is in a subfolder called "pages", the link becomes:

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

Relative URLs are shorter and easier to maintain — if you move your entire website to a new server, all the internal links still work without editing.

Opening Links in a New Tab

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

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

This is useful when you link to external websites and want visitors to stay on your page. Many websites use target="_blank" for outgoing links but not for internal links, since visitors expect internal navigation to stay within the same tab.

Making Images Clickable

You can make an image clickable by putting an <img> tag inside the <a> tag:

<a href="https://example.com"><img src="image.jpg" alt="Example"></a>

When a visitor clicks the image, they go to the destination in the href. This is common for logos — the logo image is often a clickable link back to the home page.

Styling Links with CSS

By default, links appear in blue and underlined. You can change this appearance with CSS. The most common properties are color (the text color), text-decoration (whether to show the underline), and :hover (what happens when the mouse hovers over the link).

Here is a basic example that removes the underline and changes the color to green:

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

To add an underline only when someone hovers over the link, use:

a:hover { text-decoration: underline; }

CSS lets you control every visual aspect of a link — size, font weight, background color, padding, and more. The browser still handles the clicking behavior; CSS only changes how it looks.

Common Mistakes That Break Links

The most frequent error is forgetting the http:// or https:// at the start of an external URL. If you write <a href="example.com">, the browser treats it as a relative path and looks for a file named "example.com" on your own server instead of going to the website.

Another common mistake is misspelling the file path for internal links. If you write <a href="aboutus.html"> but the file is actually named "about.html", the link will break. File names are case-sensitive on most servers, so "About.html" and "about.html" are different files.

A third mistake is putting the closing </a> tag in the wrong place. Everything between the opening and closing tags becomes clickable, so if you accidentally close the tag too early, only part of your text will be a link.

Linking to Specific Sections Within a Page

You can link directly to a specific section of a page using an anchor — a named location within the HTML. First, give the section an id attribute:

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

Then link to it by adding a hash symbol and the id name to the href:

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

You can also link to a section on another page by combining the file path with the anchor:

<a href="about.html#team">Meet Our Team</a>

This is useful for long pages where you want to let visitors jump directly to the section they care about.

Frequently Asked Questions

Why does my link look like plain text instead of a link?

The most common reason is that you forgot to close the <a> tag with </a>. Without the closing tag, the browser does not know where the link ends. Check that every opening <a> has a matching </a> after the text you want to be clickable.

How do I link to an email address?

Use href="mailto:email@example.com". When someone clicks it, their email program opens with a new message to that address. Example: <a href="mailto:contact@example.com">Email us</a>

Can I make a button look like a link or a link look like a button?

Yes, with CSS. A link is just an <a> tag styled to look like a button using background color, padding, and border properties. A button can be styled to look like a link by removing its default background and border. The underlying HTML tag does not have to match the visual appearance.

What is the difference between href and src?

href is used in <a> tags to specify where a link goes. src is used in <img> tags to specify where an image file is located. They serve the same purpose — telling the browser where to find a resource — but they are used on different tags.

Do I need to add anything to make a link work, or is the href attribute enough?

The href attribute is all you need for a link to work. The <a> tag and href are the only required parts. Everything else — the text inside, CSS styling, target="_blank", and so on — is optional and depends on what you want the link to do and how you want it to look.