The Basic Hyperlink Tag

A hyperlink in HTML uses the <a> tag, which stands for "anchor". The tag wraps around the text you want to click, and an href attribute tells the browser where to go when someone clicks it. Here is the simplest form:

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

When a browser displays this, the text "Click here" appears as a blue underlined link. The href is short for "hypertext reference" — it holds the web address or file path the link points to. Everything between the opening <a> tag and the closing </a> tag becomes clickable.

Key Takeaways

  • Every hyperlink needs an opening <a> tag with an href attribute, clickable text or content, and a closing </a> tag.
  • Use full web addresses starting with https:// for external websites, or relative paths like about.html for pages in your own folder.
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.
  • You can link to specific sections of a page by using anchor IDs, which requires both a named location and a link pointing to it.
  • Links can wrap around images, buttons, or any other HTML element — not just text.

External Links vs. Internal Links

An external link points to a website outside your own domain. Always use the full web address, starting with https://:

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

An internal link points to another page on your own website. You can use a relative path — just the filename or folder structure — instead of the full address:

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

If the page is in a subfolder, include the folder name:

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

Relative paths are shorter and let you move your entire website to a new server without breaking internal links. External links always need the full address because the browser has no way to know where to find them otherwise.

Opening Links in a New Tab

By default, clicking a link replaces the current page. To open the link in a new browser tab instead, add target="_blank" to the tag:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

This is useful when you link to external sites and want visitors to stay on your page. Many websites use this for outbound links so readers do not lose their place. You can combine target="_blank" with any other attribute — it does not change how the href works.

Linking to a Specific Section on a Page

You can link directly to a heading or section within a page using anchor IDs. This requires two steps: first, give the section an ID, then link to that ID.

To mark a section, add an id attribute to any HTML element:

<h2 id="pricing">Pricing Plans</h2>

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

<a href="#pricing">Jump to pricing</a>

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

<a href="services.html#pricing">See our pricing</a>

The ID must be unique on the page — no two elements can have the same ID. Use lowercase letters and hyphens in ID names, and avoid spaces.

Linking Images and Other Elements

The <a> tag can wrap around any HTML element, not just text. To make an image clickable, put the image tag inside the link:

<a href="https://www.example.com"><img src="logo.png" alt="Company logo"></a>

This is common for logo links that take you to the home page. You can also wrap buttons, icons, or entire sections inside a link tag. The entire element becomes clickable, and the cursor changes to a pointer when you hover over it.

Common Mistakes to Avoid

The most frequent error is forgetting the closing </a> tag. Without it, everything after the opening tag becomes a link, which breaks your page layout. Always check that every opening tag has a matching closing tag.

Another mistake is using http:// instead of https:// for external links. Modern browsers flag http:// sites as insecure, and many websites no longer support it. Always use https:// unless you have a specific reason not to.

Relative paths are also easy to get wrong. If a link does not work, check that the file path matches your folder structure exactly. A path like pages/contact.html only works if there is actually a pages folder with a contact.html file inside it. Capitalization matters too — Contact.html and contact.html are different files on most servers.

Styling Links with CSS

By default, links appear blue and underlined. You can change this appearance using CSS. The most common link states are:

  • a — the normal, unvisited link
  • a:visited — a link the user has already clicked
  • a:hover — the link when the mouse is over it
  • a:active — the link while being clicked

Here is a simple example that removes the underline and changes the color on hover:

a { color: #0066cc; text-decoration: none; } a:hover { color: #ff6600; }

You can also add a background color, change the font weight, add a border, or apply any other CSS property. Styling links is purely visual — it does not change how the link works.

Frequently Asked Questions

What is the difference between href and src?

href is used in the <a> tag to link to another page or resource. src is used in tags like <img> and <script> to load a file directly into the page. They serve different purposes and are not interchangeable.

Can I link to a PDF or other file type?

Yes. Use the file path in the href just like you would for an HTML page: <a href="documents/resume.pdf">Download my resume</a>. The browser will either open the file or prompt the user to download it, depending on their settings.

How do I link to an email address?

Use mailto: followed by the email address: <a href="mailto:contact@example.com">Email us</a>. Clicking this link opens the user's default email program with the address already filled in.

Why does my link not work?

Check three things: the href path is spelled correctly and matches your folder structure, external links start with https://, and the closing </a> tag is present. Test the link in your browser and look at the page source to confirm the tag is written correctly.

Can I style a link differently than other text?

Yes, use CSS to target the <a> tag. You can change the color, size, weight, and any other property. You can also use classes to style different links differently: <a href="page.html" class="button">Click me</a>, then style the .button class in your CSS.