HTML

Semantic HTML is the cheapest accessibility and SEO win available — the browser gives you behavior, focus, and meaning for free when you use the right element. Reach for a <div> only when no semantic element fits.

Use the right element

• Structure with landmarks: <header>, <nav>, <main> (one per page), <aside>, <footer>, <section>, <article>.
• Headings describe outline order — one <h1> per page, never skip levels for styling.
• Interactive = real elements: <button> for actions, <a href> for navigation. Never a clickable <div> (you lose focus, keyboard, and roles).
• Lists for collections (<ul>/<ol>/<dl>); <table> only for tabular data (with <caption>, <th scope>).
• <figure>/<figcaption>, <time datetime>, <details>/<summary> carry real semantics — use them.

Forms (where most bugs live)

• Every input has a <label for> (or wraps the input). Placeholder is not a label.
• Use correct type (email, tel, number, url, date) and inputmode/autocomplete — better keyboards and autofill.
• Group related fields in <fieldset> + <legend> (radios, checkboxes).
• Use native validation (required, pattern, min/max) before JS; associate errors with aria-describedby.
• A submit control inside a <form> should be <button type="submit">.