web-platform-guidelineslisted

# Web Platform Design Guidelines Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs. --- ## 1. Accessibility / WCAG [CRITICAL] Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG. ### 1.1 Use Semantic HTML Elements Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support. | Element | Purpose | |---------|---------| | `<main>` | Primary page content (one per page) | | `<nav>` | Navigation blocks | | `<header>` | Introductory content or navigational aids | | `<footer>` | Footer for nearest sectioning content | | `<article>` | Self-contained, independently distributable content | | `<section>` | Thematic grouping with a heading | | `<aside>` | Tangentially related content (sidebars, callouts) | | `<figure>` / `<figcaption>` | Illustrations, diagrams, code listings | | `<details>` / `<summary>` | Expandable/collapsible disclosure widget | | `<dialog>` | Modal or non-modal dialog boxes | | `<time>` | Machine-readable dates/times | | `<mark>` | Highlighted/referenced text | | `<address>` | Contact information for nearest article/body | ```html <!-- Good --> <main> <article> <h1>Article Title</h1> <p>Content...</p> </article> <aside>Related links</aside> </main> <!-- B