Styleguide

This page was adopted from the Poor Man's Styleguide which I discovered through Simon Dann's website.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Test Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Quotes vs Italics

Rules of thumb for when to use quotation marks, italics, or neither:

Quotation marks for direct speech or verbatim text from a source.
Italics for emphasis, titles of long works (books, films, albums, TV series), words-as-words, and framing a rhetorical question or phrase as an object of discussion.
Neither when a colon plus plain prose reads cleaner.

Examples of the same rhetorical framing three ways:

The question being asked is: should Democrats be allowed to redraw districts now that they're in power in Virginia?

The question being asked is: should Democrats be allowed to redraw districts now that they're in power in Virginia?

She said, "I'm not voting for either of them."

A question takes a ? even when framed by italics or a colon.

Fediverse / Mastodon Quotes

When quoting a Mastodon or fediverse post, use a blockquote with attribution that includes display name, handle, and post date. The post content is preserved in our source files even if the original is deleted. In markdown blog posts, use this format:

> The text of the post you're quoting.
>
> — Display Name ([@user@instance.social](https://instance.social/@user/123456789)) · Nov 20, 2025

If the post has no display name (or it's the same as the handle), drop the display-name parens:

> The text of the post you're quoting.
>
> — [@user@instance.social](https://instance.social/@user/123456789) · Nov 20, 2025

Which renders as:

You don't mass-adopt the open web by mass adopting it, you mass-adopt the open web by making great stuff that makes people want to use the open web.

— Ada Example (@example@mastodon.social) · Nov 20, 2025

The scripts/quote-toot.js tool generates this format automatically from a toot URL and copies it to the clipboard.

If the post may be removed, also consider archiving it and linking to the archived version as a fallback.

Used in blog posts to call out updates or corrections added after the original publication date. Uses an <aside> element with the update-banner class.

<aside class="update-banner" aria-label="Blog post update">
  <p><strong>01/15/2026 Update:</strong> Your update text here.</p>
</aside>

Figure-Caption

A placeholder figure image. — The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Footnotes

Use footnotes for asides you want to keep but don't want to interrupt the main line of thought. Good uses:

Sources and citations where an inline link would be clunky.
Clarifications and caveats (for example: "I mean X here, not Y").
Tangents and wry side-comments you can't let go of.
Attribution for a phrase or idea without breaking sentence rhythm.

Don't use footnotes for content that actually belongs in the paragraph, for simple links (use an inline link), or in short posts. Keep it to roughly 3 or 4 per post under normal circumstances.

Heuristic: write the post without footnotes first. On re-read, ask "is there anything I cut that I wish I'd kept?" That's footnote material.

Markdown syntax:

This is a sentence with a footnote.[^redistricting]

[^redistricting]: The footnote content. Use a descriptive name
    instead of a number; it auto-numbers in the output, and
    named references are easier to keep track of while editing.

Footnote definitions can go anywhere in the file, but end-of-file is conventional. Continuation lines in a multi-paragraph footnote are indented 4 spaces.

Which renders as:

This is a sentence with a footnote.^[1]

The footnote content. Use a descriptive name instead of a number; it auto-numbers in the output, and named references are easier to keep track of while editing. ↩︎

Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2

Tables

This is a table caption
Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
A row with a cell spanning all 3 columns
Table Footer 1	Table Footer 2	Table Footer 3

Media

The Audio Element:

The Video Element:

Embedded content:

YouTube video (iframe):

Form Elements

The Fieldset:

Legend

The Form:

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Disabled Text Area:
I'm disabled

Readonly Text Area:
I'm readonly

Select Element:

Disabled Select Element:

Select multiple

Select multiple [size="2"]

Radio Buttons:

Radio 1

Radio 2

Radio 3

Radio Disabled

Checkboxes:

Checkbox 1

Checkbox 2

Checkbox 3

Checkbox Disabled

Indeterminate Checkbox

Indeterminate Checkbox (Rotating)

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range:

Output:
42

Progress:

Meter:
350 degrees

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Blockquote

Quotes vs Italics

Fediverse / Mastodon Quotes

Update Banner

Figure-Caption

Details-Summary

Footnotes

Text Elements

Monospace / Preformatted

List Types

Ordered List

Unordered List

Definition List

Tables

Media

The Audio Element:

The Video Element:

Embedded content:

Form Elements

HTML5-specific Form Elements