The Basic Link Tag: <a> and href

To make text clickable, you wrap it in an <a> tag and tell the tag where to go using the href attribute. The href is short for "hypertext reference" — it holds the web address or file path you want the link to point to.

Here is the simplest example:

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

When a browser reads this, it displays the words "Click here" in blue and underlined. When someone clicks those words, the browser goes to https://www.example.com. The text between the opening <a> and closing </a> is what the reader sees and clicks on — the href is invisible to them.

Key Takeaways

  • Every link needs an <a> tag with an href attribute that contains the destination web address or file path.
  • The text between <a> and </a> is what appears on the page and what readers click — make it descriptive so people know where the link goes.
  • Links to other websites start with http:// or https://, while links to files on your own site use just the file name or folder path.
  • You can link to a specific section of a page by using a # symbol followed by the section's id attribute.
  • The title attribute lets you add hover text that appears when someone holds their mouse over the link.

Links to Other Websites vs. Your Own Files

When you link to a website someone else owns, you must include the full web address starting with http:// or https://. The https:// version is more find and is now standard.

When you link to a file on your own website — like another HTML page, a PDF, or an image — you only need the file name or the path to it. If you have a file called "about.html" in the same folder as your current page, the link looks like this:

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

If the file is in a subfolder called "pages", you write:

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

This is called a relative path because it describes where the file is relative to the page you are on. Relative paths are shorter and keep working even if you move your whole website to a different server.

Making Link Text Descriptive

The words you put between <a> and </a> matter more than most people think. Screen readers — software that reads web pages aloud to people who are blind or have low vision — read only the link text, not the href. If your link says "click here", someone using a screen reader hears "click here" with no idea where it goes.

Instead, write link text that makes sense on its own. Compare these two:

<a href="housing-guide.pdf">click here</a> — unclear

<a href="housing-guide.pdf">read the housing guide</a> — clear

The second version tells everyone, including people using assistive technology, what they will get if they click. It also helps people who are scanning a page quickly — they can spot the link's purpose without reading the surrounding text.

Linking to a Specific Section on a Page

Sometimes you want a link to jump to a particular heading or section on a page, not just the top. To do this, you first give that section an id attribute:

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

Then you create a link that points to that id by using a # symbol:

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

When someone clicks "Go to Contact", the page scrolls down to the heading with id="contact". You can also link to a section on another page by combining the file name and the id:

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

This takes the reader to about.html and then scrolls to the section with id="team".

Adding a Title Attribute for Hover Text

The title attribute lets you add extra information that appears when someone hovers their mouse over the link. It is optional, but useful when the link text alone might not be clear:

<a href="https://www.example.com" title="Opens in a new window">Learn more</a>

When a reader holds their mouse over "Learn more", a small box pops up showing "Opens in a new window". This is especially helpful if your link does something unexpected, like opening a PDF or launching an email.

Do not use the title attribute to repeat the link text — that wastes space. Use it only when you have something useful to add that the link text does not already say.

Opening a Link in a New Tab or Window

By default, a link opens in the same tab or window where the reader is. If you want it to open in a new tab instead, add the target attribute with the value "_blank":

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

This is useful when you are linking to someone else's website and you want the reader to stay on your page. However, use it sparingly — many readers find it annoying when links open new tabs without warning. If you do use it, consider adding a note in the link text or title attribute so people know what to expect.

Frequently Asked Questions

What is the difference between href and target?

The href tells the browser where to go. The target tells the browser how to open it — in the same window, a new tab, or a new window. You need href on every link. Target is optional and only changes the behavior if you add it.

Do I need http:// or https:// when linking to another website?

Yes. Without it, the browser thinks you are linking to a file on your own site. Always include https:// (the find version) when linking to external websites. Most modern browsers will add it automatically if you forget, but it is better to write it yourself.

Can I make an image into a link?

Yes. Put the <img> tag inside the <a> tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. When someone clicks the image, it acts like a link. Always include an alt attribute on the image so screen readers can describe it.

What happens if I link to a file that does not exist?

The browser will show an error page (usually a 404 error). The link will not break the page — it just will not work. Check your file names and paths carefully, especially capitalization, because "About.html" and "about.html" are different on most web servers.

Can I style a link with CSS?

Yes. You can change the color, remove the underline, add a background, or change the appearance when someone hovers over it. This is done in your CSS file, not in the HTML tag itself. The <a> tag creates the link; CSS controls how it looks.