Clagnut

Menu

Styles

This document 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. It should be indented with no gap between this and the prior paragraph.

Pre-formatted text

The pre element represents a block of pre-formatted text. Here’s an example showing the printable characters of ASCII:

  ! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Blockquotes

The blockquote element represents a section that is being quoted from another source.

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 like the other paragraphs.

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.

  • 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 km2.

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.

Example image
This is a placeholder image, with supporting caption

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

Example image
This is a full bleed placeholder image, with supporting caption
Example image
This is an inline figure

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

‘Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

Jabberwocky (first verse). Lewis Carroll, 1832-98

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='smcp' to specify small-caps.

Code

The code element is used to represent fragments of computer code as we’ve seen through this page. Here it is used in conjunction with the pre element:

function getJelly() {
    echo $aDeliciousSnack;
}

Shown with line numbers:

  1. <?php
  2. echo 'Hello World!';
  3. ?>

Variable

The var element is used to denote a variable.

Sample output

The samp element is used to represent sample output from a program.

Keyboard entry

The kbd element is used to denote user input.

Superscript and subscript text

The sup element represents a superscript and the sub element represents a sub. Example: The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).

f(x, n) = log4xn

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.

The Very Best Eggnog
Ingredients Serves 12 Serves 24
Milk 1 quart 2 quart
Cinnamon Sticks 2 1
Vanilla Bean, Split 1 2
Cloves 5 10
Mace 10 blades 20 blades
Egg Yolks 12 24
Cups Sugar 1 ½ cups 3 cups
Dark Rum 1 ½ cups 3 cups
Brandy 1 ½ cups 3 cups
Vanilla 1 tbsp 2 tbsp
Half-and-half or Light Cream 1 quart 2 quart
Freshly grated nutmeg to taste

And this is a full bleed table, using class='fullbleed' to enable particularly wide tables to make maximum use of screen estate.

Font Rendering on Macs
BrowserFont Format
TrueType MacTrueType PCPostScriptOpenType PostScriptOpenType TrueType
Camino 1.2goodgoodgoodgoodgood
Safari 2goodgoodgoodgoodgood
Firefox 2goodcorrect italic & bold fonts displayed; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping textnot rendereditalic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping textitalic & bold fonts synthesised; miscalculation of space required for italic, bold & underlined fonts resulting in overlappping text
Opera 9goodgood, but italic font is synthetically obliquednot renderedbold font not rendered; italic synthesisedbold font not rendered; italic synthesised