Style Guide

This is the Section Heading in an h5 tag with an a tag inside it used as a one-level breadcrumb

This is the Page Title in an h4 tag

This is supporting high-level text which is optional for each individual page. You can emphasize certain words or phrases by wrapping them in strong tags. It is recommended that this text block is limited to two or three lines.

Testing display of HTML elements

This is 2nd level heading

This is a test paragraph.

This is 3rd level heading

This is a test paragraph.

This is 4th level heading

This is a test paragraph.

This is 5th level heading

The h5 tag, like the h1 tag and the solid color bar below the main navigation is controlled by applying a class to the main body tag on each page. Those classes, respectively, are: .providers, .payers, .patients and .about,

This is 6th level heading

This is a test paragraph.

Basic block level elements

This is a block quotation containing a single paragraph. Well, not quite, since this is not really quoted text, but I hope you understand the point. After all, this page does not use HTML markup very normally anyway.

The following contains address information about the author, in an addresselement.

JPFive,jason@jpfive.com
Omaha, NE

Lists

This is a paragraph before an unnumbered list (ul). Note that the right margin for the longer list items is greater than normal paragraph text. This is to help visually reinforce that the list is one "unit".

  • One.
  • Two.
  • Three. This item is a longer list item to show that there is a difference in a list item right margin, and a normal paragraph right margin. This item is a longer list item to show that there is a difference in a list item right margin, and a normal paragraph right margin.

The following is an ordered list ol:

  1. One.
  2. Two.
  3. Three. This item is a longer list item to show that there is a difference in a list item right margin, and a normal paragraph right margin. This item is a longer list item to show that there is a difference in a list item right margin, and a normal paragraph right margin.

The folowing is a definition list (dl). In principle, such a list should consist of terms and associated definitions.

term
a word or other expression taken into specific use in a well-defined meaning, which is often defined rather rigorously, even formally, and may differ quite a lot from an everyday meaning
term
a word or other expression taken into specific use in a well-defined meaning, which is often defined rather rigorously, even formally, and may differ quite a lot from an everyday meaning
term
a word or other expression taken into specific use in a well-defined meaning, which is often defined rather rigorously, even formally, and may differ quite a lot from an everyday meaning

Text-level markup

  • CSS (an abbreviation; abbr markup used)
  • radar (an acronym; acronym markup used)
  • bolded (b markup used - just bolding with unspecified semantics)
  • Origin of Species (a book title; cite markup used)
  • a[i] = b[i] + c[i); (computer code; code markup used)
  • here we have some deleted text (del markup used)
  • an octet is an entity consisting of eight bits (dfn markup used for the term being defined)
  • this is very simple (em markup used for emphasizing a word)
  • Homo sapiens (should appear in italics; i markup used)
  • type yes when prompted for an answer (kbd markup used for text indicating keyboard input)
  • Hello! (q markup used for quotation)
  • He said: She said Hello! (a quotation inside a quotation)
  • you may get the message Please fill out all required fields after submission (samp markup used for sample output)
  • this is not that important, or perhaps disclaimer text (small markup used)
  • this is highlighted text (strong markup used)

Links & Buttons

This is a text paragraph that contains some inline links. Click here to go somewhere else, or download a helpful pdf document, for example.

You can also create fancy buttons by adding classes to individual a tags. To conform with the intended site style, these should always be inside a standalone paragraph. For example:

A gold button, using the group of classes small, button, gold

A fancy gold button

There are 4 color options for these buttons and can be applied for the appropriate section of the site. The class names arebrightBlue, dustyBlue, gold, green and look like this:

A fancy bright blue button

A fancy gold button

A fancy dusty blue button

A fancy green button

Further, there may be instances (The Home Page for example) where you would like to have these buttons consume more horizontal space. Just add a btn-block class to the class string in the markup.

A fancy bright blue button

A fancy gold button

A fancy dusty blue button

A fancy green button

Forms

The following two radio buttons are inside a fieldset element with a legend:
Legend
Once again with checkboxes:
Check those that apply

And finally a Submit Button:


Tables

The following table has a caption. The first row and the first column contain table header cells (th elements) only; other cells are data cells (td elements), with align="right" attributes:

Sample table: Areas of the Nordic countries, in sq km
Country Total area Land area
Denmark 43,070 42,370
Finland 337,030 305,470
Iceland 103,000 100,250
Norway 324,220 307,860
Sweden 449,964 410,928

Character test

The following table has some sample characters with annotations. If the browser’s default font does not contain all of them, they may get displayed using backup fonts. This may cause stylistic differences, but it should not prevent the characters from being displayed at all.

Char. Explanation Notes
ê e with circumflex Latin 1 character, should be ok
em dash Windows Latin 1 character, should be ok, too
Ā A with macron (line above) Latin Extended-A character, not present in all fonts
Ω capital omega A Greek letter
minus sign Unicode minus
diameter sign relatively rare in fonts