Notice: While Javascript is not essential for this website, your interaction with the content will be limited. Please turn Javascript on for the full experience.

Style Guide and Sample Code

These are basic markup and typographic styles for your site and how to use them. Most of these options are availabel through the TinyMCE edit window in the admin, but some will require knowledge of coding HTML.

  1. User Feedback Modules
  2. Headings
  3. Grouping
  4. Text Semantic Elements
  5. Table Example
  6. Form Example

User Feedback Modules

A few feedback styles have been created and should be used as "announcements" and as system-generated feedback styles. Here are some examples:

Can’t find what you’re looking for? Try our comprehensive Help section

<div class="user-feedback level-general">
    <p role="alert">Content</p>
</div>

Please fill out all fields before submitting.

<div class="user-feedback level-notice">
    <p role="alert">Content</p>
</div>

Please correct the errors noted in red below:

<div class="user-feedback level-error">
    <p role="alert"><span class="icon-alert" aria-hidden="true"><span class="larger">&#9888;</span></span> Content</p>
</div>

Your information has been saved successfully.

<div class="user-feedback level-success">
    <p role="alert"><span aria-hidden="true">&#10004;</span> Content</p>
</div>

Heading 1 with a Link

The primary header is an <h1> element. Any header elements may include links, as depicted in the example. More than one of any type may be used per page. All of the headings follow a similar markup pattern:

<h1>This is a heading of primary importance</h1>

Second-Level Header with a Link

The secondary header is an <h2> element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an h2 as a sub-header to the page title or an existing h1 element.

Third-Level Header with a Link

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 a document hierarchy.

Fourth-Level Header with a Link

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 a document hierarchy.

Fifth-Level Header with a Link

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 a document hierarchy.

Sixth-Level Header with a Link

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 a document hierarchy.

Grouping content

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. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.

<p>This is a paragraph</p>

Blockquotes

The blockquote element represents a section that is being quoted from another source. In this example, we also follow the blockquote with a cite element containing a link to the quoted 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.

Parliament Bill 1947, Column 206

<blockquote cite="optional link to source material">
    <p>Quoted text</p>
</blockquote">
<p>— <cite><a href="optional link to source material">Source of the Quote</a></cite></p>

Horizontal rule

The hr element (seen above and below) represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.


Ordered list

The <ol> element denotes an ordered list, and various numbering schemes are available through the CSS (including 1,2,3… a,b,c… i,ii,iii… and so on). Each item requires a surrounding <li> tag to denote individual items within the list (as you may have guessed, li stands for list item).

  1. 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.
<ol>
    <li>List item one</li>
    <li>List item two
        <ol>
            <li>Nested list item one</li>
            <li>Nested list item two</li>
        </ol>
    </li>
</ol>

Unordered list

The <ul> element denotes an unordered list (ie. a list of loose items that don’t require numbering, as a bulleted list). Again, each item requires a surrounding <li> tag to denote individual items. Here is an example list showing the constituent parts of the British Isles:

  • United Kingdom of Great Britain and Northern Ireland:
    • England
      • Another nested list
      • Yet another nested line item
    • Scotland
    • Wales
    • Northern Ireland
  • Republic of Ireland
  • Isle of Man
  • Channel Islands:
    • Bailiwick of Guernsey
    • Bailiwick of Jersey
<ul>
    <li>List item one</li>
    <li>List item two
        <ul>
            <li>Nested list item one</li>
            <li>Nested list item two</li>
        </ul>
    </li>
</ul>

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. Though it may be called a “definition list”, dl can apply to other scenarios where a parent/child relationship is applicable. For example, it may be used for marking up dialogues, with each dt naming a speaker, and each dd containing his or her words.

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.
<dl>
    <dt>Definition term</dt>
    <dd>Definition</dd>
    <dt>Definition term</dt>
    <dt>Another definition term</dt>
    <dd>Definition of both terms above</dd>
</dl>

Figures

Figures are usually used to refer to images:

Example image
This is a placeholder image, with supporting caption.

Here, a part of a poem is marked up using figure. A cite element surrounds the name of the text being referred to:

‘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
<figure>
    <img src="link/to/image" alt="Alt text displayed when image does not load">
    <figcaption>An optional caption for the content above with an optional <cite>citation</cite></figcaption>
</figure>

Back to Top ↑

Text-level Semantics

There are a number of inline HTML elements you may use anywhere within other elements. The semantics of the markup used is as important as how it looks, as web crawlers will not process CSS, but rather infer hierarchy and emphasis from the HTML elements being used.

Links and anchors

The <a> element is used to hyperlink text, be that to another page, a named fragment (also referred to as an “anchor”) on the current page, or any other location on the web. Example:

<a href="link/to/page">link text</a>

Stressed emphasis

The <em> element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Example:

You simply must try the negitoro maki!

You simply <em>must</em> try the negitoro maki!

In HTML5, the older <i> element is still acceptable, and has taken on the form of styling something as an em would be styled, without adding the semantics of em for SEO.

Strong importance

The <strong> element is used to denote text with strong importance. Example:

Do not under any circumstances stick nails in the electrical outlet.

<strong>Do not under any circumstances</strong> stick nails in the electrical outlet.

