This is an h1 tag

This is an h2 tag

This is an h3 tag

This is an h4 tag

This is an h5 tag
This is an h6 tag

Body Copy and Paragraph Tags

This is a block of body copy. Font size and line length were chosen for ease of readability. The fact is, human beings as a species have survived for hundreds of thousands of years and have populated the widest geographical range of any species in large part because our dietary needs are met so readily with the foods generally available to us.1 Personal eating choices such as vegetarianism, veganism and pescetarianism aside (for the moment), human beings are omnivores, shaped by millions of years of evolution to thrive on a much wider range of foods than other animals.

Em, Strong, Subscript, Superscript, Anchors (links) & Citations

This is a paragraph of body text. Use the 'p' tag to layout blocks of body copy. TheElements of Typographic Style is a book by Canadian typographer, poet and translator Robert Bringhurst use the 'strong' tag for bold elements. Use the 'em' tag for italicized or to emphasize text. Originally published in1992 by Hartley & Marks Publishers, it was revised in 1996, 2001 (v2.4), 2002 (v2.5), 2004(v3.0), 2005 (v3.1), and 2008 (v3.2). A history and guide to typography, it has been praised by Hermann Zapf, who said “I wish to see this book become the Typographers’ Bible.”1 JonathanHoefler and Tobias Frere-Jones consider it "the finest book ever written about typography," accordingto the FAQ section of their type foundry's website.2 Because of its widespread use, it issometimes this is subscriptabbreviated simply as Bringhurst.

1This is a citation or footnote. It uses the html 'cite' tag. Use the html 'sup'tag to create the number style. This is a dream for disclaimers as well. Use this for footnotes andcitations and google just might share a little love with you.

Other Useful Tags for Content

The ABBR Tag

This is the abbr tag. Use it for abbreviations with a title. Like "Can you read this msg if you hover over it?. It just adds nice functionality for the user whilereading.

Blockquotes

Use blockquotes for quoting or indenting text. You can also use the 'cite' tag and the 'title' attributes to be more descriptive.

This is blockquote text. Use the blockquote html tag to indent blocks of text, or forquotes or to draw attention to a snippet of content.

"I wish to see this book become the Typographers’ Bible"

-Jonathan Hoefler

Related (X)HTML elements include the q and cite elements for shorter, probably in-line, quotations and for citations respectively. An (X)HTML attribute specific to the blockquote and q elements is cite= where the provenance of the material quoted may be given. If the quotation is in a language other than that of the main document, lang= and maybe dir= attributes may be relevant to specify the language of the quoted text and perhaps its direction, left-to-right or right-to-left.

Ordered and Unordered List Styles

The titles of the chapters in the book's third edition are as follows:

  • The Grand Design
  • Rhythm & Proportion
  • Harmony & Counterpoint
  • Structural Forms & Devices
  • Analphabetic Symbols
  • Choosing & Combining Type
    • Use 'ul' class 'listBullets' to get bullets
    • Serifed
    • Sans-Serif
  • Shaping the Page
  • The State of the Art

The following outline uses ordered list tags; for an outline style:

  1. The Grand Design
  2. Rhythm & Proportion
  3. Harmony & Counterpoint
  4. Structural Forms & Devices
  5. Analphabetic Symbols
  6. Choosing & Combining Type
  7. Shaping the Page
  8. The State of the Art

In addition to these chapters, the book also contains five appendices, an historical synopsis, and aforeword.

Layout & Grid Column Page Structure

HTML from the columns above

<div class="page-row"> <div class="one-third"> <p>This is an example of the column system that is in place on your site. If you... </p> </div> <div class="one-third"> <p>This is a block of body copy. Lorem ipsum dolor sit amet...</p> </div> <div class="one-third"> <p>This is a block of body copy. Lorem ipsum dolor sit amet...</p> </div> </div>

OneThird and TwoThirds Columns

This is a two-thirds column. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

This is a two-thirds column. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

OneQuarter Columns

This is a column using the one-fourth class. If you look at this code you will se that there is a <div> tag around this text with the class "one-fourth".

This is a column using the one-fourth class. If you look at this code you will se that there is a <div> tag around this text with the class "one-fourth".

This is a column using the one-fourth class. If you look at this code you will se that there is a <div> tag around this text with the class "one-fourth".

This is a column using the one-fourth class. If you look at this code you will se that there is a <div> tag around this text with the class "one-fourth".

All Column Classes

  • page-row: goes around columns
  • one-half: half width column
  • one-third: one third column
  • two-thirds: spans two thirds of the page
  • one-fourth: one quarter column
  • three-fourths: spans three quarters of the page
  • one-fifth: one fifth column
  • two-fifths: spans two fifths of the page
  • three-fifths: spans three fifths of the page
  • four-fifths: spans four fifths of the page
  • one-sixth: one sixth column

That's it! With those classes you should be able to construct some pretty complex layouts. Have fun.