HTML Links

The Anchor Element

Links are what make the web a web, and they are all made with one element: <a>, short for anchor. The destination goes in the href attribute, and the text between the tags is what the visitor sees and clicks.

An anchor is an inline element, so it sits inside a line of text rather than starting a new one. That is why you can drop a link into the middle of a sentence without breaking the sentence apart. It can wrap more than plain text — an image, or even a whole block of content — but it must never contain another anchor, and it must never contain a button, because a clickable thing inside a clickable thing has no sensible behaviour.

An <a> with no href is still valid HTML, but it is no longer a link: it is not focusable with the keyboard and a screen reader will not announce it as something to activate. So if you are tempted to write <a> with an empty href or href="#" and attach JavaScript to it, stop and ask whether you want a <button> instead. Links go somewhere; buttons do something.

<!-- A basic link -->
<a href="https://www.wikipedia.org">Wikipedia</a>

<!-- A link inside a sentence -->
<p>Read the <a href="rules.html">competition rules</a> before you register.</p>

<!-- An image can be the clickable content -->
<a href="gallery.html">
  <img src="images/robot-thumb.jpg" alt="Photos from the robotics workshop">
</a>

<!-- Not a link: no href -->
<a onclick="doSomething()">Submit</a>

<!-- Use the right element instead -->
<button type="button" onclick="doSomething()">Submit</button>

Absolute and Relative URLs

An absolute URL gives the full address including the protocol and domain, as in https://www.wikipedia.org/wiki/HTML. Use it when you are linking to a different website. A relative URL gives only the path, worked out from where the current page sits, as in rules.html or images/logo.png. Use it when you are linking within your own site.

Relative links are worth the small effort of learning because they survive moving. If every internal link on your college project says http://localhost/project/about.html, the whole site breaks the moment it is uploaded to a real domain. Relative links keep working wherever the folder is placed.

Three forms cover almost everything. A plain name such as about.html means "in the same folder as this page". images/logo.png means "go into the images subfolder". ../style.css means "go up one folder first", and you can chain it as ../../ to climb further. A path starting with a slash, such as /contact.html, is root-relative: it starts from the top of the site, ignoring where the current page is.

The mistake that eats the most beginner time is a broken path that works on your own machine and fails everywhere else. Windows filenames are not case-sensitive, but web servers usually are, so Logo.PNG and logo.png are the same file on your laptop and two different files once uploaded. Keep every file and folder name lowercase with hyphens instead of spaces, and this whole class of bug disappears.

project/
  index.html
  about.html
  images/
    logo.png
  events/
    techfest.html

<!-- From index.html -->
<a href="about.html">About</a>                 <!-- same folder -->
<a href="events/techfest.html">Techfest</a>    <!-- into a subfolder -->
<img src="images/logo.png" alt="Club logo">

<!-- From events/techfest.html -->
<a href="../about.html">About</a>              <!-- up one folder -->
<img src="../images/logo.png" alt="Club logo">

<!-- Root-relative: works from any page, needs a real web server -->
<a href="/about.html">About</a>

• about.html — a file in the same folder
• images/logo.png — down into a subfolder
• ../about.html — up one folder, then across
• /about.html — from the site root, regardless of the current page
• https://example.com/page — a different site entirely
• Keep file and folder names lowercase and hyphenated; servers are usually case-sensitive even when your computer is not

Linking to a Place Inside a Page

A URL can end with a fragment — a hash followed by an id from the page, such as #registration. Following such a link scrolls the browser to the element carrying that id. This is how a table of contents at the top of a long page works.

For that to work, the target element needs an id attribute whose value matches the fragment exactly, without the hash. Ids are case-sensitive and must be unique in the page, so #Registration will not find id="registration". The id can go on any element — a heading, a section, a div.

Fragments also work across pages: events.html#robotics loads a different page and jumps to that spot in it. And href="#top" or simply href="#" sends the visitor to the top of the current page, which is a genuine use — although a "back to top" link is only worth adding on pages long enough to need one.

<!-- Table of contents at the top of a long page -->
<nav>
  <ul>
    <li><a href="#events">Events</a></li>
    <li><a href="#registration">Registration</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<h2 id="events">Events</h2>
<p>...</p>

<h2 id="registration">Registration</h2>
<p>...</p>

<h2 id="contact">Contact</h2>
<p>...</p>

<!-- Jumping into a specific spot on another page -->
<a href="events.html#robotics">Robotics Challenge details</a>

Opening in a New Tab, and the Attribute That Goes With It

target="_blank" opens the link in a new tab. It is used far more often than it should be. Opening a new tab takes control away from the visitor: their back button no longer returns them to your page, and on a phone the extra tabs pile up invisibly. The reasonable rule is to use it when leaving your page would lose the visitor's work — a help link opened from a half-filled form, or a reference opened from a document they are reading — and to leave normal links alone.

When you do use it, add rel="noopener noreferrer". Without noopener, the page you opened gets a JavaScript reference back to your page and can redirect it somewhere else, which has been used for phishing. Modern browsers now apply noopener automatically for target="_blank", so this is a safety net rather than an emergency, but it costs nothing and still matters for older browsers. noreferrer additionally stops your page's address being sent to the destination.

One more courtesy: tell people the link will open a new tab. A sighted user gets no warning at all, and a screen reader user gets none either. Adding the words "(opens in a new tab)" to the link text, or a small icon with equivalent text, removes the surprise.

<!-- External link opened in a new tab, done properly -->
<a href="https://www.w3.org/WAI/"
   target="_blank"
   rel="noopener noreferrer">
  Web accessibility guidelines (opens in a new tab)
</a>

<!-- Internal links: no target, let the back button work -->
<a href="about.html">About the club</a>

Link Text, Email Links and Downloads

Screen reader users can pull up a list of every link on a page and read it on its own, in the same way sighted users scan for underlined text. In that list, five links all reading "click here" are five identical, useless entries. Write link text that describes the destination, and the problem never arises: "download the registration form" tells you where you are going; "click here" tells you nothing.

Avoid pasting a raw URL as the link text too. A screen reader may read the whole address out character by character, and https://example.edu/depts/cse/2026/forms/reg-form-final-v2.pdf is a miserable thing to listen to. Use the document's name as the text and put the address in href where it belongs.

Two special href schemes are worth knowing. mailto: opens the visitor's email program with the address filled in, and tel: starts a phone call on a mobile device — genuinely useful on a contact page. Both depend on the visitor having a program configured to handle them, so always show the address or number as visible text as well. The download attribute asks the browser to save a file instead of opening it, and only works for files on your own site.

<!-- Descriptive link text -->
<a href="forms/registration.pdf">Registration form (PDF, 240 KB)</a>

<!-- Email and phone, with the value also visible -->
<p>Email us at
  <a href="mailto:roboticsclub@example.edu">roboticsclub@example.edu</a>
</p>
<p>Call <a href="tel:+919999999999">+91 99999 99999</a></p>

<!-- Ask the browser to download rather than open -->
<a href="files/schedule.pdf" download="techfest-schedule.pdf">
  Download the full schedule
</a>

• Write link text that makes sense read on its own, away from the surrounding sentence
• Never use "click here", "read more" or "link" as the whole of the link text
• Do not use a bare URL as link text — use the name of what it points to
• Mention the file type and rough size when linking to a document, so nobody is surprised by a large download
• Make the clickable area comfortably large on touch screens; a two-word link is easier to hit than a one-letter one