Style guide

Section headings

The Section Heading elements represent six levels of section headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

The Paragraph element represents a paragraph:

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Lists

Unordered list

The Unordered List element represents an unordered list of items, typically rendered as a bulleted list:

  • Fruit
    • Bananas
    • Apples
      • Green
      • Red
    • Pears
  • Vegetables
  • Meat

Ordered list

The Ordered List element represents an ordered list of items, typically rendered as a numbered list:

  1. Fruit
    1. Bananas
    2. Apples
      1. Green
      2. Red
    3. Pears
  2. Vegetables
  3. Meat

Quotes

Block quotation

The Block Quotation element indicates that the enclosed text is an extended quotation:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Inline quotation

The Inline Quotation element indicates that the enclosed text is a short inline quotation:

WWF's goal is to build a future where people live in harmony with nature.

Links

The Anchor element creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address:


Preformatted text

The Preformatted Text element represents preformatted text which is to be presented exactly as written in the HTML file:

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Emphasis

The Emphasis element marks text that has stress emphasis:

This is not a drill!


Mark text

The Mark Text element represents text which is marked or highlighted for reference or notation purposes:

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest.


Strong importance

The Strong Importance element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type:

... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight.


Tables

The Table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data:

The table header
The table body with two columns