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