Pre-heading

Status:	experimental

Technology

Considerations:

Should the pre-heading be included in a table of content?
Should screen readers include the "pre-heading" when stepping through headings?

The HTML specification suggests the header element is the proper container to group the pre-heading and the heading:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element).

— HTML Living Standard: The header element

The pre-heading itself can be a regular p element.

Experiment

CSS code to style the example

.nrc {
  --nih-font-family-sans-serif: "LFT Etica", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
  --nih-font-family-serif: "Guardian Egyptian Web", "Lucida Bright", Georgia, sans-serif;
  --nih-header-meta-color: rgba(0, 0, 0, 0.5);
  --nih-header-meta-font-family: var(--nih-font-family-sans-serif);
  --nih-header-meta-font-size: 15px;
  --nih-heading-2-color: black;
  --nih-heading-2-font-size: 18px;
  --nih-heading-2-font-weight: bold;
  --nih-heading-font-family: var(--nih-font-family-serif);
  --nih-pre-heading-color: rgba(0, 0, 0, .6);
  --nih-pre-heading-font-family: var(--nih-font-family-sans-serif);
  --nih-pre-heading-font-size: 13px;
  --nih-pre-heading-font-weight: normal;
  --nih-pre-heading-line-height: 18px;
  --nih-pre-heading-text-transform: uppercase;
}

.nrc nih-link-card {
  max-width: 336px;
}
.nrc .example-pre-heading {
  max-width: 336px;
  margin-block: 0;
}
.nrc h2 {
  margin-block: 0;
}

.example-pre-heading {
  font-weight: var(--nih-pre-heading-font-weight);
  font-size: var(--nih-pre-heading-font-size);
  font-family: var(--nih-pre-heading-font-family);
  color: var(--nih-pre-heading-color);
  line-height: var(--nih-pre-heading-line-height);
  text-transform: var(--nih-pre-heading-text-transform);
}
.example-header-meta {
  font-weight: var(--nih-header-meta-font-weight);
  font-size: var(--nih-header-meta-font-size);
  font-family: var(--nih-header-meta-font-family);
  color: var(--nih-header-meta-color);
  line-height: var(--nih-header-meta-line-height);
}

openbaar vervoer

Akkoord over 1 miljard euro voor Amsterdams openbaar vervoer

10:14