HTML Recipes

Semantic HTML markup for common UI patterns, whether Angular, React, Vue, or any other template.

Note that these recipes can appear visually however you want, thanks to CSS. The focus here then is not visual, but on good, semantic markup which provides better accessibility, readability, and maintainability.

Breadcrumbs

nav, p, and a for breadcrumbs.

Cards and Card Lists

article, header, footer, and ul/ol for creating a cards and card lists

Checkbox List

fieldset and legend to label a related collection of checkboxes.

Data With Labels

dl, dd and dt for labeled read-only data.

Form (Basic)

p and label for wrapping and labeling form inputs.

Form (Validation Inline)

span for inline errors.

Form (Validation Summary)

ul, li, and a for listing and linking validation errors.

Login

article, header, form, and footer for creating a user login form.