Page Title

` for sections | `

`, `

` | Landmark navigation | | `

` for content | `

`, `

` | Content boundaries | | `` for emphasis | ``, ``, ``, `` | Semantic meaning | | `
` for lists | `
`, `
`, `
` | List recognition | | `
` for tables | `` with ``, ``, `
` | Tabular data parsing | | `
` | ` ``` Naming: kebab-case, descriptive, component-scoped for large apps. Apply to: interactive elements, content containers, key text nodes, form fields. ### Other data attributes | Attribute | Purpose | |-----------|---------| | `data-action` | Describe element action | | `data-entity-type` | Content entity type | | `data-entity-id` | Unique entity identifier | | `data-state` | Current component state | | `data-section` | Label page sections | --- ## 5. Forms ```html Email address
Shipping Address Street
Name is required ``` Checklist: - Every `` has associated `` (via for/id or wrapping) - Use `name` attributes that describe the field - Use `autocomplete` for standard fields - Group related fields with `
` + `` - Use appropriate `type` (email, tel, url, date, number) - Mark required fields with `required` or `aria-required` - Associate errors with `aria-describedby` --- ## 6. Navigation - Use `
` with `aria-label` for all navigation regions - Include skip link as first focusable element - Provide breadcrumbs with `BreadcrumbList` structured data - Use `aria-current="page"` for current page - Use descriptive link text (not "click here") - Provide `/sitemap.xml` with `lastmod` dates --- ## 7. API Discoverability ```html ``` REST: consistent URL patterns, OpenAPI specs, content negotiation, Link headers for pagination. --- ## 8. Meta & Machine Signals ```html ``` - Set `` - Don't block agent-relevant content in robots.txt - Provide sitemap.xml - Use `` for multi-language --- ## 9. CSS Selector Stability - Use semantic class names: `.product-card`, `.nav-primary` - If using CSS-in-JS, add `data-testid` as stable anchors - Prefer BEM or consistent naming convention - Never rely on `:nth-child` for critical targeting --- ## 10. Agent Interaction Patterns ### Actions - Buttons and links: clear, descriptive text - Group related actions within `
`, ``, `
` - Label destructive actions clearly ("Delete account" not "Remove") ### State - Use `aria-expanded`, `aria-selected`, `aria-checked` - Use `aria-busy="true"` for loading - Keep DOM state in sync with visual state ### Content extraction - Wrap standalone content in `
` - Use `` for dates - Use `` for machine-readable values - Use `` for abbreviations