Section heading `--- … ---`

Section headings devide a webpage into sections and give readers a glimpse into what to expect from them. They can be purely descriptive or cleverly tease curiosity. Section headings are usually printed big and with a bold font, but not as prominent as the main heading.

Sections can be further divided into subsections that have subsection headings.

How to

Mark both the start and the end of a section heading with three hyphens as in the examples below.

The section heading is block markup, so there usually needs to be a blank line before it. There can be sublines such as a dateline or a very short summary as in the third example immediately below and associated with the section heading. There must be another blank line after the section heading or its last subline respectively.

Examples

The following examples borrow the names of chapters from published books to demonstrate how section headings work in Aneamal. The first example is quite simple:

--- The Atoms of Arithmetic ---

The Atoms of Arithmetic

The second example shows a section heading that has two components, each on its own line. The second line is printed in a smaller font on the webpage, but it is nevertheless part of the section heading:

--- Chapter XI
The Persistence of Memory ---

Chapter XI
The Persistence of Memory

The third example has a line directly below the actual section heading, that is after the final triple hyphens. The subline says whom and what place the section is about, which would not be apparent from the more poetic actual heading. The subline is associated with the section heading, but not part of it. It would not appear in the table of contents.

--- The Origin of the Coordinates ---
     David Hilbert and Göttingen

The Origin of the Coordinates

David Hilbert and Göttingen

The indentation of the subline in the example is without meaning.

For developers

When Aneamal is translated to HTML, section headings become h2 elements. So the first example is translated to:

<h2>The Atoms of Arithmetic</h2>

Line breaks in a heading become HTML br elements and each line in the heading except for the first is wrapped in HTML span elements. So the second example is translated to:

<h2>Chapter XI<br><span>The Persistence of Memory</span></h2>

CSS can be used to give the first line of the section heading a look that differs from the lines that follow. This CSS code reduces the font size of all but the first line:

h2 > br + span {
	font-size: smaller;
}

Sublines of a section heading get wrapped in an HTML p element, which is wrapped together with the h2 element in an hgroup element. Hence the third example becomes:

<hgroup>
<h2>The Origin of the Coordinates</h2>
<p>David Hilbert and Göttingen</p>
</hgroup>

Section heading --- … ---