# Hidden Content

Wrap content in `hidden:` / `/hidden` to make it invisible on screen but present in the HTML. Screen readers, search engines, and AI crawlers still see it.

## When would I use this?

The most common case is adding an H1 heading for SEO without showing it on the page. Some designs — landing pages, hero sections, visually-driven layouts — don't want a visible H1, but search engines expect one. The SEO audit flags pages missing an H1, and `hidden:` is the fix.

Other uses:

| Use case | Example |
|---|---|
| SEO heading | Add an H1 that search engines index but visitors don't see |
| Accessible label | Provide context for screen reader users on icon-only buttons |
| Skip link target | Label a content region for keyboard navigation |
| Supplemental text | Add search-indexable content that doesn't fit the visual design |

## How does it work?

The `hidden:` fence wraps content in a `<div class="sr-only">` element. The CSS uses absolute positioning and clipping to make the element invisible while keeping it in the DOM — the standard [screen-reader-only](https://www.tpgi.com/the-anatomy-of-visually-hidden/) technique used by Bootstrap, Tailwind, and most CSS frameworks.

The content is:
- **Not visible** to sighted users
- **Read aloud** by screen readers
- **Indexed** by search engines and AI crawlers
- **Present** in the HTML source

## Adding a hidden H1

```markdown
hidden:
# My Page Title
/hidden

The rest of your page content is visible as normal.
```

The H1 renders in the HTML with its auto-generated anchor ID, but nothing appears on screen. The [SEO audit](/docs/seo-audit) recognizes it as a valid H1.

## Hiding multiple elements

Any markdown works inside the fence — headings, paragraphs, lists, links:

```markdown
hidden:
# Product Overview

This page showcases our flagship product line with pricing and specifications.
/hidden

button: Shop Now: /shop +big
```

## Combining with alignment

Hidden fences can be used alongside [alignment fences](/docs/content-alignment). Since the content is invisible, alignment inside a `hidden:` block has no visual effect, but the HTML structure is preserved:

```markdown
hidden:
# Welcome to Our Site
/hidden

center:
## Browse Our Collection
/center
```

## Syntax reference

| Fence | Effect |
|---|---|
| `hidden:` / `/hidden` | Visually hide content (screen-reader-only) |

Hidden fences are block-level — each fence tag must be on its own line. Content inside fenced code blocks is not processed.