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.
日本語に翻訳 name: html-standards
description: 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.
metadata:
author: Wesley Smits
version: "1.0.0"
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
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 altAlternative text for accessibility width / heightPrevents 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-labelAccessible name when text insufficient aria-expandedToggle state for expandable content aria-controlsID of controlled element disabledDisables interaction
Link Attributes
Attribute Purpose target="_blank"Opens in new tab rel="noopener noreferrer"Security for new tab links downloadTriggers 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-expandedCurrent expanded state aria-controlsID of controlled panel hiddenHide collapsed content
Tabs
Attribute Purpose role="tablist"Container for tabs role="tab"Individual tab button role="tabpanel"Tab content panel aria-selectedCurrently selected tab aria-controlsLinks tab to panel aria-labelledbyLinks panel to tab
Modal Dialog
Attribute Purpose aria-labelledbyLinks to dialog title aria-describedbyLinks to description aria-modal="true"Indicates modal behavior
See aria-patterns.html for complete examples.
Form Input Attributes
Attribute Purpose typeInput type (email, tel, url, etc.) idLinks to label nameForm data key requiredRequired field autocompleteAutofill hint aria-describedbyLinks to description/error aria-invalidInvalid state
Related Skills
php-standards - PHP output escapingcss-standards - Accessibility stylingweb-components - Web Component HTML structurenative-block-development - Block render templates
References