HTML Mastery · Chapter 3
Links & Navigation
The <a> (anchor) tag is one of HTML's most powerful elements. This chapter covers every attribute, use-case, and best practice for links and navigation.
The <a> Anchor Tag — All Attributes
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer"
title="Visit Example.com"
download="report.pdf">
Click Here
</a>
| Attribute | Values | Purpose |
|---|---|---|
| href | URL, #id, mailto:, tel:, javascript:void(0) | The destination of the link. Required for the tag to function as a link. |
| target | _self, _blank, _parent, _top, frame name | Where to open the link. _blank = new tab. _self = same tab (default). |
| rel | noopener, noreferrer, nofollow, sponsored, author, license | Relationship between the current page and the linked page. Critical for security with target="_blank". |
| download | filename string or boolean | Prompts the browser to download the file rather than navigate to it. Optional filename can be specified. |
| hreflang | "en", "fr", etc. | Indicates the language of the linked document. Used by search engines for international SEO. |
| type | MIME type string | Hints at the MIME type of the linked resource (e.g., "application/pdf"). |
| ping | Space-separated URLs | Sends a POST request to these URLs when the link is clicked. Used for analytics tracking. |
| referrerpolicy | no-referrer, origin, same-origin, etc. | Controls the Referer header sent when clicking the link. |
Types of Links
| Link Type | Example | Use Case |
|---|---|---|
| Absolute URL | <a href="https://google.com"> | Links to external websites. Always use the full protocol (https://). |
| Relative URL | <a href="about.html"> | Links to pages within the same website. Relative to the current page location. |
| Root-relative URL | <a href="/contact"> | Relative to the domain root. Works consistently regardless of current page depth. |
| Anchor / Fragment | <a href="#section2"> | Jumps to an element with id="section2" on the same page. Smooth scroll with CSS scroll-behavior: smooth. |
| Email link | <a href="mailto:hi@example.com?subject=Hello"> | Opens the user's default email client. Supports ?subject=, &body=, &cc= query parameters. |
| Phone link | <a href="tel:+1234567890"> | On mobile, taps open the phone dialer. Use E.164 format for international numbers. |
| SMS link | <a href="sms:+1234567890?body=Hello"> | Opens the SMS app on mobile devices. |
| Download link | <a href="/files/report.pdf" download> | Downloads the file instead of navigating. download="name.pdf" sets the filename. |
Security Warning: Always add
rel="noopener noreferrer" when using target="_blank". Without it, the opened page can access the opener window via window.opener — a security vulnerability called "tabnapping."
The <link> Tag (in <head>)
Different from <a>, the <link> tag defines relationships between the document and external resources. It is always self-closing and lives in <head>.
| Use Case | Example |
|---|---|
| Stylesheet | <link rel="stylesheet" href="style.css"> |
| Favicon (tab icon) | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
| Apple Touch Icon | <link rel="apple-touch-icon" href="icon-180.png"> |
| Canonical URL (SEO) | <link rel="canonical" href="https://example.com/page"> |
| Preload resource | <link rel="preload" href="hero.jpg" as="image"> |
| Preconnect to origin | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| DNS prefetch | <link rel="dns-prefetch" href="https://cdn.example.com"> |
| Alternate language | <link rel="alternate" hreflang="fr" href="https://example.fr/page"> |
| RSS / Atom Feed | <link rel="alternate" type="application/rss+xml" href="/feed.xml"> |
| Web manifest (PWA) | <link rel="manifest" href="/manifest.json"> |
<link> Element Attributes
| Attribute | Purpose |
|---|---|
| rel | Specifies the relationship. Common values: stylesheet, icon, canonical, preload, preconnect. |
| href | The URL of the linked resource. |
| type | MIME type of the linked resource (e.g., text/css, image/x-icon). |
| media | Media query for conditional loading (e.g., print, (max-width: 768px)). |
| as | Required with rel="preload". Specifies resource type: script, style, image, font, fetch. |
| crossorigin | Required for preloading fonts. Values: anonymous, use-credentials. |
| hreflang | Language of the linked document (used with rel="alternate"). |
| sizes | Sizes of icons. Used with rel="icon": e.g., 16x16, 32x32, any. |
Chapter Summary
- The
<a href>tag creates hyperlinks — the foundation of the web - Use
rel="noopener noreferrer"with everytarget="_blank"link mailto:,tel:, andsms:create special protocol links- The
<link>tag in<head>connects stylesheets, icons, canonical URLs, and preloads - Use
rel="canonical"to prevent duplicate content issues in SEO