Home » Learn » HTML Tutorial » HTML Links

HTML Links

Links (hyperlinks) are what connect web pages to each other. You click a link and go to another page, a file or a part of the same page. A link is created with the <a> (anchor) tag, and the address is given in the href attribute.

<a href="https://www.example.com">Visit Example</a>
Output in the browser

Visit Example

The text between the opening and closing tag is the clickable part. By default, an unvisited link is blue and underlined, a visited link is purple.

Absolute and relative URLs

  • Absolute URL: the full address, like https://www.example.com/page.html. Use it for other websites.
  • Relative URL: the address from the current page, like about.html or pages/contact.html. Use it for pages of your own site.
<a href="https://www.example.com/page.html">Absolute link</a>
<a href="about.html">Relative link, same folder</a>
<a href="pages/contact.html">Relative link, inside a folder</a>

Open a link in a new tab

Use target="_blank". Add rel="noopener" to stay safe, so the new page cannot control your page.

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

Email and phone links

<a href="mailto:info@example.com">Send an email</a>
<a href="tel:+911234567890">Call us</a>

Clicking the first one opens the email app, and the second one starts a call on a phone.

Link to a part of the same page

Give an id to the target element, and link to it with #id.

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

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

Image as a link

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

Download link

<a href="files/guide.pdf" download>Download the guide</a>

Useful attributes

AttributeMeaning
hrefThe address of the link
targetWhere to open it: _self (same tab, default) or _blank (new tab)
titleTooltip text
relRelation to the linked page, like noopener or nofollow
downloadDownload the file instead of opening it
Note: Write meaningful link text like “Read the HTML guide” and not “click here”. It is better for visitors, screen readers and SEO. Also check the interview question What do you mean by HTML links?

Summary

  • Use <a href="..."> to create a link.
  • Use target="_blank" rel="noopener" for a new tab.
  • Use mailto: and tel: for email and phone, and #id to jump inside a page.
  • Next: HTML Images.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.