Sections and subsections
A section is a part of an article or webpage with an own heading. The heading summarizes or teasers the topic of the section: it should be suitable to be listed in a table of contents. Structuring an article into sections helps readers to quickly find what interests them. Sections can be further divided into subsections.
Sections and subsections come in two flavors: regular and expandable. Regular sections and subsections are always visible. In contrast, the content below the heading of an expandable section or subsection is hidden in a webpage by default. It gets revealed when a reader clicks on its heading.
Start of a section
A section is started by a section heading. Mark both the start and the end of a section heading with three hyphens for a regular section and with three plus signs for an expandable section.
A subsection is started by a subsection heading. Its marks are two space-separated hyphens for a regular subsection or two space-separated plus signs for an expandable subsection, both at the start and the end of the heading.
| section heading | subsection heading | |
|---|---|---|
| regular | --- Birds --- |
- - Grebes - - |
| expandable | +++ Fish +++ |
+ + Puffers + + |
End of a section
A section ends at any of the following points, whichever comes first:
- the next section heading, be it regular or expandable
- a notes block
- the end of the file
- a section break
A subsection also ends at any of the above points or additionally at
- the next subsection heading, be it regular or expandable
- a subsection break
Section breaks
Section and subsection breaks can be used to mark the end of a section or subsection explicitly. Such breaks also come in two flavors: regular and seamless. A regular break adds a visible separator to the page. A seamless break ends a section or subsection without adding a visible separator to the webpage.
Mind that the end of a section can be visually apparent despite the use of a seamless section break, e.g. when the section is styled with a different background color than the page in general.
| section break | subsection break | |
|---|---|---|
| regular | --- |
- - |
| seamless | +++ |
+ + |
Example
The example shows two sections from a puzzle page. The second section also contains an expandable subsection with a solution to the given puzzle.
--- Chicken and egg ---
Which came first: the chicken or the egg?
--- Wolf, goat and cabbage ---
A man travels with a wolf, a goat and a cabbage. They come to a river that they need to cross. There is a boat, but it will only carry one item besides the rowing man. Neither wolf and goat nor goat and cabbage must be left unsupervised or the former would eat the latter.
How do they all get safely across the stream?
+ + Solution + +
The man crosses the river with the goat first.
Then the man returns alone.
Then the man crosses the river with the wolf.
Then the man returns with the goat.
Then the man crosses the river with the cabbage.
Then the man returns alone.
Finally, the man crosses the river with the goat.
+ +
By the way, this puzzle is over a thousand years old!Chicken and egg
Which came first: the chicken or the egg?
Wolf, goat and cabbage
A man travels with a wolf, a goat and a cabbage. They come to a river that they need to cross. There is a boat, but it will only carry one item besides the rowing man. Neither wolf and goat nor goat and cabbage must be left unsupervised or the former would eat the latter.
How do they all get safely across the stream?
Solution
The man crosses the river with the goat first.
Then the man returns alone.
Then the man crosses the river with the wolf.
Then the man returns with the goat.
Then the man crosses the river with the cabbage.
Then the man returns alone.
Finally, the man crosses the river with the goat.
By the way, this puzzle is over a thousand years old!
For developers
When Aneamal is translated to HTML, both regular sections and regular subsections are wrapped in HTML section elements. Expandable sections and expandable subsections are wrapped in HTML details elements instead. A class attribute whose value is computed from the corresponding heading is added to the section or details element respectively. The example becomes:
<section class='chicken-and-egg'>
<h2>Chicken and egg</h2>
<p>Which came first: the chicken or the egg?</p>
</section>
<section class='wolf-goat-and-cabbage'>
<h2>Wolf, goat and cabbage</h2>
<p>A man travels with a wolf, a goat and a cabbage. They come to a river that they need to cross. There is a boat, but it will only carry one item besides the rowing man. Neither wolf and goat nor goat and cabbage must be left unsupervised or the former would eat the latter.</p>
<p>How do they all get safely across the stream?</p>
<details class='solution'>
<summary>
<h3>Solution</h3>
</summary>
<p>The man crosses the river with the goat first.<br>Then the man returns alone.<br>Then the man crosses the river with the wolf.<br>Then the man returns with the goat.<br>Then the man crosses the river with the cabbage.<br>Then the man returns alone.<br>Finally, the man crosses the river with the goat.</p>
</details>
<p>By the way, this puzzle is over a thousand years old!</p>
</section>The class can be used to select a section in CSS in order to apply specific styling.