HTML Tips for Decorator 5

Follow these guidelines for the best results using HTML with Decorator 5.

HTML tips for formatting

Decorator 5 is designed to do the styling so you don't have to.

Avoid in-line and in-page styling

Excessive use of in-line and/ or in-page styling adds a great deal of maintenance overhead especially for migrating from one design to another.

Do not use font tags

Font tags are not valid HTML. Our goal is to remove them from all content pages.

Use tables for tabular data only

Tables are meant to markup tabular data, like a spreadsheet. Using tables for layout quickly becomes a maintenance nightmare, and has serious accessibility implications.

Use proper semantic markup

The following recommendations are not required for validation or accessibility reasons, but do help make the content of the page have better structure and semantics:

Use strong instead of bold

When the visual effect of bolding is used, 99% of the time it is used to draw the eye to the text, not because it is semantically/ grammatically bolded text. Instead, use the strong element. It will have the same visual effect and be semantically correct.

Correct:

<p>Summer camp was <strong>awesome</strong>!</p>

Incorrect:

<p>Summer camp was <b>awesome</b>!</p>

Use em instead of italic

When the visual effect of italics is used, 99% of the time it is used to add emphasis to the text, not because it is semantically/ grammatically italicized (i.e. book titles should be italicized). Instead, use the em element. It will have the same visual effect and be semantically correct.

Correct:

<p>Students should <em>never</em> skip class.</p>

Incorrect:

<p>Students should <i>never</i> skip class.</p>

Avoid using the break element

If you absolutely must have additional white space, use in-line styling (but we don't recommend it).

Correct:

<p>This is a paragraph.</p><p style="margin-top:20px;">This is a paragraph far below.</p>

Incorrect:

<p>This is a paragraph.</p><br /><p>This is a paragraph far below.</p>

Legitimate uses of the break tag

It is OK to use break elements, but only where you would be using a hard return to break to the next line. Do not use multiple breaks to break up paragraphs or lists.

Address

<p>Joe and Jill Jackson<br />
123 Main Street<br />
Anytown, KS 12345 </p>

Name and Title

<blockquote><p>"Risk! Risk anything! Care no more for the opinions of others, for those voices."</p><p class="cwp-source">Katherine Mansfield<br />New Zealand short story author (1888 - 1923)</p></blockquote>

HTML tips for avoiding common validation errors

Below are some helpful proactive tips that can help you avoid getting validation errors:

Use ID Attribute In Place Of Named Anchors

Use "id=" instead of "a name=" for in-page anchors.

Correct:

<p><a href="#dogs">Jump to the part of this page that talks about dogs</a>.</p><h4 id="dogs">Dogs</h4><p>Dogs are neat</p>

Incorrect:

<p><a href="#dogs">Jump to the part of this page that talks about dogs</a>.</p><h4><a name="dogs"></a>Dogs</h4><p>Dogs are neat</p>

Use Double Quotes For Attributes

Correct:

<p><a href="#dogs">Jump to the part of this page that talks about dogs</a>.</p><h4 id="dogs">Dogs</h4><p>Dogs are neat</p>

Incorrect:

<p><a href='#dogs'>Jump to the part of this page that talks about dogs</a>.</p>

No Dangling Elements

Correct:

<p>Jump to the part of this page that talks about dogs.</p><p>Dogs are neat.</p>

Incorrect:

Jump to the part of this page that talks about dogs.<p>Dogs are neat.<p>

Use Lowercase Tags

All HTML should be written using lower-case letters. This applies to both tags and attributes.

Correct:

<p><a href="#dogs">Jump to the part of this page that talks about dogs</a></p><h4 id="dogs">Dogs</h4><p>Dogs are neat</p>

Incorrect:

<P><a HREF="#dogs">Jump to the part of this page that talks about dogs</a></P><h4 id="DOGS">Dogs</h4><p>Dogs are neat</p>