Inspect a hidden-link example

Local visual simulation. No website is scanned or changed; example URLs are inert code.

Changing case restores its original state. Reveal is an inspection aid, not a production fix. Without JavaScript, read the six cases and downloads below.

The hidden attribute

What this pattern means

The hidden attribute normally prevents rendering, but CSS can override its display behavior.

What to inspect on your own page

Inspect the element, ancestor states and final computed display; source alone is not the whole rendering result.

Next action

Confirm why the reference exists before changing the template or content record.

Original

Anchor present in the example: Yes

<a href="https://reference.example/guide" hidden>Reference guide</a>

Reveal for inspection

Anchor present in the example: Yes

<a href="https://reference.example/guide">Reference guide</a>

Remove sample reference

Anchor present in the example: No

<p>Reference guide</p>
A display:none rule

What this pattern means

The sample anchor remains in HTML while its own display rule removes its box.

What to inspect on your own page

Inspect the matched rule and its origin; also check whether an ancestor suppresses the entire section.

Next action

For an unwanted reference, remove the owning content or template insertion and verify the deployed page.

Original

Anchor present in the example: Yes

<a href="https://reference.example/guide" style="display:none">Reference guide</a>

Reveal for inspection

Anchor present in the example: Yes

<a href="https://reference.example/guide">Reference guide</a>

Remove sample reference

Anchor present in the example: No

<p>Reference guide</p>
A visibility:hidden rule

What this pattern means

The sample is invisible while its layout space can remain.

What to inspect on your own page

Inspect computed visibility and inherited or overridden values; a screenshot does not establish link absence.

Next action

Correct the responsible rule only when visibility is the intended fix; record the reason.

Original

Anchor present in the example: Yes

<a href="https://reference.example/guide" style="visibility:hidden">Reference guide</a>

Reveal for inspection

Anchor present in the example: Yes

<a href="https://reference.example/guide">Reference guide</a>

Remove sample reference

Anchor present in the example: No

<p>Reference guide</p>
A transparent reference

What this pattern means

Opacity zero makes the sample visually transparent without removing its source anchor.

What to inspect on your own page

Inspect opacity, ancestor opacity and the actual destination. Visual absence does not prove DOM absence.

Next action

Review the source owner and purpose; do not report the reference removed until the anchor is gone.

Original

Anchor present in the example: Yes

<a href="https://reference.example/guide" style="opacity:0">Reference guide</a>

Reveal for inspection

Anchor present in the example: Yes

<a href="https://reference.example/guide">Reference guide</a>

Remove sample reference

Anchor present in the example: No

<p>Reference guide</p>
A closed disclosure

What this pattern means

Content inside a closed details element can be intentionally available through its summary.

What to inspect on your own page

Open the disclosure and inspect the reference, its purpose and the final HTML; hidden at rest is not automatically spam.

Next action

Preserve useful disclosure behavior. Investigate an unexpected destination separately from the component.

Original

Anchor present in the example: Yes

<details><summary>Supporting reference</summary><a href="https://reference.example/guide">Reference guide</a></details>

Reveal for inspection

Anchor present in the example: Yes

<details open><summary>Supporting reference</summary><a href="https://reference.example/guide">Reference guide</a></details>

Remove sample reference

Anchor present in the example: No

<details><summary>Supporting reference</summary><p>Reference guide</p></details>
Clipped accessibility text

What this pattern means

Visually clipped text can serve assistive technology; that purpose must be checked rather than guessed.

What to inspect on your own page

Inspect the accessible name, surrounding controls and focus behavior using appropriate accessibility tools.

Next action

Do not remove useful accessible text merely because it is not visible. Fix an unwanted destination at its source.

Original

Anchor present in the example: Yes

<a href="https://reference.example/guide" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap">Reference guide</a>

Reveal for inspection

Anchor present in the example: Yes

<a href="https://reference.example/guide">Reference guide</a>

Remove sample reference

Anchor present in the example: No

<p>Reference guide</p>