Text Headings
Headings introduce and order the segments on a page. On a website with many pages, each level should have similar importance.
Syntax
Markdown headings are preceded by number signs # and a space. The six available headings are associated with the following meaning in Perplex:
# Page TitleNot needed on standard Perplex pages!## Section Heading### Subsection Heading#### Sub-Subsection Heading##### Paragraph Heading###### Small Paragraph Heading
Usually we don’t want to apply the full hierarchy on moderate sized pages, because too much structure is confusing. For an appropriate layout, it may be desirable to skip one or two levels and use paragraph headings inside of sections for example.
But this is against recommended HTML guidelines. Headings should be used strictly in their descending order, because screen readers and other automatic interpreters get confused otherwise. To follow this recommendation we need to skip headings visually.
Another variation of their style is to highlight them. Its an easy way to inform readers about especially important text segments.
For these style variations Perplex offers Markdown attributes.
Paragraph Headings
We can style any heading like a paragraph heading with the attribute {.h-p}. For the probably rare occasions we need to style a heading as a small paragraph heading we need an additional attribute: {.h-p .h-p-s}.
Special Headings
To highlight some warning, an important information or tip, we have the attributes {.h-warn}, {.h-info} or {.h-tip}.
A warning paragraph for example starts with a heading like this:
##### Warning Paragraph {.h-warn}
Far far away, behind the word mountains, far from the countries Vokalia and…
Linebreak for Headings
There is one problem, we can’t solve directly with Markdown, attributes or even a shortcode. Sometimes we want to force a linebreak in long headings, when the usual line length on larger screens breaks them at an unfortunate place.
In this case we can use the replacement {/} like this:
### A long subsection heading about a very complex topic{/}exceeding the line length
Beware
This special linebreak replacement is only needed in headings or titles, because they can’t be wrapped in Markdown. Otherwise Markdown can handle them.
Layout
Headings are not only recognized by their font styling but also by the white-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
If the page already has a title, the first heading should not occur in the Markdown content. Like many themes Perplex provides titles for all pages.
We still may need the first heading on special pages without a title section, when we want to compose a title in the Markdown content.
Section Heading
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Subsection Heading
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
A long subsection heading about a very complex topic exceeding the line length
Because of the line break before the last word this heading looks quite bad on larger screens. We can correct this with the replacement {/}:
Another subsection heading about a very complex topic
exceeding the line length
The inserted <br>-tag gets disabled on small screens, because it would make things even worse there for long headings.
Sub-Subsection Heading
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Styled Paragraph Heading
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Warning Paragraph
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Info Paragraph
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Tip Paragraph
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Small Paragraph Heading
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.