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:

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 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

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 recognizes it as a valid H1.

Hiding multiple elements

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

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. Since the content is invisible, alignment inside a hidden: block has no visual effect, but the HTML structure is preserved:

hidden:
# Welcome to Our Site
/hidden

center:
## Browse Our Collection
/center

Syntax reference

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