<h#> Tags and Their Use

The <h#> tags should be used for section headings. Using <h1> is forbidden since that is 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 <h1> tag

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

Do not apply any color to any text via CSS or the <font> tag. The CSS for the site allows any user to customize the colors and fonts, and setting colors would override those settings, possibly hiding your text.

The <font> Tag

The <font> tag is not allowed, if you use it we will remove it. All font properties for the site are defined via the CSS and customizable by each user. All markup must be structural; the <font> tag does not denote structure. Also, the <font> tag is deprecated.

Script and Code Samples

Regardless of whether you use inline or block-level code samples (see below), please don't forget to escape all your entities. This means, in particular, changing all your > and < characters into > and < entities (respectively) as well as & to & and " to "e;. you can get a complete list of the accepted character entities from section 24.2 Character entity references for ISO 8859-1 characters of the HTML 4.01 specification at the W3C site. There is also a character entity chart right here on the TheDoghouse  site: A Simple Character Entity Chart

Code Blocks

Blocks of code/script/markup should be placed between <pre></pre> tags. Since<pre> is a block level element, it will be rendered as its own paragraph. When rendered for regular pages on the site, it will be inserted into a text area form field.

This is how a block of code will appear on the site. This will prevent long lines of text from breaking the layout.

This is how a block of code will be rendered for the print version or for pages that will not use the textarea.

Inline Code

Code/script/markup snippets within a paragraph should be wrapped within <code></code> tags.

This is a sample of inline code.

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 TheDoghouse  don't lose their place. Please use "_blank" so all new links open in one window, since the use of "_new" opens links in a new window for each link. To expand on the above example:

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

Miscellaneous Tags

Abbreviations

Whenever you use abbreviations in articles, please keep in mind that not everyone knows all abbreviations out there. To allow users to see what an abbreviation means, you can wrap it in the <abbr> tag and add a title attribute with the full name of the abbreviated item. For example:

The W3C is an example of this in action. The abbreviation in the previous sentence uses the <abbr> tag.

Acronyms

Whenever you use acronyms in articles, please keep in mind that not everyone knows all the acronyms out there, either. To allow users to see what an acronym means, you can wrap it in the <acronym> tag and add a title attribute with the full name of the acronym. For example:

WYSIWYG is an example of this in action. The acronym in the previous sentence uses the <acronym> tag.

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:

Data Tables

Just in case you have a table with tabular data that you want to display with gridlines, we've created a class to do just that. Simply add class="data" to the table tag. You will also need to set "cellspacing" to 0. The minimum code to render a table this way is: <table cellspacing="0" class="data">. An example table is below.

JavaScript

Please do not use JavaScript (or VBScript, or ECMAScript) in articles. If it is necessary for an article, we may leave it, and most likely will edit it. Otherwise, all submissions with any client-side scripting will have it removed.

Allowed Tags

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

<a>,</a>

<b>,</b>

<strong>,</strong>

<i>,</i>

<em>,</em>

<p>,</p>

<blockquote>,</blockquote>

<ul>,</ul>

<ol>,</ol>

<li>,</li>

<dl>,</dl>

<dd>,</dd>

<dt>,</dt>

<pre>,</pre> (which get converted to a textarea)

<code>,</code>

<abbr>,</abbr>

<acronym>,</acronym>

<cite>,</cite>

<table>,</table>

<thead>,</thead>

<tbody>,</tbody>

<tfoot>,</tfoot>

<tr>,</tr>

<th>,</th>

<td>,</td>

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

1. 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.
2.  
   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.
3.  
   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.
4. 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.
5.  
   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.