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 available 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:

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

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

<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>

<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.

<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).

<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:

<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.

<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:

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

<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 <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:

<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! <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:

<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:

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:

<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, <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 <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:

<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 <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 <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 <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:

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:

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 <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.

<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 accessibility.

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 ↑