Colophon

Style Guide

This is a guide to the mark-up styles used throughout the site. In particular it’s a check that all likely mark-up is styled appropriately.

Sections (a Level 2 Heading)

The secondary header above is an h2 element, which may be used for any form of important page-level header.

Level 3 Header

The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in importance.

Level 4 Header

The header above is an h4 element, which may be used for any form of page-level header which falls below the h3 header in importance.

Level 5 Header

The header above is an h5 element, which may be used for any form of page-level header which falls below the h4 header in importance.

Level 6 Header

The header above is an h6 element, which may be used for any form of page-level header which falls below the h5 header in importance.

Paragraphs

All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote.

This is a paragraph directly following a paragraph. There should be a small gap between this and the prior paragraph.

This is a paragraph following the aside. It does not have an aside associated with it.

Code block

Here’s a block of code. It should be using Prism.js for syntax highlighting and rendered in Inconsolata.

p {
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;   
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

Blockquotes

The blockquote element represents a section that is being quoted from another source. The following is a single paragraph:

Democracy is a system of government where the citizens exercise power by voting. In a direct democracy, the citizens as a whole form a governing body and vote directly on each issue.

Multiple paragraphs:

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

This is a second paragraph within the quotation, indented unlike the non-quoted paragraphs.

A blockquote in quotes with a citation:

One more attribute the modern typographer must have: the capacity for taking great pains with seemingly unimportant detail. To him, one typographical point must be as important as one inch, and he must harden his heart against the accusation of being too fussy.

Ordered list

The ol element denotes an numbered list.

1. This is an ordered list. This is an ordered list. This is an ordered list. This is an ordered list. This is an ordered list.
2. This is the second item, which contains a sub list
   1. This is the sub list, which is also ordered.
   2. It has two items.
3. This is the final item on this list.

Unordered list

The ul element denotes a bulleted list.

• This is an unordered list. This is an unordered list. This is an unordered list. This is an unordered list.
• United Kingdom of Great Britain and Northern Ireland:
  • England
  • Scotland
  • Wales
  • Northern Ireland
• Republic of Ireland
• Isle of Man
• Channel Islands:
  • Bailiwick of Guernsey
  • Bailiwick of Jersey

Sometimes we may want each list item to contain block elements, typically a paragraph or two.

• This is a first paragraph in the list item. This is a first paragraph in the list item. This is a first paragraph in the list item. This is a first paragraph in the list item.

  This is a second paragraph in the list item. This is a second paragraph in the list item. This is a second paragraph in the list item. This is a second paragraph in the list item.

• The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.

• Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.

• The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km².

Definition list

The dl element is for another type of list called a definition list. Instead of list items, the content of a dl consists of dt (Definition Term) and dd (Definition description) pairs.

This is a term.

This is the definition of that term, which both live in a dl.

Here is another term.

And it gets a definition too, which is this line.

Here is term that shares a definition with the term below.

Here is a defined term.

dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.

Figures

Figures are usually used to refer to images.

This is a full bleed image using class='fullbleed' to make maximum use of the screen estate.

Here, a part of a poem is marked up using figure:

Text-level Semantics

There are a number of inline HTML elements you may use anywhere within other elements.

Links and anchors

This is a link.

Stressed emphasis

This uses the em element for emphasis. This is italicised using an i element.

Strong importance

This uses the strong element for importance. This is emboldened using a b element.

Strikethrough

This uses the s element to strike through.

Citations

This uses the cite element to for a citation.

Inline quotes

This uses the q element to for a quote.

Definition

The dfn element is used to highlight the first use of a term.

Abbreviation

The abbr element is used for any abbreviated text, like Staffs. and BBC, the latter uses class='c2sc' to specify small-caps.

Code

The code element is used to represent fragments of computer code as we’ve seen through this page. It should be rendered in Inconsolata.

Variable

The var element is used to denote a variable. It should be rendered in Inconsolata.

Sample output

The samp element is used to represent sample output from a program. It should be rendered in Inconsolata.

Keyboard entry

The kbd element is used to denote user input. It should be rendered in Inconsolata.

Superscript and subscript text

The sup element represents a superscript and the sub element represents a subscript. Example: The coordinate of the i^th point is (x_i, y_i). For example, the 10^th point has coordinate (x₁₀, y₁₀). f(x, n) = log₄xⁿ

Marked or highlighted text

The mark element is used to represent a run of text marked or highlighted for reference purposes.

Edits

The del element is used to represent deleted or retracted text. The ins element, is used to represent inserted text.

Tabular data

Tables should be used when displaying tabular data. They are rendered in Plex Sans.

And this is a wide table to making maximum use of screen estate.