skip navigation links

Web site handbook > Style guide > Content elements

Content elements

Content elements are anything that appears on a Web page. There are several content elements and styles available. Only use the styles listed here. Applying innappropriate styles can "break" Web pages. If you have questions, contact the webmaster.

The "content" div

All page content, exluding feature, sub-navigation and footer, is contained within the div with id "content." There are several classes that may be applied to this div. You must choose the correct class for the page to display properly.

Pages with sub-navigation

<div id="content">

Pages with no sub-navigation

<div id="content" class="fullscreen">

Subsection home pages

<div id="content" class="subhome">

Frequently asked questions

<div id="content" class="faq">

Calls to action

see also: callout box

Place calls to action so they are easy to find and understand.

To be considered for inclusion in this calendar contact Multnomah County Library, 555.555.5555, email@multcolib.org.

Order tickets: 555.555.5555
$15 general, $13 student/senior

Callout box

Callout boxes are contained within a div with class "callout1". For related information or links, callout content should be brief and important, for example, job hotline, call to action. See the benchmark template for an example of a callout box.

Contacts

When there is no obvious heirarchichal or logical order, alphabetize contact lists.

Central Library

Vailey Oehlke, Director of Libraries

503.988.5403, e-mail

Currency

$.10

$25

$35.50

$1,250

Definition lists

Definition lists are used for book and other resource lists.

<dl>
<dt>Dunn, Mark</dt>
<dd>
<div class="title">Ibid: A Life: A Novel in Footnotes</div>
<div class="copyright">(2004)</div>
<div class="description">In this novel written entirely in footnotes, Dunn holds up a funhouse mirror at the pedestaled residents of the age and asks why so many of the more famous ones did so many stupid things and rarely got called for them.</div>
</dd>
</dl>

Custom classes for definition content

Content inside the DD element is further broken down using divs with custom classes.

Document title

Document and section titles (inluding navigation links) use title case. They must agree with their corresponding links in the navigation system.

Incorrect

  • Games, e-mail, Wi-Fi and more
  • Black Resource Collection featured works

Correct

  • Games, E-mail, Wi-Fi and More
  • Black Resource Collection Featured Works

Title and heading 1 elements

Document titles appear in the title <title> and heading 1 <h1> elements. There is only one <h1> per page.

Page titles should be descriptive of page content. Title <title> elements should begin with the same text as the <h1> element followed by " - Multnomah County Library". The <title> element may differ from <h1> element if it is logical to do so.

Example 1: Director Biography

<title>Director Biography - Multnomah County Library</title>
<h1>Director Biography</h1>

Title elements may contain additional useful information about the document such as the documents location in the site hierarchy. The heading 1 should only contain the document title.

Example 2: Harry Potter Wand-Making Workshop

<title>Harry Potter Wand-Making Workshop - Events & Classes - Homework topics - Multnomah County Library</title>
<h1>Harry Potter Wand-Making workshop</h1>

Downloads

When linked, documents other than Web pages (e.g. PDF, Word, MP3) are often referred to as downloads. Specify the document or resource format and file size (kilobytes or megabytes). Do not provide a link to plug-in vendors such as Adobe Acrobat.

Headings

Use headings to label large content chunks on Web pages. Heading 1 is reserved for page titles. Like document titles, headings 2-4 use sentence case unless proper nouns. Heading 1 uses title case (it functions as the title of a publication). Do NOT use semi-colons in headings.

Heading 1

Reserved for page titles, use heading 1 only once on each page.

Heading 2

Large content chunks on a page are identified by heading 2.

Heading 3

Use to identify content below heading 2.

Heading 4

The lowest heading in page hierarchy, use to identify content below heading 3. If content requires further sub-division it should be divided among several Web pages.

Hours

  • Monday: 10 a.m. - 6 p.m.
  • Tuesday & Wednesday: 10 a.m. - 8 p.m.
  • Thursday - Saturday: 10 a.m. - 6 p.m.
  • Sunday: noon - 5 p.m.

Graphics & images

See graphics & images

Links

Hyperlink text must make sense when it stands alone. Links never open in a new browser window (target="blank").

Bad

Click here to access the Department of Foobar web page.

Bad

For information about the Department of Foobar, visit the Department’s web page.

Better

Visit the Department of Foobar website.

Best

Department of Foobar

Jump links

Web pages with a lot of content (i.e. five or more heading 2s) should have a "jump link" table of contents. Jump link tables of contents consist of either ordered or bulleted unordered lists. See navigation system for details.

Lists

When there is no obvious procedural, chronological or logical order, alphabetize lists. See also definition lists.

Unordered (bulleted) list

  • Unordered list item one
  • List item two
  • Another list item
  • Yet another item
  • This is the last list item

Unordered list class="nodot"

  • Unordered list item one
  • List item two
  • Another list item
  • Yet another item
  • This is the last list item

Ordered (numbered) list

  1. Ordered list item one
  2. List item two
  3. Another list item
  4. Yet another item
  5. This is the last list item

Optionally, long lists can be laid out in two columns. Apply the class "column" to two lists of equal length.

  • List item one
  • List item two
  • Another list item
  • Yet another item
  • Yet another item
  • Ordered list item one
  • Another list item
  • Another list item
  • Another list item
  • This is the last list item

 

 

Navigation

See navigation system for details about the website navigation system.

Notes

Apply the class "small" for small (e.g. footnote) text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio digni.

Paragraphs

The most common content element, paragraphs should be brief, factual and relevant to the page topic. See writing for the Web for guidelines.

Blockquotes are limited to long quotations. Do NOT use Dreamweaver indent and outdent buttons to set margins for visual effect.

Tables

Tables are used to display tabular data. Do NOT use tables to for document layout.

Set cell spacing, cell padding and border to zero (0) on data tables. Generally, tables look best iff all cells are top-aligned. Do not specify a table width.

Data table

  Column 1 Column 2 Column 3
Row 1      
Row 2      
Row 3      
Row 3      

Text styles

Bold should be used to highlight key words and phrases. Avoid gratuitous use of bold (strong) and italic (em). Never underline text that is not a link.

Bold <strong> <b>

Italic <em> <i>

Normal

Top of page link

Include a top of page link at the bottom of long pages. Do not put multilple top of page links on a single page.

<p><a href="#">top of page</a></p>

Time, date

  • Saturday, January 15, 2004, 7:30 pm
  • Monday, January 17, 8 pm - 9:30 pm
  • Monday, January 15 - Friday, January 19, 2004
  • 8 am - noon, 1 pm - 3:30 pm

top of page