HTML STANDARDS

Contents:

Introduction

The Hypertext Mark-up Language (HTML) is a structured mark-up language used to create Web pages.  A mark-up language like HTML is simply a collection of text codes, called elements that are used to indicate the structure and format of a document.

This page highlights some standards that must be followed when designing web pages.  This will ensure that the pages are re-usable and easily maintainable.

a. Tags

i. Capital Letters:

  • All Tags must be capital letters.  This will make it easier to see the difference between tags and text.

 

Keep to the following construct:

 

<H1> My Header</H1> 

 

And NOT

 

<h1> My Header</h1>

 

ii. iiii. Start and End:

  • Tags must have a START and END tag (there are tags that do not have end tags, these are exceptions).

 

Keep to the following construct:

 

<H1>My Header</H1> or <P>hello</P1>

 

and NOT

 

<H2>hello

<P1>hello again

  • The second approach is confusing for the browser as some are stricter than others and the interpretation could differ between browsers and tags.

<Top>

b. Form Tags

  • Must have {SERVLET_PATH} in FORM tag of HTML document. 

           Keep to the following construct:

          <form method="post" action="{SERVLET_PATH}">

<Top>

c. Stylesheets

i. Formatting

  • No formatting information (i.e. colour, font etc) in HTML pages.  This should be in style sheet with a link to the HTML page.  This makes the website look consistent.  Then it makes it easier to make cosmetic changes to the website i.e. change to the background colour or font is made in one place.

<Top>

d. Indentation

  • Use two spaces for indentation.

e. Field Types

  • Define a set of classes for each type of field on the input page.  Then each field type can be scripted to use same validation i.e. all monitory fields, all mandatory fields etc.

 

<Top>

f. Date Format

  • Use {DATE_FORMAT} to represent dates in HTML sheet

 

Keep to the following construct:

<td class="whitecell" width="433"><input name="Owner_IDExpiryDate"        size="10">{DATE_FORMAT}</td>

<Top>

g. Hard coding

  • No hard coding of text on pages.  Prompts should be input in braces and numbered so they can be translated

  • Instead of having a label “Start Date” on the page, the label should be “{%(1)Start Date}”.  The prompt will then be translated to the user’s language during run-time (if language is set-up).

 

<Top>

h. Scripts

  • Scripts should not be added directly to the pages but included via a link at the top (same as style sheets).  In 99% of cases these will be re-usable and it saves time in maintenance if the change is made in one place rather than on every page.

<Top>