HTML Links Tutorial for Beginners

What Are HTML Links?

HTML links, also called hyperlinks, allow users to navigate between pages, websites, files, and sections of a page. Links are created using the <a> (anchor) element.

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

When users click a link, the browser loads the destination specified in the href attribute.

HTML Link Syntax

<a href="url">Link Text</a>

• <a> defines the anchor element.
• href specifies the destination URL.
• The content between the tags becomes clickable.

HTML Links Cheatsheet

The following table contains the most commonly used HTML link patterns every developer should know.

Absolute URLs vs Relative URLs

Links can use either absolute URLs or relative URLs depending on the destination.

<a href="https://example.com">External Website</a>

<a href="/tutorials/html/">HTML Tutorial</a>

Open Links in a New Tab

Use the target="_blank" attribute to open a link in a new browser tab.

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Visit Website
</a>

Always include rel="noopener noreferrer" for security and performance.

Email Links

Use the mailto: protocol to open the user's email application.

<a href="mailto:support@example.com">
  Email Support
</a>

Phone Links

Use the tel: protocol to create clickable phone numbers.

<a href="tel:+18005551234">
  Call Us
</a>

Phone links are especially useful for mobile users.

HTML Bookmark Links

Bookmark links allow users to jump directly to a section of the same page.

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

<section id="contact">
  Contact Information
</section>

Bookmark links improve navigation on long pages and documentation websites.

Image Links

Images can also be wrapped inside anchor tags to make them clickable.

<a href="/tutorials/html/">
  <img
    src="/images/html-logo.png"
    alt="HTML Tutorial"
  />
</a>

Download Links

The download attribute tells the browser to download a file instead of opening it.

<a href="/files/html-cheatsheet.pdf" download>
  Download HTML Cheatsheet
</a>

SEO-Friendly HTML Links

Links play an important role in search engine optimization. Search engines use link text and internal links to understand page relationships.

Good Example

<a href="/tutorials/html/attributes/">
  Learn HTML Attributes
</a>

Bad Example

<a href="/tutorials/html/attributes/">
  Click Here
</a>

• Use descriptive anchor text.
• Connect related pages using internal links.
• Avoid generic text like "Click Here".
• Use meaningful URLs.
• Link naturally within content.

Accessible HTML Links

Accessible links help screen reader users understand link destinations.

<a href="/pricing/" aria-label="View pricing plans">
  Pricing Plans
</a>

• Use descriptive link text.
• Avoid empty links.
• Ensure links are keyboard accessible.
• Provide clear context for screen readers.

Common HTML Link Mistakes

• Using "click here" as anchor text.
• Forgetting the href attribute.
• Using broken or invalid URLs.
• Opening new tabs without indicating it.
• Using target="_blank" without rel.
• Using images as links without meaningful alt text.

Key Takeaways

• HTML links are created using the <a> tag.
• The href attribute defines the destination.
• Links can point to pages, files, email addresses, phone numbers, and bookmarks.
• Use descriptive anchor text for SEO and accessibility.
• Use relative URLs for internal pages and absolute URLs for external websites.
• Always use secure external link attributes when opening new tabs.