Kenan Center HTML Style Guide

This document outlines the acceptable tags for use in posting articles. Please note that while you may use other tags, our editors will most likely remove them before posting.

<h#> Tags and Their Use

The <h#> tags should be used for section headings. Using <h1> is generally restricted to the top-most title of every page. Please use them in order; don't skip to <h3> without first using <h2>. For your settings, the <h#> tags will render as:

This is the <h2> tag

This is the <h3> tag

This is the <h4> tag

This is the <h5> tag

This is the <h6> tag

Paragraphs

Please wrap each paragraph within a <p></p> pair.

Styling Text

Bold

Please use the <strong></strong> pair to make text bold. This is preferred to <b> since it describes structure instead of style.

This is bold text

Italic

Please use the <em></em> pair to make text italic. This is preferred to <i> since it describes structure instead of style.

This is italic text

Underline

Please do not use the <u></u> pair to underline text. Not only is it deprecated, but it may confuse users about whether or not it is a link. If you think something should be underlined, it would probably be more correct to make it bold or italic.

Color

Please do not apply any color to any text via CSS or the <font> tag. The CSS for the site handles the coloring of the site.

The <font> Tag

Please avoid using the <font> tag. All font properties for the site are defined via the CSS. All markup should be structural; the <font> tag does not denote structure. Also, the <font> tag is deprecated.

Linking

Whenever possible, please try to add a 'title' attribute to your <a> tags. So a tag may appear like this:

<a href="foo.html" title="Latest report on water fowl mortality rates">.

Off-Site Links

Please add a 'target' attribute to your links to open a new window so readers of your article on evolt.org don't lose their place. To expand on the above example:

<a href="foo.html" title="Latest report on water fowl mortality rates" target="_blank">.

Miscellaneous Tags

Horizontal Rules

The <hr> tag will render as:

Bullet Lists (Ordered, Unordered, Dictionary Lists)

The <ol>, <ul>, and <dl> tags will all work. No special formatting is applied via the CSS. You can see examples of lists below.

Forms and Form Elements

Please do not use any <form> tags or elements.

Tables

You may use all the normal attributes for your tables. This includes cellpadding, cellspacing, border, align, and valign. Please do not color any table cells or content as it may conflict with user-defined styles. Please use <thead>, <tbody>, and <tfoot> to delineate the header, body, and footer of the table. Please use <th> for header cells. A sample table:

Header1 (<th>)	Header2 (<th>)	Header3 (<th>)
Cell1A and 1B	Cell2A	Cell3A
Cell1A and 1B	Cell2B	Cell3B
Cell1C	Cell2C and 3C
Footer

JavaScript

Please do not use JavaScript (or VBScript, or ECMAScript). The site needs to be accessible to as many users as possible, and inserting client-side script may subvert that goal. If you do need some, please test it to be sure it is not a barrier to accessibility.

Allowed Tags

Following is the list of accepted tags, most of which have been covered above.

<br>

<img>

<hr>

Writing Style

Research has shown that the writing on a web site has a significant impact on the usability (and therefore effectiveness) of a site - up to 125% improvement. The following are outline guidelines, which will significantly improve the impact of our copy.

Be succinct - no more than 50% of equivalent wordage in print
BECAUSE
Reading from screens is substantially slower than from paper. Users intensely dislike reading long texts.
1. Be scannable - structure articles with 2 or 3 headlines (nested if necessary).
2. Use meaningful rather than teaser headlines and subheads (reading a headline should tell users what the section's about).
3. Use text weight and colour to add highlighting and emphasis.
4. Use bulleted lists.
  BECAUSE
  1. Users do not read copy in full (at least not on 1st reading), they scan. Headlines and page titles are often viewed out of context.
  2. Users are adept at disregarding everything that does not look like a clear headline and do not waste their time on links which may be a waste of time.
1. Structure long documents. Content should not be arbitrarily cut up into page 1, page 2 etc. Each page should encapsulate a discrete topic. Each page should be written as an inverse pyramid, with a clear summary of the page at the start.
2. Secondary and background information should always be available on separate pages accessed from a link.
3. Printable versions should be on a single page.
  BECAUSE
  While users dislike long documents, they particularly dislike having to download several pages to cover one topic. They do like choice over which subtopics to read.
Use cool, objective language to build credibility.
BECAUSE
Users detest marketing copy - a promotional style with boastful claims. Users are busy, they want the facts, and tend to believe content which gives it to them without embellishment.
1. Linked text should describe where the links lead, not give ‘click here’ instructions. An appropriate way to consider linked text is that it should represent the headline of the content users will arrive at.
2. Use link titles to give additional explanation if warranted.
  BECAUSE
  Users do not follow bad links, and links can be presented out of context by certain browsers and search engines. ‘Click here’ instructions also break up the flow of text and make it more difficult to read.