# HTML > HTML5 semantic rules - landmarks, forms structure, multimedia, interactive components, SEO (JSON-LD), performance and declarative components - Skill: `14bryanespinoza/html` (Agent Skill) - Install (CLI): `npx skillmds@latest add 14bryanespinoza/html` - Raw SKILL.md: https://api.skillmd.com/api/skills/14bryanespinoza/html/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: 14BryanEspinoza (https://skillmd.com/u/14bryanespinoza) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/14bryanespinoza/html --- # HTML5 - Rules and Conventions --- ## 1. Philosophy 1. **Semantics first** — Every tag has meaning. Prefer `

`, `

` and `

` over generic `

`s. HTML must stay readable without CSS. 2. **Accessibility by default** — WCAG AA is the minimum: `lang`, `alt`, labels, contrast, keyboard access, hierarchical headings. 3. **Progressive enhancement** — Content works without JavaScript; JS only adds enhancements, never required to read or operate. 4. **Structure over presentation** — HTML defines meaning; CSS owns looks. 5. **Less is more** — minimal semantic markup, no purposeless containers. ## 2. Minimum Versions | Technology | Version | | ---------- | ------------------------------ | | HTML | Living Standard (WHATWG HTML5) | Baseline-first policy: prefer elements and attributes labeled Baseline on MDN; experimental features require a documented guard before use. ## 3. Base Structure Start every page from this skeleton: skip link, primary landmarks, single `

`. ```html Page title

Main title

Article content

``` The skip link must be the first focusable element and target `#main`; its show-on-focus styling is CSS work (see [CSS](../css/SKILL.md)). ### Doctype, Lang and hreflang **Rule:** always declare `` and set `lang` on ``; multilingual sites link every alternative version, including themselves. **Why:** missing `lang` breaks screen readers; missing hreflang splits ranking across duplicate pages. ```html ``` ## 4. Semantic Landmarks | Tag | Purpose | | ----------- | --------------------------------- | | `

` | Page or section header | | `

` | Navigation (label when multiple) | | `` | Search / find (Baseline 2023) | | `

` | Main content (unique per page) | | `

` | Independent content (post, card) | | `

` | Thematic grouping (needs heading) | | `

` | Complementary content | | `

` | Page or section footer | For anything beyond these landmarks (content models, text-level semantics such as `` or ``), consult the MDN HTML elements index. ## 5. Tables Data tables only; layout tables are prohibited. Give every header cell a `scope` (`col`, `row`, `colgroup`, `rowgroup`), add a ``, and use `` for column targeting. ```html

Sales by quarter 2026
Quarter	Sales
Q1	$10,000

``` `scope` values: `col`, `row`, `colgroup`, `rowgroup`. ## 6. Forms HTML owns form **structure**: styling is CSS ([CSS](../css/SKILL.md)); submission behavior and complex validation logic are JavaScript ([JavaScript](../javascript/SKILL.md)). ### Accessible Structure ```html ``` Non-negotiables: every control has a `` (a placeholder is never a label); related controls group under `

` + ``; hints and errors link via `aria-describedby`. **Rule:** let native validation run. Add `novalidate` only when JavaScript owns the entire validation flow, and then announce errors with `role="alert"` plus `aria-invalid="true"` on invalid fields. **Why:** disabling native validation without replacing its announcements breaks error reporting for assistive technology. ### Search Landmark `` wraps a form and exposes the landmark implicitly (Baseline 2023); an inner `role="search"` would duplicate it. ### Input Types Pick the most specific type: right mobile keyboard plus free validation. | Type | Use | Native validation | | ---------- | --------------------------- | ----------------------------------- | | `text` | Generic text | `minlength`, `maxlength`, `pattern` | | `email` | Email address | Email format | | `password` | Passwords | `minlength` | | `tel` | Phone | `pattern` | | `url` | URLs | URL format | | `number` | Numbers | `min`, `max`, `step` | | `date` | Dates | `min`, `max` | | `file` | File upload | `accept` | | `checkbox` | Multiple options | — | | `radio` | Single option | — | | `hidden` | Hidden data (non-sensitive) | — | ### Native Validation Declarative constraints first — they validate without a single line of JS: ```html ``` Custom error messages and real-time `aria-invalid` wiring are JavaScript behavior (see [JavaScript](../javascript/SKILL.md)). ### Autocomplete Always set `autocomplete` on identity and payment fields: browsers and password managers fill them correctly, and audits check for it. Common tokens: `name`, `email`, `tel`, `street-address`, `postal-code`, `cc-number`, `new-password`, `current-password`. ## 7. Multimedia **When:** any image, video or audio embed. **Rule:** declare intrinsic dimensions (`width`/`height`) so the browser reserves space before load. **Why:** unreserved space makes media cause layout shift (CLS). ### Images ```html Image description

``` Use `` for resolution switching; `