Claude-skill-registry html-standards

HTML standards for Oh My Brand! theme. Semantic elements, accessibility requirements, ARIA attributes, and attribute best practices. Use when writing HTML templates or render output.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/html-standards" ~/.claude/skills/majiayu000-claude-skill-registry-html-standards && rm -rf "$T"

manifest: skills/data/html-standards/SKILL.md

source content

HTML Standards

HTML standards and accessibility requirements for the Oh My Brand! WordPress FSE theme.

When to Use

Writing block render templates (
```
render.php
```
)
Creating HTML structure for Web Components
Ensuring accessibility compliance
Adding proper ARIA labels and attributes

Reference Files

File	Purpose
gallery-block.html	Complete semantic structure example
aria-patterns.html	Live regions, tabs, dialogs, expandable
image-patterns.html	Alt text, lazy loading, LCP optimization
interactive-elements.html	Buttons, links, forms

Semantic Element Usage

Element	Usage
`<article>`	Self-contained content (blocks, posts)
`<section>`	Thematic grouping of content
`<header>`	Introductory content or navigational aids
`<nav>`	Navigation links
`<main>`	Main content of the document
`<aside>`	Tangentially related content
`<footer>`	Footer of section or page
`<figure>`	Self-contained content like images
`<figcaption>`	Caption for a figure
`<details>`	Disclosure widget (expandable)
`<summary>`	Summary for details element

Heading Hierarchy

Maintain logical heading hierarchy (never skip levels):

<!-- ✅ Correct hierarchy -->
<h1>Page Title</h1>
    <h2>Section Title</h2>
        <h3>Subsection Title</h3>

<!-- ❌ Skip levels -->
<h1>Page Title</h1>
    <h3>Missing h2!</h3>

Image Attributes

Attribute	Purpose
`alt`	Alternative text for accessibility
`width` / `height`	Prevents layout shift (CLS)
`loading="lazy"`	Defers off-screen images
`loading="eager"`	First image (LCP optimization)
`decoding="async"`	Non-blocking decode
`fetchpriority="high"`	Prioritize LCP image

See image-patterns.html for complete examples.

Button Attributes

Attribute	Purpose
`type="button"`	Prevents form submission
`aria-label`	Accessible name when text insufficient
`aria-expanded`	Toggle state for expandable content
`aria-controls`	ID of controlled element
`disabled`	Disables interaction

Link Attributes

Attribute	Purpose
`target="_blank"`	Opens in new tab
`rel="noopener noreferrer"`	Security for new tab links
`download`	Triggers file download

ARIA Patterns

Live Regions

Attribute	When to Use
`aria-live="polite"`	Non-urgent updates (status messages)
`aria-live="assertive"`	Urgent updates (errors)
`role="alert"`	Error messages
`aria-atomic="true"`	Announce entire region

Expandable Content

Attribute	Purpose
`aria-expanded`	Current expanded state
`aria-controls`	ID of controlled panel
`hidden`	Hide collapsed content

Tabs

Attribute	Purpose
`role="tablist"`	Container for tabs
`role="tab"`	Individual tab button
`role="tabpanel"`	Tab content panel
`aria-selected`	Currently selected tab
`aria-controls`	Links tab to panel
`aria-labelledby`	Links panel to tab

Modal Dialog

Attribute	Purpose
`aria-labelledby`	Links to dialog title
`aria-describedby`	Links to description
`aria-modal="true"`	Indicates modal behavior

See aria-patterns.html for complete examples.

Form Input Attributes

Attribute	Purpose
`type`	Input type (email, tel, url, etc.)
`id`	Links to label
`name`	Form data key
`required`	Required field
`autocomplete`	Autofill hint
`aria-describedby`	Links to description/error
`aria-invalid`	Invalid state

Related Skills

php-standards - PHP output escaping
css-standards - Accessibility styling
web-components - Web Component HTML structure
native-block-development - Block render templates