HTML style guide

Submitted by bas on Wed, 16/09/2009 - 14:49

When designing websites graphic designers often draw a neat picture in photoshop. The day to day use of a website greatly differs from this ideal scenario. The design shows a calm and readable site with demo text. But the actual website in use everything but serene and readable. The text style is usually the first aspect of a site that gets diluted. Both users and visitors create content or leave comments which just don't fit the initial picture painted by the designer. A lot of problems stem from the use of wysiwyg editors in content management systems. These editors usually grant their users a lot more freedom than a web designer wants. A properly configured wysiwyg editor should greatly limit the possibilities of the user to a few essential functions such as creating lists, inserting links and marking text as strong or emphasised.

However, many a time such wysiwyg editors are incorrectly configured. If users have too many text formatting options the result is text corruption. Because of their limited knowledge of html code, users mess up semantics, introduce a diversity of text styles, insert many incorrect tags and a plethora of inflated code and inline styles. The more creatively inclined user seems to have an urge to colour pieces of text, raise the text size, insert alternate fonts and create unused or endlessly nested tables into the content of your carefully designed site. Once users start copying and pasting from MS Word they introduce a visual cacaphony which seriously breaks the visual appease of your site. Sometimes it can even break the basic layout of your site and hinder search indexation.

In most, if not all circumstances, creating a content style guide as well as an html style guide can be of great benefit to website design. Georgina Laidlaw (Sitepoint) has written an must-read article on the benefits of style guides. The article very effectively explains why you'd want a style guide and who should want one. Luckily html/css developers can force a lot rules on html as long as the html is semantically correct. CSS Zen Garden proved the versatility of the marriage between design and semantics all the way back in 2003. So when designing a website it's generally a good idea to pay a lot of attention to the styling of the most common html elements.

When you start building a website that allows user content generation you need to:

  1. Limit the html elements editable in the wysiwyg (or plain text) editor.
  2. Create a filter for stripping incorrect code from the editor.
  3. Create an html style guide with all basic html elements.

To help with the third step you can start with a basic html page for all your sites that incorporate the most commonly used html elements. You can create one using the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> xml:lang="nl" lang="nl" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
<title>CSS Style Guide</title>
</head>
<body>
<div id="page">
<div id="content">
<a name="wrapper"></a>
<h1>CSS Basic Elements</h1>
 
<p>The purpose of this HTML is to help determine what default
settings are with CSS and to make sure that all possible HTML Elements
are included in this HTML so as to not miss any possible Elements when
designing a site.</p>
 
<hr />
 
 
<h1 id="headings">Headings</h1>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
 
<h6>Heading 6</h6>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
 
<h1 id="paragraph">Paragraph</h1>
 
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test
link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam
libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo,
eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed
tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam
sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet
augue quis tellus.</p>
 
 
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer
adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. <strong>Nunc iaculis</strong> suscipit dui. Nam sit amet sem. Aliquam libero
nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent
mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus
eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem,
consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue
quis tellus.</p>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="list_types">List Types</h1>
 
<h3>Definition List</h3>
 
<dl>
	<dt>Definition List Title</dt>
	<dd>This is a definition list division.</dd>
</dl>
 
<h3>Ordered List</h3>
<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3 <a href="#">with link</a></li>
	<li>List Item 4</li>
</ol>
 
<h3>Unordered List</h3>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3 <a href="#">with link</a></li>
	<li>List Item 4</li>
</ul>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
 
<fieldset><legend>Legend</legend>
 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis
suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,
tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis
luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget
metus.</p>
 
<form action="#">
<h2>Form Element</h2>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis
suscipit dui.</p>
 
<p><label for="text_field">Text Field:</label><br />
<input type="text" id="text_field" value="demo text" /></p>
 
<p><label for="text_area">Text Area:</label><br />
 
<textarea id="text_area" cols="30" rows="10">demo text</textarea></p>
 
<p><label for="select_element">Select Element:</label><br />
<select id="select_element" name="select_element">
	<optgroup label="Option Group 1">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
 
	</optgroup>
	<optgroup label="Option Group 2">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
	</optgroup>
</select></p>
 
 
<p>Radio Buttons:<br />
<input type="radio" class="radio" id="radio_1" name="radio_buttons" value="radio_1" />
<label for="radio_1">Radio 1</label><br />
<input type="radio" class="radio" id="radio_2" name="radio_buttons" value="radio_2" />
<label for="radio_2">Radio 2</label><br />
<input type="radio" class="radio" id="radio_3" name="radio_buttons" value="radio_3" />
<label for="radio_3">Radio 3</label><br />
</p>
 
 
<p>Checkboxes:<br />
<input type="checkbox" class="checkbox" id="check_1" name="checkboxes" value="check_1" />
<label for="check_1">Checkbox 1</label><br />
<input type="checkbox" class="checkbox" id="check_2" name="checkboxes" value="check_2" />
<label for="check_2">Checkbox 2</label><br />
<input type="checkbox" class="checkbox" id="check_3" name="checkboxes" value="check_3" />
<label for="check_3">Checkbox 3</label><br />
</p>
 
 
<p><label for="password">Password:</label><br />
<input type="password" class="password" id="password" name="password" /></p>
 
<p><label for="file">File Input:</label><br />
<input type="file" class="file" id="file" name="file" /></p>
 
 
<p><input class="button" type="reset" value="Clear" /> <input
	class="button" type="submit" value="Submit" /></p>
 
 
 
</form>
 
</fieldset>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="tables">Tables</h1>
<table cellspacing="0" cellpadding="0">
	<tr>
		<th>Table Header 1</th>
		<th>Table Header 2</th>
		<th>Table Header 3</th>
	</tr>
	<tr>
		<td>Division 1</td>
		<td>Division 2</td>
		<td>Division 3</td>
	</tr>
	<tr class="even">
		<td>Division 1</td>
		<td>Division 2</td>
		<td>Division 3</td>
	</tr>
	<tr>
		<td>Division 1</td>
		<td>Division 2</td>
		<td>Division 3</td>
	</tr>
 
</table>
 
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
 
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet,
consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque
aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem.
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula,
nisl. Praesent mattis, massa <del>qui lucta</del> <ins>quis luctus</ins> fermentum, turpis mi volutpat
justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec
sed tellus eget sapien fringilla nonummy. <acronym
	title="National Basketball Association">NBA</acronym> Mauris a ante.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
 
 
<pre>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. 
Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, 
tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat 
enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym
	title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, 
	commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr
	title="Avenue">AVE</abbr>
</pre>
 
<blockquote><p>
"This stylesheet is going to help so freaking much."
<br />
-Blockquote
</p></blockquote>
 
<small><a href="#wrapper">[top]</a></small>
</div>
</div>
</body>
</html>

Take a look at the example of this site's style guide. The above code is an adaption of the code posted here.