Skip to main content

Swinburne HTML Coding Standards

From SwinBrain

  1. Minimum requirements for file header comments and meta information: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Description: Sample HTML Document -->
<!-- Author: Chris Pilgrim -->
<!-- Date: Aug 5 2008 -->
<!-- Validated:  ok Sep 8 2008 -->
<head>
   <title>Page Title</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <meta name="author" content="Chris Pilgrim" />
   <meta name="description" content="Some description of page content" />
   <meta name="keywords" content="keyword1, keyword2, keyword3, etc" />
</head>
  • The DOCTYPE should declare the appropriate version of the HTML used in the document.
  • The xmlns is required for validation.
  • Minimum file header comments should include description, author and date.
  • The meta element declare properties of the document.
    • content-type is essential for validation and for local computer use
    • description is used by search engines
    • keywords and author help document searches.

Contents

DOCTYPE

The DOCTYPE should declare the appropriate version of the HTML used in the document.

Examples of valid doctypes are: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

See full list of DOCTYPES at: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Meta Elements

The meta elements should declare properties of the document. 

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <meta name="author" content="Chris Pilgrim" />
   <meta name="description" content="Some description of page content" />
   <meta name="keywords" content="keyword1, keyword2, keyword3, etc" />

Don't abuse meta tags. Search engines can give you a lower ranking if they think you are stuffing keywords which aren't relevant to your site just to get a better ranking.

Comments

Comments should be used throughout the document to explain special features or sections.

Neat and consistent

The appearance of HTML code should be neat and consistent. Layout should be structured with white-space used where required. Indenting should be used to improve readability. The use of styles should be consistent and have some overall plan.

Good example: 

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

Poor example: 

<ul><li>first item</li><li>second item</li><li>third item</li></ul>

Identifiers

Identifiers and class names should be meaningful.

Case

Lower case should be used for all HTML tags and attributes.

Good example: 

<p>Some <span class="special">text</span> here</p>

Poor example: 

<P>Some <SPAN CLASS="special">text</SPAN> here</P>

attributes

All attributes should be enclosed in double quote marks. i.e. 

<img src="clint.jpg" alt="Picture of Clinton" title="Photograph by John Doe" width="100" height="120" />

tags should be closed

All tags should be closed apart from certain binary tags.

Deprecated tags and attributes

Deprecated tags and attributes should be avoided. The font, i, b tags should not be used.

alt

The alt attribute should be used in all img tags in order to improve accessibility. 

<img src="clint.jpg" alt="Picture of Clinton" width="100" height="120" />

height and width

The height and width attributes should be used in all img tags. 

<img src="clint.jpg" alt="Picture of Clinton" width="100" height="120" />

file size of images

The file size of any images should be kept to a minimum (at most 50K) and the file format (.jpg, .gif or .png) should be appropriate for the image type.

div and span elements

The div and span elements, in conjunction with the id and class attributes, should be used to add structure to the document.

CSS styles

Commonly used CSS styles should be declared in an external style sheet.

Validation

The HTML code should be validated against the DOCTYPE, using a parser such as the Upload File Validator at http://validator.w3.org A comment within the header should indicate if and when the code was validated. If non-standard elements have been used, and the code does not validate, then the comment should indicate what non-standard elements have been used and why.

Retrieved from "http://mercury.it.swin.edu.au/swinbrain/index.php/Swinburne_HTML_Coding_Standards"