A hyperlink is created with the anchor tag and the href attribute

To make a link clickable in HTML, you use the anchor tag — written as <a> — and give it an href attribute that points to the destination. The text between the opening and closing tags is what the reader sees and clicks on.

The basic structure looks like this: <a href="https://example.com">Click here</a>. The href value is the web address or file path the link goes to. The text "Click here" is what appears on the page in blue and underlined (by default in most browsers).

That is the entire mechanism. Everything else is variation on where the link points, how it looks, and what happens when someone clicks it.

Key Takeaways

  • The anchor tag <a> with an href attribute creates any clickable link, and the text between the tags is what users see.
  • External links use the full web address starting with http:// or https://, while internal links use relative paths like /about or ../images/photo.jpg.
  • The target="_blank" attribute opens a link in a new tab instead of replacing the current page.
  • CSS can change how a link looks — its color, underline, hover effect — without changing the HTML structure.

External links versus internal links

An external link points to a website outside your own domain. You write the full web address in the href: <a href="https://www.wikipedia.org">Wikipedia</a>. Always include the http:// or https:// part, or the browser will treat it as a file path on your own server.

An internal link points to another page on your own website. You use a relative path instead of a full address. If you are linking to a page called about.html in the same folder, write <a href="about.html">About Us</a>. If the page is in a subfolder called pages, write <a href="pages/about.html">About Us</a>. If you need to go up one folder level, use ../: <a href="../index.html">Home</a>.

Relative paths are shorter and let you move your entire website folder without breaking links. External links require the full address and will work the same way no matter where your file is located.

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 linking to external sites and you want readers to stay on your page. Many websites use this for outbound links so visitors do not lose their place. However, do not overuse it — readers expect most links to work the normal way, and opening new tabs without warning can feel intrusive.

Linking to a specific section on a page

You can link directly to a heading or section within a page using an anchor — a named location on the page. First, give the section an id attribute: <h2 id="pricing">Pricing</h2>. Then link to it with a hash symbol: <a href="#pricing">Jump to Pricing</a>.

You can also link to a section on another page by combining the page address with the anchor: <a href="services.html#pricing">See our pricing</a>. This is common in long pages where you want to let readers jump to the part they care about, or in navigation menus that link to different sections of a single-page website.

Styling links with CSS

HTML creates the link, but CSS controls how it looks. By default, unvisited links are blue and underlined, and visited links are purple. You can change this with CSS selectors like a (all links), a:hover (when the mouse is over it), and a:visited (links you have already clicked).

A straightforward style might look like this: change the color to green, remove the underline, and add a background color on hover. You write this in your stylesheet, not in the HTML itself. The HTML stays clean — just the anchor tag and href — while the CSS handles appearance. This separation makes it straightforward to change how all your links look without editing the HTML.

Common mistakes when creating links

The most frequent error is forgetting the http:// or https:// on external links. Without it, the browser treats <a href="example.com"> as a relative path and looks for a file called example.com on your server instead of going to the website.

Another common mistake is using spaces or special characters in file names for internal links. If your file is called "about page.html" with a space, the link <a href="about page.html"> will break because browsers encode spaces as %20. Use hyphens or underscores instead: about-page.html or about_page.html.

Broken relative paths are also common when you move files to different folders and forget to update the href. Test every link after you move files around, or use absolute paths (starting with /) if your site structure changes often.

Frequently Asked Questions

Can I link to a PDF or a downloadable file?

Yes — the href works the same way. Use <a href="document.pdf">read PDF</a> for a file in the same folder, or the full path if it is elsewhere. The browser will either open the file or prompt the user to read it, depending on their settings.

What is the difference between href and src?

href is for links (the anchor tag), while src is for images and scripts that load content into the page. href tells the browser where to go when clicked; src tells the browser what to load and display right now.

Can I make an image into a link?

Yes — put the image tag inside the anchor tag: <a href="page.html"><img src="image.jpg"></a>. Now clicking the image goes to the link destination.

Should I use target="_blank" for all external links?

No — use it selectively. Readers expect external links to open in the same tab unless you have a specific reason to open a new one. Overusing it can feel controlling and breaks the back button workflow.