---
title: "Citation-Ready Anchors"
category: studio-standards
status: recommended
url: https://webspecification.com/spec/studio-standards/citation-ready-anchors/
source_repo: undefined
licence: CC-BY-4.0
---

# Citation-Ready Anchors

> Engineering persistent deep-links onto every paragraph to encourage direct AI source citations.

## What is it?

Citation-Ready Anchors involve automatically injecting stable, persistent HTML `id` attributes into every block-level element (`<p>`, `<li>`, `<blockquote>`) containing factual data or statistics.

## Why does it matter?

AI Answer Engines (like Perplexity) prioritize sources that allow for granular, exact-passage citations. If an AI wants to cite a statistic in your 5,000-word article, linking to the top of the page is a poor user experience. Providing deep-links (`#stat-xyz`) encourages algorithms to cite your specific paragraph, drastically increasing click-through rates from AI interfaces.

## How to implement it

### 1. Hash Generation
Generate a short, deterministic hash based on the content of the paragraph or use a slugified version of the first few words.

```html
<p id="73b2a1f">According to recent studies, 40% of users will abandon a site that takes longer than 3 seconds to load.</p>
```

### 2. UI Affordance (Optional)
Provide a subtle UI mechanism (like a pilcrow `¶` or a link icon that appears on hover) allowing human users to also copy the deep-link.

```css
p:hover .anchor-link {
  opacity: 1;
}
```

## Verification

- Ensure that updating the text of the paragraph does not change the `id` (if possible), to prevent link-rot for external AI citations.
- Verify that navigating to the URL with the `#id` appended correctly scrolls the viewport to the exact block.