Headings
The title of this page is the only h1. A section starts with an h2, the heading you are reading now.
Third-level heading
An h3 names a point inside the section. It should stay quieter than the h2 above it.
Fourth-level heading
An h4 is the smallest heading. It sits close to the paragraph under it.
Paragraphs
A paragraph is the default. Sentences stay short, and the measure stays narrow enough to read.
The next paragraph is separated by space, not by a card. A link can be the address itself, https://brandonklotz.me, or a named link.
Emphasis
A word in italics is an em. A strong word carries the weight. A marked word is the one to find again. A span of code sits in the sentence without leaving it.
A span has no look of its own. It inherits the paragraph. Small text is for an aside. Struck text and inserted text mark a change. Water is H2O and energy is mc2. SVG is an abbreviation. Press Enter to continue.
Lists
A list is for things that are peers. Nest one when a peer has its own parts.
- A plain item
- An item with a nested list
- First part
- Second part
- A last item, with
codeand a stressed word
Numbered lists
Use numbers when the order is the point.
- Write the sentence.
- Read it out loud.
- Cut a word.
Quotation
The words are a serif. The name under them is set like code.
The type should disappear until something is wrong with it.
Code
Inline code stays in the sentence, like renderInline(). A block is for anything you would copy whole.
function greet(name) {
return `Hello, ${name}`;
}Image
A picture in the writing is a figure. It is as wide as the column, and the caption sits under it in a quieter size.
Table
A table is for a comparison, not for layout.
| Element | What it is for |
|---|---|
| em | Stress inside a sentence |
| strong | A word that should not be missed |
| mark | A passage to find again |
Divider
A line splits two thoughts without opening a new section.
What follows is still the same section. The line is the only break.