Skip to content

Reference

HTML element reference

Choose a native element for its meaning and behavior, then follow the related Thin-Sky contracts for presentation and enhancement.

WHATWG element index · MDN element reference

Elements

Document root

Baseline. Set the theme, inherited type, foreground and background, and document sizing. Keep user zoom and text scaling. Use scoped layouts to size sections within the document.

Metadata and scripts

Browser. These configure the document and its resources. Keep them outside the visual styling API.

Landmarks and sections

Scoped. Style the chosen landmark or section with a class. Use article when content stands independently, nav for navigation, and search for a named search task. Keep filters that refine the current view as forms when they do not represent a separate search task. The class does not supply a landmark or its name.

Headings

Baseline and scoped. Give all six heading levels readable defaults. Set size and rhythm within the composition when needed. Keep heading rank in HTML and preserve the grouping of the heading with its supporting copy.

Flow, quotes, and code blocks

Baseline and scoped. Use a prose scope for rhythm and reading measure. Preserve preformatted whitespace and give long lines a usable scroll or wrap policy. Use a thematic break for hr and a neutral div for grouping.

Lists and descriptions

Baseline and scoped. Preserve markers, numbering, list order, and term/description relationships. A list can also be a Stack, Grid, or Cluster. Suppress markers only in a deliberate component and verify list semantics in its accessibility tree.

role="toolbar"

Group a set of controls and provide the keyboard interaction expected of a toolbar.

Figures

Baseline and scoped. Keep the caption with its figure. Use a class for media framing, caption position, or deliberate cropping.

Inline meaning

Baseline and scoped. Preserve the distinctions expressed by emphasis, quotes, edits, annotations, and highlights. Keep authored value, datetime, and cite semantics. Use a span as a neutral hook. Keep important information available as text.

Inline code and keys

Baseline and scoped. Use monospace defaults. Add a scoped keycap or inline code treatment where useful. Keep keyboard sequences readable at larger text sizes.

Direction, breaks, and annotations

Browser with scoped typography. Respect authored lang and dir, optional and forced break opportunities, and native ruby and baseline positioning. Scope any typographic adjustments to the relevant content.

Images and source selection

Baseline and browser. Let images shrink within their container while preserving intrinsic aspect ratio. Use authored sizes and alternatives. Style the rendered image, and preserve responsive source selection and image map hit areas.

Audio and video

Baseline and browser. Constrain the player to available width. Keep controls, captions, and alternative media usable. Style media controls or caption cues only within a specific, tested treatment.

Embeds and drawing surfaces

Scoped and browser. Size the outer surface and preserve accessible titles, object fallback, and canvas fallback. An iframe owns its own document and styles. Changing a canvas's CSS size is separate from changing its drawing resolution.

Foreign content

Scoped and browser. Size and color decorative icons inside an icon scope. Preserve illustration fills, accessible labels, and MathML layout. Avoid global icon resets on all SVGs.

Tables

Baseline and scoped. Keep table layout, captions, header associations, and numeric alignment. Put overflow on an outer container when needed. Use column elements only for the CSS properties browsers apply to columns.

Forms and groups

Baseline and scoped. Keep labelled native controls, related-control grouping, native submission and reset, and explicit help and error associations. Apply layout to the form or field group. Labels remain visible and usable with CSS off.

Controls and choices

Scoped and browser. Apply skins directly to controls. Preserve browser handling of typing, autofill, keyboard selection, focus, and submission. The matrix below covers every input type and picker boundary.

Compare native, styled, and searchable selection

Measurements and results

Baseline and scoped. Style a bounded measure, task progress, or calculation result according to its native purpose. Keep determinate and indeterminate progress distinct and expose important values in text.

role="status"

Announce completed, non-urgent updates in a polite status region.

Disclosure and overlays

Scoped and browser. Style native disclosure using open and keep the summary operable. Use shared name only for intentionally exclusive disclosures. Style modal dialogs, their backdrops, and the document fallback. Preserve native dismissal and focus behavior. Popover attributes can apply to standard elements without introducing another tag.

popover

Use a native popover with a named trigger and preserve an in-flow or full-page destination.

Templates and fallback

Browser. A template's content is styled when instantiated. Style slotted content at the documented shadow boundary when integrating with a consumer's shadow DOM. Ordinary Thin-Sky markup lives in the document. Content that renders inside noscript receives the same HTML defaults as the rest of the page.

Experimental or deprecated

No stable skin. Review experimental features in a lab with a working fallback.

Obsolete and deprecated

No stable skin. Migrate markup to current HTML. Use abbr for abbreviations, img for images, CSS for alignment and type, and slot for shadow insertion points.

Form controls

Default input and text, email, password, search, tel, url
Share a direct control skin. Keep password manager, autofill, autocomplete, input mode, and search affordances intact. A placeholder is a hint and still needs a label.
textarea
Reuse the field typography and focus treatment. Keep resize and multiline scrolling available. Treat CSS field sizing as an optional enhancement.
number
Style the field and keep native step, min/max, typing, and stepper behavior.
date, datetime-local, month, time, week
Style the outer control. Keep localized formatting and the browser picker available. Provide visible instructions and server validation when formats or support vary.
checkbox, radio
Keep the native input and its real label. Use accent-color when sufficient. A switch presentation still needs an actual on/off control, checked state, and keyboard access.
range, color, file
Keep the native affordance and picker. Prefer accent-color for range and a scoped ::file-selector-button treatment where supported. Any custom track or swatch treatment needs focus, keyboard, and forced-color checks.
button, submit, reset, image input types and button elements
Preserve the real action type and form owner. A skin may change their appearance. Image submit controls require a useful text alternative.
hidden
Keep it out of the rendered UI and preserve its form value.
select, option, optgroup, datalist, selectedcontent
Style the authored select and let the browser own option selection and suggestion UI. Preserve native multiple and listbox modes. The customizable native select proposal is Lab-only. Gate appearance: base-select and ::picker(select) behind feature detection and keep selectedcontent within that experiment. The searchable-select recipe remains the server-authoritative filtering and multiple-value model. Customizable select