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.
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="feedback feedback__general"> <p role="alert">Content</p> </div>
Please fill out all fields before submitting.
<div class="feedback feedback__notice"> <p role="alert">Content</p> </div>
Please correct the errors noted in red below:
<div class="feedback feedback__error"> <p role="alert"><span class="icon-alert" aria-hidden="true"><span class="larger">⚠</span></span> Content</p> </div>
Your information has been saved successfully.
<div class="feedback feedback__success"> <p role="alert"><span aria-hidden="true">✔</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
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.
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>
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.
<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>
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.
<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).
- This is an ordered list.
This is the second item, which contains a sub list
- This is the sub list, which is also ordered.
- It has two items.
- 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>
<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:
- Another nested list
- Yet another nested line item
- Northern Ireland
- Republic of Ireland
- Isle of Man
- 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>
<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
- 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.
dtterms 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
ddwithout a parent
<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 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>
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
<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>
<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> 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> 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>
<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
<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>
<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).
<q> element is used for quoting text inline. Example showing nested quotations:
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>
<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.
<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> 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
<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…
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>…
<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
<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>
<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
ins have a
datetime attribute which allows you to include a timestamp directly in the element. Example inserted text and usage:
two 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.
Tables should be used when displaying tabular data. The
<caption> element gives the table a title, while the
<col> elements help align columns. The
<tbody> elements enable you to group sets of rows within each a table — the
<th> elements should be used to denote a row of table headings.
|Ingredients||Serves 12||Serves 24|
|Milk||1 quart||2 quart|
|Vanilla Bean, Split||1||2|
|Mace||10 blades||20 blades|
|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>
<form> container and inner common element styles
<fieldset> element groups related fields within a form and should have a title attribute and a corresponding
<label> element ensures field descriptions are associated with their corresponding form widgets, and are very important for form accesibility.
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