HTML Links - Learn It Quicker

Basic Link Syntax

The <a> element creates a hyperlink. The href attribute specifies the destination URL. The text between opening and closing tags is the clickable link text. Always make link text descriptive—users should understand where a link goes from the text alone.

Link text should describe the destination, not just say 'click here' or 'read more'. Good: 'Download the user guide (PDF)'. Bad: 'Click here'. Descriptive link text improves accessibility and SEO.

Links can wrap other elements like images, making entire elements clickable. You can also link to non-HTML resources like PDFs, images, or downloadable files.

<!-- Basic text link -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Link with descriptive text -->
<a href="/downloads/guide.pdf">Download User Guide (PDF, 2.3MB)</a>

<!-- Link wrapping an image -->
<a href="/products/widget">
  <img src="widget.jpg" alt="Blue Widget Product">
</a>

<!-- Link wrapping multiple elements -->
<a href="/article">
  <h3>Article Title</h3>
  <p>Article summary goes here...</p>
</a>

Absolute vs Relative URLs

Absolute URLs include the full address: protocol (https://), domain (example.com), and path (/page.html). Use absolute URLs for external sites or when you need the complete address.

Relative URLs specify paths relative to the current page. They're shorter and work even if you move your entire site to a different domain. / means root, ../ means parent directory.

Root-relative URLs start with / and are relative to the site root. Document-relative URLs don't start with / and are relative to the current document's location.

<!-- Absolute URL (external site) -->
<a href="https://www.example.com/page.html">External Link</a>

<!-- Root-relative URL (relative to site root) -->
<a href="/about/team.html">Our Team</a>
<a href="/products/index.html">Products</a>

<!-- Document-relative URL (relative to current page) -->
<a href="contact.html">Contact</a>  <!-- Same directory -->
<a href="../index.html">Home</a>  <!-- Parent directory -->
<a href="products/widget.html">Widget</a>  <!-- Subdirectory -->

<!-- Protocol-relative URL (inherits current protocol) -->
<a href="//cdn.example.com/script.js">CDN Resource</a>

Link Targets and Opening Behavior

The target attribute controls where the link opens. _self (default) opens in the same window/tab. _blank opens in a new window/tab. _parent and _top are used with frames (rarely needed today).

When using target='_blank', always add rel='noopener noreferrer' for security. Without it, the new page can access your page's window object, creating security and performance risks.

Consider user experience before opening links in new tabs. Users can choose to open links in new tabs themselves (right-click > open in new tab). Forcing new tabs can be disruptive.

<!-- Open in same tab (default) -->
<a href="/about">About Us</a>

<!-- Open in new tab (with security attributes) -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- Download link -->
<a href="/files/document.pdf" download>Download PDF</a>

<!-- Download with custom filename -->
<a href="/files/doc123.pdf" download="UserGuide.pdf">
  Download User Guide
</a>

Email, Phone, and SMS Links

Email links use mailto: protocol and open the user's default email client with a pre-filled address. You can include subject, body, cc, and bcc parameters.

Phone links use tel: protocol and are especially useful on mobile devices where they trigger the phone dialer. Format numbers in international format for best compatibility.

SMS links use sms: protocol (iOS) or smsto: (Android). They open the messaging app with a pre-filled number and optional message text.

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

<!-- Email with subject and body -->
<a href="mailto:support@example.com?subject=Support%20Request&body=I%20need%20help%20with...">
  Contact Support
</a>

<!-- Email with CC and BCC -->
<a href="mailto:hello@example.com?cc=team@example.com&bcc=archive@example.com">
  Email Team
</a>

<!-- Phone link -->
<a href="tel:+1-234-567-8900">Call Us: (234) 567-8900</a>

<!-- SMS link -->
<a href="sms:+1234567890">Send SMS</a>
<a href="sms:+1234567890?body=Hello">Send SMS with pre-filled text</a>

Anchor Links and Page Sections

Anchor links scroll to specific sections within the same page. Create an ID on the target element, then link to it using #idname. This creates a smooth user experience for long pages.

You can link to sections on other pages by combining a URL with a hash: page.html#section. The browser loads the page then scrolls to the section.

Modern CSS supports smooth scrolling with scroll-behavior: smooth on the html element, creating animated scrolling instead of jumping.

<!-- Links to page sections -->
<nav>
  <a href="#introduction">Introduction</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
  <a href="#contact">Contact</a>
</nav>

<!-- Target sections with IDs -->
<section id="introduction">
  <h2>Introduction</h2>
  <p>Content...</p>
</section>

<section id="features">
  <h2>Features</h2>
  <p>Content...</p>
</section>

<section id="pricing">
  <h2>Pricing</h2>
  <p>Content...</p>
</section>

<!-- Back to top link -->
<a href="#top">Back to Top</a>

<!-- Link to section on another page -->
<a href="/documentation.html#installation">Installation Guide</a>

<!-- CSS for smooth scrolling -->
<style>
html {
  scroll-behavior: smooth;
}
</style>

Link Relationships and Attributes

The rel attribute describes the relationship between the current page and the linked resource. Common values include nofollow (don't follow for SEO), noopener (security for target=_blank), noreferrer (don't send referrer), and alternate (alternate version).

Use rel='nofollow' for paid links, user-generated content, or untrusted links. This tells search engines not to pass PageRank to the destination.

The title attribute provides additional information about the link, shown as a tooltip on hover. Use it sparingly and don't rely on it for critical information.

<!-- Security attributes for external links -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- No follow for untrusted/paid links -->
<a href="https://sponsor.com" rel="nofollow">
  Sponsored Link
</a>

<!-- Alternate version of page -->
<a href="/page" hreflang="es" rel="alternate">
  Spanish Version
</a>

<!-- Link with tooltip -->
<a href="/downloads/file.pdf" title="PDF, 3.2MB">
  Download File
</a>

<!-- Author link -->
<a href="/about/john-doe" rel="author">
  John Doe
</a>

<!-- License link -->
<a href="/license" rel="license">
  Content License
</a>