HTML Link Examples: How to Add Links to a Page

Use an anchor element with an href:

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

The href contains the destination URL, and the text between the opening and closing tags is the visible, clickable label. An anchor with href represents a hyperlink; an <a> without href is only a placeholder. See the WHATWG HTML Standard and MDN’s anchor reference.

1. Basic HTML link syntax

<a href="URL">Descriptive link text</a>

Use a label that tells people where the link goes or what it does. “Read the API reference” is more useful than “click here.”

<p>
  Read the <a href="https://developer.mozilla.org/">MDN Web Docs</a>.
</p>

2. Link to another website

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

An absolute URL includes the scheme and host. Use https:// for secure sites. The browser follows the URL when the visitor activates the link.

3. Link to another page on your site

<a href="/about.html">About us</a>
<a href="/docs/getting-started.html">Getting started</a>

A root-relative URL starts at the site’s root. A document-relative URL is resolved from the current page:

<a href="contact.html">Contact</a>
<a href="../index.html">Back to the home page</a>

Relative links can keep working if you move the site to another domain. Resolve them against the current document path, as described in MDN’s creating-links guide.

3. Link to a section on the same page

Give the destination element a unique id, then use that value after #:

<a href="#pricing">See pricing</a>

<h2 id="pricing">Pricing</h2>

The fragment is not sent as part of the HTTP request. It tells the browser which element to scroll to after the document loads. IDs are case-sensitive in practice, so keep the spelling identical and avoid spaces.

4. Link to a section on another page

<a href="details.html#specifications">Read the specifications</a>

The target page must contain an element with id="specifications":

<h2 id="specifications">Specifications</h2>

For a fixed header, add scroll spacing so the heading is not hidden:

:target {
  scroll-margin-top: 5rem;
}

5. Email and telephone links

<a href="mailto:hello@example.com">Email support</a>
<a href="tel:+15550102020">Call +1 555 010 2020</a>

mailto: usually opens the visitor’s configured email application. You can supply a subject and body, but URL-encode reserved characters:

<a href="mailto:hello@example.com?subject=Project%20question&body=Hello%20there">
  Email the project team
</a>

tel: behavior depends on the device and installed applications. Keep the visible label explicit so visitors understand the action.

6. Open a link in a new tab

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

target="_blank" requests a new browsing context. Current browsers provide implicit noopener behavior for this target, but the explicit attribute makes the intent clear. Tell users that a new tab opens, especially for important navigation.

Use rel="noreferrer" as well when you also want to omit the referrer:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open the external report (opens in a new tab)
</a>

7. Download a file

<a href="/files/guide.pdf" download>Download the guide (PDF)</a>
<a href="/files/report.csv" download="quarterly-report.csv">
  Download the CSV report
</a>

The download attribute suggests downloading instead of navigating. Browsers may ignore it for cross-origin URLs unless the server supplies appropriate headers, and the server’s Content-Disposition header can influence the final filename.

8. Add query parameters safely

<a href="/search?q=html&sort=recent">Recent HTML results</a>

In HTML source, write an ampersand as &. Encode user-provided values before inserting them into a URL:

const query = encodeURIComponent(userInput);
link.href = `/search?q=${query}`;

Never concatenate untrusted HTML into a page. Set the DOM property or use safe templating so the browser escapes markup.

9. Accessibility and link text

Describe the destination or action in the link text.
Do not rely on color alone; preserve visible focus styles and sufficient contrast.
Make the focus indicator easy to see when using a keyboard.
Use a real <a href> for navigation. Use a <button> for an in-page action such as opening a dialog.
If a link opens a new tab or downloads a file, say so in the label.
Do not use an empty href or a placeholder anchor for JavaScript actions.

<a href="/pricing">View pricing</a>
<button type="button" id="copy-key">Copy API key</button>

10. Styling links with CSS

a {
  color: #075985;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: #0c4a6e;
}

a:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Keep links recognizable in their normal state. Avoid removing underlines everywhere unless another clear visual treatment remains.

11. Common link errors and fixes

Symptom	Cause	Fix
Click does nothing	The anchor has no `href`, or JavaScript cancels the click.	Add a valid `href`; remove unnecessary `preventDefault()`.
404 Not Found	The relative path is resolved from a different directory than expected.	Inspect the current URL and correct `../`, root-relative, or filename segments.
Section link does not scroll	No matching `id`, duplicate IDs, or a typo in the fragment.	Use one unique ID and match its spelling exactly.
URL shows literal `&`	The ampersand was encoded twice.	Encode once in HTML source as `&`; inspect the resulting DOM URL.
New tab has unexpected opener behavior	Missing relationship attributes in older or unusual browsers.	Use `target="_blank" rel="noopener"`.
Email or phone link is not useful	The device has no configured handler for `mailto:` or `tel:`.	Provide the address or number as visible text and offer a normal contact page too.
Heading is hidden under a sticky header	The fragment scrolls the target to the viewport edge.	Apply `scroll-margin-top` to target headings.

12. Test checklist

Activate every link with a mouse, keyboard, and touch device.
Confirm external links use the intended scheme and host.
Check relative links from nested directories, not only from the home page.
Test every fragment after a fresh page load and with a sticky header present.
Verify new-tab, download, email, and telephone behavior on the devices you support.
Check focus visibility and link labels with a screen reader or accessibility audit.

13. Or skip the browser setup

If your next step is capturing a page after adding or reviewing links, ScreenshotNeo returns a screenshot or PDF with one GET request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

See the ScreenshotNeo API documentation for all options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

The API also supports full-page and element captures, custom CSS and JavaScript, waits, request blocking, headers, cookies, device presets, PDFs, caching, signed links, asynchronous jobs, bulk capture, and an MCP server whose tools let AI agents take screenshots. One thousand screenshots a month are free with no card; paid plans start at $5 for 3,000.

Create your free ScreenshotNeo account.

14. Performance, reliability, and cost notes

Prefer relative internal URLs when the same content may move between domains or environments.
Keep link labels short and descriptive; this improves scanning and reduces layout shifts.
Use fragments for navigation inside a page instead of JavaScript scrolling code.
Validate generated URLs and encode query values once.
For automated visual checks, use caching with a TTL when repeated captures can reuse the same page.
Use waits for a selector, delay, or network idle when content is rendered asynchronously.
For large batches, ScreenshotNeo supports up to 100 URLs per call and asynchronous jobs with signed webhooks.

15. FAQ

What is the minimum HTML needed for a link?

<a href="/page.html">Page</a>. The href makes the anchor a hyperlink.

Should internal links be absolute or relative?

Both work. Relative paths are often easier to move between domains; absolute URLs are explicit and useful when sharing a canonical address.

Can I link directly to a heading?

Yes. Add a unique id to the heading and link to #that-id.

Is `target="_blank"` required?

No. Use it only when opening a new browsing context helps the user, and explain that behavior in the label.

Why does my email link open the wrong application?

The operating system chooses the registered mailto: handler. The HTML link cannot force a particular email client.