html-standards

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

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

---

References

• MDN Web Docs: HTML elements
• W3C WAI-ARIA Practices
• WCAG 2.1 Quick Reference
• WebAIM: Web Accessibility