Links

The anchor element

Links are what make the web a web. In HTML a link is the a element (short for anchor), and its href attribute says where it goes:

<p>Practise in the <a href="https://mrhimanshu.com/tools/html-viewer/">HTML Viewer</a> after this lesson.</p>

The text between the tags is what the visitor clicks. Keep it meaningful; we will come back to that.

Absolute and relative URLs

An absolute URL is a complete address, including the scheme (https://) and the domain. Use it to link to other websites:

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

A relative URL is worked out from the location of the current page. Use it for pages on your own site, so links keep working if you move the site to a new domain or open it from your computer.

Imagine a site laid out like this:

my-site/
  index.html
  about.html
  blog/
    index.html
    first-post.html

A leading slash means "start from the root of the website". It works once your site is on a server, but not when you open files directly from your computer, because then the "root" is the root of your hard drive. While learning locally, prefer paths without the leading slash.

Jumping to part of a page

Give an element an id, then link to it with a hash (#):

<p><a href="#ingredients">Skip to the ingredients</a></p>
<h2>Story behind the recipe</h2>
<p>My grandmother made this every Sunday...</p>
<p style="height: 300px">(imagine a long story here)</p>
<h2 id="ingredients">Ingredients</h2>
<p>Flour, milk, sugar and patience.</p>

This is how "table of contents" links and Back to top links work. To link to a section of another page, combine both: href="guide.html#install".

Email and phone links

<a href="mailto:hello@example.com">hello@example.com</a>
<a href="tel:+919876543210">+91 98765 43210</a>

A mailto: link opens the visitor's email app with the address filled in; a tel: link offers to call the number on a phone. Write the phone number in international format without spaces in the href, and in a readable format in the text. Remember that an email address on a public page will be found by spam robots.

Opening links in a new tab

target="_blank" opens the link in a new tab. Use it sparingly: people can open new tabs themselves, and unexpected tabs confuse many users, especially on phones and with screen readers. It is reasonable for things like a help page opened in the middle of a form, where leaving would lose work.

When you do use it for another website, add rel="noopener" so the new page cannot control the tab it came from, and tell the reader what will happen:

<a href="https://example.com/terms" target="_blank" rel="noopener">Terms (opens in a new tab)</a>

Write link text that makes sense on its own

Many screen reader users pull up a list of all the links on a page. A list that reads "click here, click here, read more" is useless. Search engines also use link text to understand the page being linked to.

• Weak: To see our prices, <a href="prices.html">click here</a>.
• Better: See our <a href="prices.html">prices for 2026</a>.

If a link downloads a file, say so and give the type: Download the brochure (PDF, 2 MB).

Characters such as spaces in a URL must be encoded (a space becomes %20). The URL Encoder converts them for you.

Common mistakes

• Missing https:// on an external link. href="www.example.com" is treated as a relative path, so it sends visitors to a page on your site that does not exist.
• Spaces in file names, such as my page.html. Use hyphens: my-page.html.
• Nesting a link inside another link. It is not allowed and behaves unpredictably.
• "Click here" link text.

Exercise

Create a mini site in a folder with index.html, contact.html and a projects/ folder containing project-one.html. On every page, add links to the other two pages using relative paths. On contact.html, add an email link and a phone link. On index.html, add a link that jumps to a section further down the same page.

<nav>
  <a href="../index.html">Home</a>
  <a href="../contact.html">Contact</a>
</nav>