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

html

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

Search AI Tools

html-standards

Install this agent skill to your Project

Metadata

SKILL.md