HTML style guide

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.


            
<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 id="text_field" type="text" value="demo text" /></p>

<p><label for="text_area">Text Area:</label><br />
<textarea cols="30" id="text_area" 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 class="radio" id="radio_1" name="radio_buttons" type="radio" value="radio_1" /> <label for="radio_1">Radio 1</label><br />
<input class="radio" id="radio_2" name="radio_buttons" type="radio" value="radio_2" /> <label for="radio_2">Radio 2</label><br />
<input class="radio" id="radio_3" name="radio_buttons" type="radio" value="radio_3" /> <label for="radio_3">Radio 3</label></p>

<p>Checkboxes:<br />
<input class="checkbox" id="check_1" name="checkboxes" type="checkbox" value="check_1" /> <label for="check_1">Checkbox 1</label><br />
<input class="checkbox" id="check_2" name="checkboxes" type="checkbox" value="check_2" /> <label for="check_2">Checkbox 2</label><br />
<input class="checkbox" id="check_3" name="checkboxes" type="checkbox" value="check_3" /> <label for="check_3">Checkbox 3</label></p>

<p><label for="password">Password:</label><br />
<input class="password" id="password" name="password" type="password" /></p>

<p><label for="file">File Input:</label><br />
<input class="file" id="file" name="file" type="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 cellpadding="0" cellspacing="0">
<tbody>
<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>
</tbody>
</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>
Style guide

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

Submitted by Nick on Tue, 10/06/2009 - 15:33

Submitted by Kor on Thu, 12/17/2009 - 23:57

In reply to by Nick

Submitted by bas on Fri, 12/18/2009 - 16:53

In reply to by Kor

Submitted by Kor on Mon, 01/11/2010 - 14:41

In reply to by bas

Submitted by jopajopa on Thu, 01/07/2010 - 18:04

Submitted by bas on Thu, 01/07/2010 - 18:52

In reply to by jopajopa

Submitted by bas on Mon, 04/04/2011 - 21:01

Submitted by bas on Tue, 08/06/2013 - 16:45

For Drupal nowadays I'd recommend using the style guide module. Read more on its functionality in the style guide documentation.

Add new comment

Plain text

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.