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.