HTML/CSS Guide

Applies to: HTML5, CSS3, SCSS/LESS, Responsive Design, WCAG 2.1 AA

Core Principles

1. Semantic First: Use HTML elements for their meaning, not their appearance; style with CSS
2. Accessible by Default: Every page must be navigable by keyboard, screen reader, and assistive technology
3. Progressive Enhancement: Build a solid HTML foundation, then layer on CSS and JavaScript
4. Mobile First: Design for the smallest viewport, then enhance with min-width media queries
5. Performance Budget: Minimize render-blocking resources; prefer system fonts, modern image formats, and critical CSS inlining

Guardrails

Semantic HTML

• Use <main> once per page; <header>, <footer>, <nav>, <aside> for landmarks
• Use <article> for self-contained content; <section> for thematic groups with a heading
• Use <figure>/<figcaption> for captioned media; <time datetime="..."> for dates