In HTML5, the older <b> element is still acceptable, and has taken on the form of styling something as an strong would be styled without adding the semantics of strong for SEO.

Small print

The <small> element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as “fine print”). It can also be used for attributions or satisfying licensing requirements. Example:

Order now, only $5.99! Some restrictions may apply if you live in the continental United States.

Order now, only $5.99! <small>Some restrictions may apply.</small>

Strikethrough

The <s> element is used to represent content that is no longer accurate or relevant. When indicating document edits i.e., marking a span of text as having been removed from a document, use the <del> element instead (See Edits). Example:

Recommended retail price: $3.99 per bottle Now selling for just $2.99 a bottle!

<s>Recommended retail price: $3.99 per bottle</s> Now selling for just $2.99 a bottle!

Superscript and subscript text

The <sup> element represents a superscript and the <sub> element represents a subscript. These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation. As a guide, only use these elements if their absence would change the meaning of the content. Example:

The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).

If(x, n) = log4xn

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

Citations

The <cite> element is used to represent the title of a work (e.g. a book, essay, poem, song, film, TV show, sculpture, painting, musical, exhibition, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. Stylistically, it may be italicized, but does not have to be. Example:

Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).

<cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).

Inline quotes

The <q> element is used for quoting text inline. Example showing nested quotations:

John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry’s, on Gloucester Road.

John said, <q>I saw Lucy at lunch, she told me <q>Mary wants you to get some ice cream on your way home</q>. I think I will get some at Ben and Jerry’s, on Gloucester Road.</q>

Definition

The <dfn> element is used to highlight the first use of a term. The title attribute can be used to describe the term, resulting in a browser “tooltip” when the mouse is hovered for more than a second. Example:

Bob’s canine mother and equine father sat him down and carefully explained that he was an allopolyploid organism.

Bob’s <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father.

Abbreviation

The <abbr> element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it’s less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation (although notably, this does not work in Internet Explorer for Windows). Example abbreviations:

BBC, HTML, and Staffs. are common abbreviated terms.

<abbr title="HyperText Markup Language">HTML</abbr>is a common abbreviated term

Code

The <code> element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise. Example:

When you call the activate() method on the robotSnowman object, the eyes glow.

When you call the <code>activate()</code> method

Variable

The <var> element is used to denote a variable in a mathematical expression or programming context, but can also be used to indicate a placeholder where the contents should be replaced with your own value. Example:

If there are n pipes leading to the ice cream factory then I expect at least n flavors of ice cream to be available for purchase!

If there are <var>n</var> pipes…

Sample output

The samp element is used to represent (sample) output from a program or computing system. Useful for technology-oriented sites, not so useful otherwise. Example:

The computer said Too much cheese in tray two but I didn’t know what that meant.

The computer said <samp>Too much cheese</samp>…

Keyboard entry

The <kbd> element is used to denote user input (typically via a keyboard, although it may also be used to represent other input methods, such as voice commands). Example:

To take a screenshot on your Mac, press ⌘ Cmd + ⇧ Shift + 3.

Press the <kbd>⌘ Cmd</kbd> key…

Marked or highlighted text

The <mark> element is used to represent a run of text marked or highlighted for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader’s attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user’s current activity. Example:

I also have some kittens who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a kitten.

Maybe I should adopt a <mark>kitten</mark>

Edits

The <del> element is used to represent deleted or retracted text which still must remain on the page for some reason. Meanwhile its counterpart, the <ins> element, is used to represent inserted text. Both del and ins have a datetime attribute which allows you to include a timestamp directly in the element. Example inserted text and usage:

She bought two five pairs of shoes.

She bought <del datetime="2005-05-30T13:00:00">two</del> <ins datetime="2005-05-30T13:00:00">five</ins> pairs of shoes.

Back to Top ↑

Tabular data

Tables should be used when displaying tabular data. The <caption> element gives the table a title, while the <colgroup> and <col> elements help align columns. The <thead> and <tbody> elements enable you to group sets of rows within each a table — the thead and <th> elements should be used to denote a row of table headings.

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
<table>
    <caption>The Very Best Eggnog</caption>
    <colgroup>
        <col style="width:50%">
        <col style="width:25%">
        <col style="width:25%">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">Ingredients</th>
            <th scope="col">Serves 12</th>
            <th scope="col">Serves 24</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Milk</td>
            <td>1 quart</td>
            <td>2 quart</td>
        </tr>
    </tbody>
</table>

Back to Top ↑

Form Example

Basic <form> container and inner common element styles

The <fieldset> element groups related fields within a form and should have a title attribute and a corresponding <legend>. The <label> element ensures field descriptions are associated with their corresponding form widgets, and are very important for form accesibility.

Input Field Types

This is a sample input field of type="text"

This is a sample input field of type="password"

This is a sample input field of type="email"

This is a sample input field of type="url"

This is a sample input field of type="number"

This is a sample textarea for multi-line user input

Selectable Option Items

A select form element contains more than one <option> element

Checkboxes can be selected independently, and more than one can be selected

Radio buttons are inter-dependent, and usually only one can be chosen

Button Types: input type="submit", <button>, input type="reset" and an <a>

Cancel


There are all the styles that can be present inside the main content area with class .text. Hope this helps you craft beautiful and semantic content

Back to Top ↑