Headings
Headings are semantic elements used to organize and outline information on the page. They have 6 different levels. Headings must be used for semantic purposes only and not for presentation (changing the appearance of text).
Code
Note: You may change the tag with any other HTML heading tag, or a span tag.
<h1 class="{heading-appearance} {heading-color} {heading-caps}></h1>
Classes
{heading-appearance}
Allows the user to change the visual appearance of a heading to that of another heading while preserving the semantics.
| Class | Style |
|---|---|
| Default (no class) | The heading will assume its default style based on its level. |
.h1 |
The heading will visually appear like a default Heading 1. |
.h2 |
The heading will visually appear like a default Heading 2. |
.h3 |
The heading will visually appear like a default Heading 3. |
.h4 |
The heading will visually appear like a default Heading 4. |
.h5 |
The heading will visually appear like a default Heading 5. |
.h6 |
The heading will visually appear like a default Heading 6. |
Heading Appearance demo
Demonstration Heading 4
{heading-color}
Allows the user to change the text color to Carnelian from default (black).
| Class | Style |
|---|---|
| Default (no class) | Headings will be black by default. |
.bigred |
The heading will become #B31B1B and have a font weight of 600. |
{heading-caps}
Adds CSS for the font-variant-caps property.
| Class | Style |
|---|---|
| Default (no class) | No change to the styles. |
.small-caps |
Displays heading with lowercase letters in small capital letters. |
.petite-caps |
Displays heading with petite capital letters. |
.all-small-caps |
Displays heading with all letters in small capital letters. |
Heading Caps demo
Demonstration Heading 4
Accessibility Expectations
| Modality | Expected Behavior (All states) | Criterion |
|---|---|---|
| Visual | Bold paragraph text cannot be used in place of a heading. | 1.3.1 |
| All | Headings must follow a proper relative hierarchy. Which is to say, a heading level lower than the previous one must be considered a subheading of it and vice versa. | 1.3.1 |
| All | Headings must describe the purpose of the contents following it. | 2.4.6 |
| All | Headings may not be empty. | 2.4.6 |
Developer Notes
Since headings cannot be empty, be sure to add conditional logic to only print heading markup in a template file if the value is not empty.