HTML — Semantic Foundations

• · HT1 — Use the native element that matches the semantic/interactive need before reaching for a generic div/span + ARIA.
• · HT2 — One h1 per page; headings sequential, never skipped for visual-size reasons.
• · HT3 — Landmark elements (header, nav, main, aside, footer) structure every page.
• · HT4 — Every form input has a real, bound <label>.
• · HT5 — Interactive elements are natively focusable/activatable (button, a[href]) — never a click handler on a non-interactive element.

• · Before writing a div with a click handler, ask "is there a native element for this?" (button, a, details, dialog, summary).
• · Read the page as an outline (headings only) — does it make sense stripped of all styling?
• · If a form works without labels visually (placeholder-only), it's already broken for screen readers and autofill.
• · View source, not just the rendered DOM — does the semantic structure exist in markup, or only via CSS/JS-driven appearance?

• · Div soup — click handlers on non-interactive elements. See WCAG anti-patterns.
• · Heading-as-styling — using h3 because "it looks the right size," ignoring document structure.
• · Placeholder-as-label — no bound <label>, placeholder text only.
• · Layout tables — <table> used for visual grid layout instead of CSS Grid/Flexbox.
• · Generic link text — <a> wrapping "click here" instead of a descriptive phrase.

• [ ] Interactive elements are native or fully ARIA-patterned. (HR1)
• [ ] All inputs have bound labels. (HR3)
• [ ] Heading hierarchy sequential, one h1. (HR4)
• [ ] Images have appropriate alt. (HR2)
• [ ] Landmarks structure the page. (HR6)
• [ ] Correct input types used. (HR8)

• HTML Living Standard

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

• webHTML Living StandardWHATWG
• webMDN HTML ReferenceMozilla