Text Headings
Headings introduce and order content segments on a page. Heading levels need to descend without interruption. We can modify headings only visually when we want to skip some levels.
Syntax
Markdown headings are preceded by number signs # and a space. The six available headings are associated with the following meaning in Perplex:
# Page TitleUsually not available!## Section Heading### Subsection Heading#### Sub-Subsection Heading##### Paragraph Heading###### Small Paragraph Heading
To alter the style of these headings, Perplex offers a few special Markdown attributes.
Visual paragraph headings
On moderately sized pages, we usually don’t want to apply the full heading hierarchy because too much structure is as confusing as too little. We may like to skip one or two levels and use paragraph headings in normal sections for example.
However, this would violate official HTML guidelines and mess up the table of contents (TOC). Heading tags always need to descend strictly also because screen readers and other automatic interpreters get confused otherwise.
To abide by this rule, we can skip headings only visually. Any heading does look like a paragraph heading with the attribute {.h-p} or {.h-p-s} for a small paragraph heading.
Highlighted headings
To emphasize especially important text segments, we can start them with a highlighted heading. This is a more subtle option than annotation boxes.
To mark a section about some danger, warning, information, or success, we apply the attributes {.h-danger}, {.h-warn}, {.h-info}, or {.h-success}.
A warning paragraph for example starts with a heading like this:
##### Warning Paragraph {.h-warn}
The quick brown fox jumped over the lazy dogs.
Very long headings with complicated topics stretching over more than one line
CommonMark offers no possibility to break a heading line because every line starting with the number sign # starts a new heading.
When a heading exceeds the line length of the layout, it automatically reflows into the next line. That may occur at an unfortunate place: Before the last word or between tightly related words. To introduce a manual break of our own choosing we can put the replacement code {/} between two words without any spacing character like this:
and we get:
Nice long heading with a complicated topic
stretching over more than one line
This line break is displayed only when the viewport allows for the full-text width. On small screens, the manual break is hidden, because manual line breaks tend to come out even worse on small viewports with additional automatic breaks.
Layout
Headings are not only recognized by their font styling but also by the space surrounding them. That’s why the following examples are shown in the way they usually appear: In front and in between some text.
Page Title
The first heading is reserved for titles. Only one <h1> tag should occur on any webpage. We may want to compose a title in Markdown on special pages but in all theme templates, the title section is rendered from meta-data in the frontmatter.
Section
Fax back Jim’s Gwyneth Paltrow video quiz. Boxers had zap of gay jock love, quit women. Two driven jocks help fax my big quiz. Sixty zips were quickly picked from the woven jute bag.
Subsection
Vexed nymphs go for quick waltz job. Junk MTV quiz graced by fox whelps. How quickly daft jumping zebras vex. Five jumping wizards hex bolty quick.
Sub-Subsection
Waxy and quivering, jocks fumble the pizza. My faxed joke won a pager in the cable TV quiz show. Vexed nymphs go for quick waltz job. Fax back Jim’s Gwyneth Paltrow video quiz.
Paragraph
Vexed nymphs go for quick waltz job. The quick brown fox jumped over the lazy dogs. Hick dwarves jam blitzing foxy quip. My ex pub quiz crowd gave joyful thanks.
Small paragraph
The jay, pig, fox, zebra and my wolves quack! Quick fox jumps nightly above wizard. Kvetching, flummoxed by job, W. zaps Iraq. Vex quest wizard, judge my backflop hand.
Paragraph attribute
The jay, pig, fox, zebra and my wolves quack! Vex quest wizard, judge my backflop hand. Public junk dwarves quiz mighty fox. Glib jocks quiz nymph to vex dwarf.
Danger
Sympathizing would fix Quaker objectives. A quick movement of the enemy will jeopardize six gunboats. Five jumping wizards hex bolty quick. My faxed joke won a pager in the cable TV quiz show.
Warning
How quickly daft jumping zebras vex. Few black taxis drive up major roads on quiet hazy nights. Glib jocks quiz nymph to vex dwarf. “Who am taking the ebonics quiz?”, the prof jovially axed.
Info
Brick quiz whangs jumpy veldt fox. Painful zombies quickly watch a jinxed graveyard. Junk MTV quiz graced by fox whelps. DJs flock by when MTV ax quiz prog.
Success
A wizard’s job is to vex chumps quickly in fog. GQ jock wears vinyl tuxedo for showbiz promo. Just poets wax boldly as kings and queens march over fuzz. Crazy Frederick bought many very exquisite opal jewels.