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

html-standards