Links in HTML

Links are what make the web a “web” — they connect pages, documents, and resources together. The <a> (anchor) element creates a hyperlink that users can click or tap to navigate.

Anchor Element

The basic structure of a link:

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

The anchor element wraps the link text (or content) and the href attribute tells the browser where to go. The text between <a> and </a> is what the user sees and clicks.

Hyperlink Reference (href) Attribute

The href attribute defines the destination URL. It can point to:

<!-- Absolute URL — full web address -->
<a href="https://www.google.com">Google</a>

<!-- Relative URL — path within the same website -->
<a href="/about.html">About Us</a>
<a href="contact.html">Contact</a>

<!-- Same-page anchor (#id) -->
<a href="#section-2">Jump to Section 2</a>

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

<!-- Telephone link (mobile devices) -->
<a href="tel:+1234567890">Call Us</a>

<!-- Download a file (suggests download) -->
<a href="document.pdf" download>Download PDF</a>

<!-- Execute JavaScript -->
<a href="javascript:void(0)" onclick="myFunction()">Run Action</a>

Link Text

The visible text of a link should describe where the link goes:

<!-- Good — descriptive -->
<a href="/tutorials/html">Learn HTML Tutorials</a>

<!-- Bad — vague -->
<a href="/tutorials/html">Click here</a>

<!-- Even worse — just a URL -->
<a href="/tutorials/html">https://example.com/tutorials/html</a>

Why it matters: Screen reader users often navigate by jumping from link to link. “Click here” gives no context about the destination.

Links can also contain images:

<a href="/portfolio.html">
  <img src="project-thumbnail.jpg" alt="View my project">
</a>

Target Attribute

The target attribute controls where the linked page opens:

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

Security note: When using target="_blank", always add rel="noopener noreferrer" to prevent the target page from accessing your page via window.opener:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Safe external link
</a>

Link Types

The rel attribute describes the relationship between the current page and the linked page:

<a href="https://partner-site.com" rel="nofollow noopener">Partner</a>
<a href="/page-2" rel="next">Next Page</a>

Relative vs Absolute URLs

Absolute URLs include the full protocol and domain:

https://example.com/images/photo.jpg

Relative URLs are paths without the domain — they resolve relative to the current page:

images/photo.jpg                     — same directory
/images/photo.jpg                    — root of the site
../images/photo.jpg                  — parent directory
../../assets/images/photo.jpg        — two levels up

Use relative URLs within your own site (easier to move your site to a new domain). Use absolute URLs for external sites.

Link Accessibility

• Use descriptive link text — never just “click here” or “read more”.
• If opening in a new tab, warn users:

<a href="https://example.com" target="_blank">
  Visit Example (opens in new tab)
</a>

• Skip links allow keyboard users to bypass navigation:

<a href="#main-content" class="skip-link">Skip to main content</a>

• Use aria-label when the visible text is insufficient:

<a href="/settings" aria-label="User settings">⚙️</a>

SEO Best Practices for Links in HTML

• Use descriptive, keyword-rich link text — search engines use link text to understand the target page.
• Internal links help search engines discover and index your pages.
• Use rel="nofollow" for paid or untrusted links to avoid SEO penalties.
• Check for broken links (404 errors) — they harm user experience and SEO.
• A logical link structure (breadcrumbs, navigation, related articles) improves site crawlability.

Detailed Table with Tag, attributes and attribute values