Headings
Oatcake attempts to style <h1>, <h2> and <h3> headings to be clearly distinct from
each other so that readers can easily orient themselves within the structure of
the document. The headings vary in their size (based on the Perfect Fifth
modular scale), in their font weight, and in the vertical space above and
below. Headings have more vertical space above them than below so that they’re
visually closer to the text below (that belongs to the heading) than to the
unrelated text above.
Here’s a demo of the three levels of headings:
Level 1 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada, justo tincidunt mattis gravida, velit orci facilisis nibh, at hendrerit risus sem eu arcu. Cras sollicitudin aliquam libero, in vestibulum velit vestibulum sed. Praesent ullamcorper est eget velit aliquet pretium. Maecenas tempus mi pellentesque congue ultrices. Ut pharetra mattis sem ac vestibulum. Mauris ut hendrerit mi. Phasellus ligula eros, ullamcorper eu odio ac, porttitor aliquam ex. Duis imperdiet risus a elementum placerat. Suspendisse efficitur ac metus nec tempor. Etiam eu gravida sapien. Integer sollicitudin vehicula ex et tempus. Fusce sit amet blandit lectus. Fusce at leo arcu. Morbi eget tellus elit. Duis efficitur volutpat laoreet.
Level 2 Heading
Suspendisse vitae bibendum libero. In in lorem lacus. Proin pharetra neque venenatis, fringilla justo id, elementum magna. Maecenas vestibulum tortor urna, vel pharetra nisi commodo vel. Sed ultrices auctor nunc. Nunc hendrerit, nunc at euismod cursus, ligula dolor fermentum ligula, quis dictum neque velit sit amet elit. Integer vel justo ac augue blandit porta euismod at nisl.
Level 3 Heading
Suspendisse dignissim tempor ultricies. Phasellus in sollicitudin felis, eget fringilla quam. Vestibulum suscipit arcu dapibus placerat cursus. Suspendisse dignissim orci in nibh convallis, sit amet tempus dui tincidunt. Sed sollicitudin sollicitudin quam, quis dictum ante lacinia non. Proin bibendum, sem id pulvinar sodales, diam elit euismod nibh, vel vehicula dolor erat placerat est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis purus et sapien aliquam consequat. Aenean mattis in risus sed faucibus. Vivamus luctus pulvinar orci, ut posuere est. Mauris vitae volutpat est. Curabitur dapibus felis quis lorem volutpat tincidunt. Aenean consectetur lorem quis aliquam consequat. Praesent elementum mattis lorem, a pharetra odio vestibulum nec. Donec at rutrum tortor.
Fourth, fifth and sixth-level headings
HTML provides six levels of headings but too many levels of headings in a
document are exhausting and confusing to the reader and difficult for the design to visually
distinguish clearly enough without resorting to desperate measures. It’s better
to use only two or three levels of headings.
So Oatcake styles <h4>’s, <h5>’s and <h6>’s the same as <h3>’s.
If you really want to use more than three levels of headings you can denote
the structure of the document by numbering the headings yourself:
1. First-Level Heading
1.2 Second-Level Heading
1.3 Third-Level Heading
1.4 Fourth-Level Heading
1.5 Fifth-Level Heading
1.6 Sixth-Level Heading
Heading anchor links
If you hover the mouse over any heading in this post you’ll notice that they
all have clickable #anchor links attached to them for deep linking.
For example here’s a deep link to the first sub-heading in this post.
Inline styles in headings
Headings can contain some inline styles:
A heading with italics in it
A heading with code() in it
an_all_code_heading()
code() at the start of a heading
Headings that follow other headings
Headings that immediately follow other headings have less vertical space above than they would otherwise:
First-Level Heading
Second-Level Heading
Third-Level Heading
Fourth-Level Heading
Fifth-Level Heading
Sixth-Level Heading
Headings in blockquotes
Headings that begin a blockquote have less vertical space above them:
An
<h1>at the start of a<blockquote>This is the body of the blockquote.
An
<h2>within the blockquote^ Further headings within a blockquote do have the usual vertical spacing.
An
<h2>at the start of a<blockquote>This is the body of the blockquote.
An
<h3>within the blockquote^ Further headings within a blockquote do have the usual vertical spacing.
An
<h3>at the start of a<blockquote>This is the body of the blockquote.
An
<h1>within the blockquote^ Further headings within a blockquote do have the usual vertical spacing.
Headings in alerts
The same also applies to headings that start alerts:
An <h1> at the start of an alert
This is the body of the alert
An <h2> within the alert
^ Further headings within an alert do have the usual vertical spacing.
An <h2> at the start of an alert
This is the body of the alert.
An <h3> within the alert
^ Further headings within an alert do have the usual vertical spacing.
An <h3> at the start of an alert
This is the body of the alert.
An <h1> within the alert
^ Further headings within an alert do have the usual vertical spacing.
Headings in disclosure boxes
And the same also applies to headings that start
disclosure boxes,
with and without <summary>’s:
A disclosure box with a summary
A first-level heading
A paragraph.
A second-level heading
^ Further headings within a disclosure box do have the usual vertical spacing.
A disclosure box without a summary
A paragraph.
A third-level heading
^ Further headings within a disclosure box do have the usual vertical spacing.
Multiline headings
Multiline headings are supported, including with inline elements like <code>,
<kbd> and <samp>. This is a multiline <h1> heading:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
This is a multiline <h2> heading:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
This is a multiline <h3> heading: