Hyperlinks and Navigation

1. Anchor Elements and Link Types

Attribute	Purpose	Values	Example
href	Link destination URL	URL, relative path, anchor (#id)	`href="page.html"`
target	Where to open linked document	`_self`, `_blank`, `_parent`, `_top`	`target="_blank"`
rel	Relationship between documents	Space-separated keywords	`rel="noopener noreferrer"`
download	Download file instead of navigate	Optional filename	`download="file.pdf"`
hreflang	Language of linked document	Language code (BCP 47)	`hreflang="es"`
type	MIME type of linked document	MIME type	`type="application/pdf"`
ping	URLs to ping when link clicked	Space-separated URLs	`ping="https://track.com"`
referrerpolicy	Referrer header policy	Various policies	`referrerpolicy="no-referrer"`

Link Types

Type	Example
Absolute URL	`https://example.com/page`
Relative Path	`../folder/page.html`
Root Relative	`/about/contact.html`
Fragment/Anchor	`#section-id`
Same Page	`href="#"`

Target Values

Value	Behavior
_self	Same frame/window (default)
_blank	New window/tab
_parent	Parent frameset
_top	Full window body
framename	Named iframe/frame

Example: Various link types and attributes

<!-- Basic links -->
<a href="https://example.com">External link</a>
<a href="/about">Root relative link</a>
<a href="../parent/page.html">Relative link</a>

<!-- Fragment/anchor link -->
<a href="#section-2">Jump to Section 2</a>
<h2 id="section-2">Section 2</h2>

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

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

<!-- With language and type -->
<a href="es/index.html" hreflang="es" type="text/html">Spanish version</a>

<!-- Link wrapping block elements (HTML5) -->
<a href="/article">
  <article>
    <h3>Article Title</h3>
    <p>Article preview text...</p>
  </article>
</a>

Warning: Always use rel="noopener noreferrer" with target="_blank" for security. Without it, the new page can access window.opener and potentially redirect your page.

2. URL Schemes and Link Targets

Scheme	Purpose	Syntax	Example
http/https	Web pages	`https://domain.com/path`	`href="https://example.com"`
mailto	Email links	`mailto:email@domain.com`	`href="mailto:info@example.com"`
tel	Telephone numbers	`tel:+1234567890`	`href="tel:+1-555-123-4567"`
sms	SMS messages	`sms:+1234567890`	`href="sms:+1-555-123-4567"`
file	Local files	`file:///path/to/file`	`href="file:///C:/docs/file.pdf"`
ftp	File transfer	`ftp://server.com/file`	`href="ftp://ftp.example.com"`
javascript	Execute JavaScript	`javascript:code`	`href="javascript:void(0)"` AVOID
data	Inline data	`data:mime;encoding,data`	`href="data:text/plain;base64,..."`
blob	Binary data	`blob:origin/uuid`	Generated by JavaScript

Fragment Identifier (#):

Links to element with matching ID
Smooth scroll to section
Updates browser history
Can be used with any URL
href="#top" scrolls to top
href="#" stays on same page

Query Parameters (?):

?param=value
?param1=value1&param2=value2
Pass data via URL
Used for search, filters, tracking
Visible to users
URL encode special characters

Example: Different URL schemes

<!-- Web links -->
<a href="https://example.com">Secure website</a>
<a href="http://legacy.com">Non-secure (avoid)</a>

<!-- Email with subject and body -->
<a href="mailto:contact@example.com?subject=Hello&body=Message here">
  Email us
</a>

<!-- Phone number (mobile tap to call) -->
<a href="tel:+15551234567">Call: (555) 123-4567</a>

<!-- SMS (mobile tap to text) -->
<a href="sms:+15551234567?body=Hello">Send SMS</a>

<!-- FTP download -->
<a href="ftp://files.example.com/document.zip">Download via FTP</a>

<!-- Fragment identifiers -->
<a href="#footer">Jump to footer</a>
<a href="page.html#section3">Go to Section 3 of other page</a>

<!-- Query parameters -->
<a href="search.html?q=html&category=tutorials">Search Results</a>

<!-- Data URL (small images/files) -->
<a href="data:text/plain;charset=UTF-8,Hello%20World" download="hello.txt">
  Download Text
</a>

<!-- Avoid javascript: links -->
<!-- WRONG: <a href="javascript:alert('Hi')">Click</a> -->
<!-- RIGHT: <button onclick="alert('Hi')">Click</button> -->

Note: Avoid javascript: protocol in href. Use button elements with event handlers instead. It's better for accessibility, SEO, and security (CSP).

3. Rel Attributes and Link Relationships

Rel Value	Purpose	Use On	SEO/Security
noopener	Prevents window.opener access	<a> with target="_blank"	Security
noreferrer	No referrer header sent	<a> external links	Privacy
nofollow	Don't follow link for SEO	<a> untrusted content	SEO
sponsored	Sponsored/paid link	<a> advertisements	SEO
ugc	User-generated content	<a> comments, forum posts	SEO
alternate	Alternative version	<link> in <head>	RSS, translations
canonical	Preferred URL for content	<link> in <head>	SEO
stylesheet	CSS stylesheet	<link> in <head>	Required for CSS
icon	Favicon	<link> in <head>	Site icon
preload	High-priority resource	<link> in <head>	Performance
prefetch	Low-priority future resource	<link> in <head>	Performance
dns-prefetch	DNS lookup ahead of time	<link> in <head>	Performance
prev/next	Pagination navigation	<a> or <link>	SEO pagination

Security/Privacy Rel Values:

Value	Effect
noopener	Blocks window.opener API
noreferrer	Hides referrer header
nofollow	Don't pass PageRank

Combine: rel="noopener noreferrer nofollow"

SEO Rel Values:

nofollow: Untrusted links, paid links
sponsored: Ads, sponsorships
ugc: User comments, forums
canonical: Prevent duplicate content
prev/next: Paginated series
alternate: Language versions, RSS

Example: Rel attribute usage

<!-- External link security (anchor tags) -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  External Link
</a>

<!-- SEO rel attributes -->
<a href="https://ad-site.com" rel="sponsored nofollow">Advertisement</a>
<a href="/user-comment-link" rel="ugc">User Link</a>

<!-- In head: stylesheets and resources -->
<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <link rel="canonical" href="https://example.com/page">
  
  <!-- Alternative versions -->
  <link rel="alternate" hreflang="es" href="https://example.com/es/page">
  <link rel="alternate" type="application/rss+xml" href="feed.xml">
  
  <!-- Performance hints -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
  <link rel="prefetch" href="next-page.html">
  <link rel="dns-prefetch" href="https://cdn.example.com">
  
  <!-- Pagination -->
  <link rel="prev" href="page-1.html">
  <link rel="next" href="page-3.html">
</head>

<!-- Multiple rel values -->
<a href="https://spam-site.com" rel="nofollow noopener noreferrer external">
  Untrusted External Link
</a>

4. Download Links and File Handling

Feature	Syntax	Behavior	Browser Support
download	`<a download>`	Download with original filename	All modern browsers
download="name"	`<a download="file.ext">`	Download with custom filename	All modern browsers
Same-origin only	N/A	Download only works for same domain	Security restriction
Data URLs	`data:mime;base64,...`	Download generated/inline data	All browsers
Blob URLs	`URL.createObjectURL(blob)`	Download JavaScript-generated files	All modern browsers

Common File Types

Extension	MIME Type
.pdf	`application/pdf`
.zip	`application/zip`
.jpg	`image/jpeg`
.txt	`text/plain`
.csv	`text/csv`
.json	`application/json`

Download Best Practices:

Use meaningful filenames
Include file extension
Set appropriate MIME type
Show file size in link text
Indicate file type to users
Cross-origin downloads may fail

Example: Download links and file handling

<!-- Simple download with original filename -->
<a href="document.pdf" download>Download PDF</a>

<!-- Custom filename -->
<a href="report-2025-q4.pdf" download="Q4-Report.pdf">
  Download Q4 Report (2.3 MB)
</a>

<!-- Multiple file types -->
<a href="data.csv" download="export.csv">Download CSV</a>
<a href="archive.zip" download>Download ZIP (15 MB)</a>
<a href="image.jpg" download="photo.jpg">Download Image</a>

<!-- Data URL download (generated content) -->
<a href="data:text/plain;charset=UTF-8,Hello%20World" 
   download="hello.txt">
  Download Generated Text
</a>

<!-- JavaScript-generated download -->
<button onclick="downloadFile()">Generate and Download</button>
<script>
  function downloadFile() {
    const content = "Generated file content";
    const blob = new Blob([content], {type: 'text/plain'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'generated-file.txt';
    a.click();
    URL.revokeObjectURL(url);
  }
</script>

<!-- CSV download example -->
<a href="data:text/csv;charset=utf-8,Name,Age%0AJohn,30%0AJane,25" 
   download="data.csv">
  Download CSV Data
</a>

Note: Download attribute only works for same-origin URLs. Cross-origin downloads require server CORS headers. Data URLs and Blob URLs work universally.

5. Email and Telephone Links

Type	Syntax	Parameters	Example
Email (mailto)	`mailto:email@domain.com`	subject, body, cc, bcc	`mailto:info@example.com`
Phone (tel)	`tel:+countrycode-number`	None	`tel:+1-555-123-4567`
SMS (sms)	`sms:+number`	body (message text)	`sms:+15551234567`
FaceTime (facetime)	`facetime:email/number`	None	`facetime://user@example.com`

Mailto Parameters:

Parameter	Purpose
subject	Email subject line
body	Email message body
cc	Carbon copy recipient(s)
bcc	Blind carbon copy

Separate with &, URL encode spaces and special chars

Phone Number Format:

Include country code: +1
Remove spaces in href: +15551234567
Display with formatting: (555) 123-4567
Mobile: tap to call
Desktop: opens default phone app
Skype, WhatsApp support

Example: Email and telephone links

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

<!-- Email with subject -->
<a href="mailto:support@example.com?subject=Support Request">
  Contact Support
</a>

<!-- Email with subject and body -->
<a href="mailto:info@example.com?subject=Inquiry&body=Hello, I would like to know...">
  Send Inquiry
</a>

<!-- Email with CC and BCC -->
<a href="mailto:primary@example.com?cc=secondary@example.com&bcc=hidden@example.com">
  Email with CC/BCC
</a>

<!-- Multiple recipients -->
<a href="mailto:first@example.com,second@example.com?subject=Team Meeting">
  Email Team
</a>

<!-- Phone links -->
<a href="tel:+15551234567">Call: (555) 123-4567</a>
<a href="tel:+442071234567">UK: +44 20 7123 4567</a>

<!-- SMS link -->
<a href="sms:+15551234567">Send SMS</a>
<a href="sms:+15551234567?body=Hello, I'm interested in...">
  SMS with preset message
</a>

<!-- FaceTime (Apple devices) -->
<a href="facetime://user@example.com">FaceTime Call</a>

<!-- WhatsApp (requires specific format) -->
<a href="https://wa.me/15551234567?text=Hello">WhatsApp Chat</a>

Warning: Email addresses in mailto links are visible to spam bots. Consider obfuscation, CAPTCHA contact forms, or JavaScript-based email revelation for public sites.

6. Navigation Patterns and Breadcrumbs

Pattern	Purpose	HTML Structure	ARIA/Microdata
Breadcrumbs	Show page hierarchy path	`<nav><ol><li><a>`	`aria-label="Breadcrumb"`
Skip Links	Jump to main content (a11y)	`<a href="#main">`	First in <body>
Pagination	Navigate multi-page content	`<nav><ul><li><a>`	`aria-label="Pagination"`
Main Navigation	Primary site menu	`<nav><ul><li><a>`	`aria-label="Main"`
Tabs	Switch between views	`role="tablist"`	ARIA tab pattern

Breadcrumb Best Practices:

Use <nav> with aria-label
Ordered list <ol> shows hierarchy
Separate with › or / (CSS or text)
Current page can be <span> or disabled link
Add schema.org markup for SEO
Mobile: show only last 2-3 levels

Pagination Patterns:

Previous/Next links
Numbered page links
Ellipsis (...) for skipped pages
Highlight current page
First/Last links optional
Use rel="prev/next"

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

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/products">
        <span itemprop="name">Products</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Current Product</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

<!-- Simple breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li><a href="/subcategory">Subcategory</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

<!-- Pagination navigation -->
<nav aria-label="Pagination">
  <ul>
    <li><a href="?page=1" rel="prev">« Previous</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2" aria-current="page">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><span>...</span></li>
    <li><a href="?page=10">10</a></li>
    <li><a href="?page=3" rel="next">Next »</a></li>
  </ul>
</nav>

<!-- Main navigation -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Note: Use aria-current="page" to indicate current location in navigation. For breadcrumbs, add schema.org structured data to improve SEO and rich snippets.

Section 5 Key Takeaways

Always use rel="noopener noreferrer" with target="_blank" for security
Avoid javascript: protocol; use buttons with event handlers instead
Use rel="nofollow" for untrusted links, rel="sponsored" for ads
Download attribute works for same-origin URLs only; use data/blob URLs for generated files
Mailto links: URL encode parameters, separate with &
Phone links: include country code, format as tel:+15551234567
Breadcrumbs: use <nav> with <ol> and schema.org markup
Skip links improve accessibility by allowing keyboard users to jump to main content

Related Cheatsheets

Frontend