Breadcrumbs
nav
, p
, and a
for breadcrumbs.
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.
nav
, p
, and a
for breadcrumbs.
article
, header
, footer
, and ul/ol
for creating a cards and card lists
fieldset
and legend
to label a related collection of checkboxes.
dl
, dd
and dt
for labeled read-only data.
p
and label
for wrapping and labeling form inputs.
span
for inline errors.
ul
, li
, and a
for listing and linking validation errors.
article
, header
, form
, and footer
for creating a user login form.