HTML

Reference cards for HTML elements: their content models, default ARIA semantics, and what passing implementations look like for users.

• <picture>, srcset, and responsive images

  <picture> with <source> and srcset selects the best image for the viewport, pixel density, and supported format. The replacement for the JavaScript-shimmed responsive-image patterns of 2014–2018.

• HTML <details> and <summary>

  <details> is the native disclosure widget. The 2024 name attribute lets a group of <details> behave as an exclusive accordion. Replaces a long history of ad-hoc collapsible-panel JavaScript.

• HTML <form> element and submission semantics

  <form> wraps a set of controls and defines how they are submitted. Knowing the difference between native validation, the FormData API, and constraint validation prevents most form bugs.

• HTML <table> for data, with accessible headers

  <table> is the right element for tabular data and only tabular data. Correct use of <caption>, <thead>, <th scope>, and <td headers> is the difference between an accessible table and a grid of unrelated cells.

• HTML semantic elements

  HTML's semantic vocabulary — header, nav, main, article, section, aside, figure, footer — encodes structure that browsers, search engines, and assistive technology rely on.

• The HTML <button> element

  <button> is the right element for any user-action affordance. Three type values, optional form integration, and the 2024 commandfor / command attributes for declarative popover and dialog control.

• The HTML <dialog> element

  <dialog> is the native HTML modal and non-modal dialog element. It manages focus trapping, the top layer, and inert background, replacing many ad-hoc modal libraries.

• The HTML <input> element and its types

  <input> with its 22 type values is the most variable element in HTML. Each type carries different validation, keyboard, and platform UI semantics. Picking the right type is the difference between mobile autofill working or not.