• Structure
• Headings and Lists
• Anchors and URLs
• Character Formats
• Paragraph and New Line Breaks
• Images
• Preformatted Text

This document was collated from a variety of sources taken from the Web. If you would like to find out more about web page design standards and guidelines see the Information Quality WWW Virtual Library which provides annotated links to other sites on related topics.

Structure

• Keep the structure consistent, simple and interesting.

• Headings, lists and paragraph breaks should be used to break up the text into readable portions. Typically a readable portion is one full screen.

• Long pages (that is more than 3 screens) should have a table of contents at the top that allows the users to jump to a particular section of interest.

• White space is used to logically divide text and provide a contrast in your document. The following tags imply their own whitespace: paragraph <P>, headings <H1>, <ADDRESS>, <BLOCKQUOTE>, <PRE> and list structure tags of any type eg. <DL>, <UL>.

• You should consider how the pages look on all platforms and monitor sizes, it is recommended you design for a 14" screen. Mac, PC and Unix workstations all show web pages differently.

• If the files are large, don't forget to indicate the size of the text files and gifs before the download option is selected.

• Ensure your links are correct and are kept up-to-date.

Headings and Lists

• At a higher level, headings are preferable, because the larger, bolder font attracts the eye and can be easily analysed by programs (eg. indexers, Table of Content Generators, etc).

• Always use heading levels in order, with <H1> at the top of the document, and if necessary several <H2>s, and then if necessary several <H3>s under each <H2>. The six levels of headings are used to divide the documents up into sections and help create an information hierarchy.

• Avoid using extra highlighting elements within heading tags as the heading element already implies font changes and paragraph breaks.

• Lists help focus the user's attention on a series of items and makes digesting a large amount of information a lot easier.

Anchors and URLs

• Avoid using sentences presupposing the type of browser used by a reader:
  'You can find out more about social sciences research by clicking here'.
  A much better alternative is:
  'More information about social sciences research is available'.
  The second expression does not make an assumption that all readers will use a mouse (a click button) for navigation on the Web.

• Try not to make links to documents that are not completed as it slows download time and users with slow response times will not be appreciative.

• If the link is on an external server use the full absolute URL:

  Example:

  <a href="http://coombs.anu.edu.au/STANDARDS/guidelines.html">

• If a document or image link is in the same directory as the main document use a relative URL:

  Example:

  <a href="guidelines.html">

  The use of relative addresses will improve portability of a group of related documents from on subdirectory to another, or from one machine to another [an important consideration if your pages are to be mirrored by another site]

Character Formats

• Do not use <H1>, <H2> etc. tags for other purposes than logical division of sections of your document. If you want to put information in smaller or larger font than the default one, use <FONT SIZE=value> and </FONT> tags.

• It is strongly recommended that you employ the logical styles eg.
  <EM> (emphasis) and <STRONG> (stronger emphasis)
  rather than physical styles eg.
  <I> (italic) and <B> (bold)

  This is important, as other people with different browsers might not know how to view bold or italic text but if you use the logical tags they will find their own way to emphasise it.

Paragraph and New Line Breaks

• As mentioned earlier, The <P> tag implies it's own white space so should not be placed immediately before or after headings <H1>, <ADDRESS>, <BLOCKQUOTE> or <PRE> tags or a list structure of any type eg. <DL>, <UL>.

• <P> or <BR> tags are not needed to mark the end-of-text within lists eg. <LI>, <DT> or <DD> as they already imply this. However, you may use <P> to actually specify a new paragraph within the lists.

Images

• Provide basic icons to make navigation easier and keep them consistent throughout the relevant information pages.

• To help with colour mapping, the limited number of colours on a page should be not more than 150 and limited to 50 per image.

• Don't forget to include the ALT option for people who have browsers that can't make sense of images. This is a textual alternative tag that tells the browser what to display when there are no graphics available.

  Example:

  < IMG ALT="ANU crest" SRC="/images/crest.gif"></A>

  • Displays as: with images

  • Displays as: ANU crest without images

• When using graphics for decorative reasons rather than for informational reasons, use the ALT option but do not enter any text between the quotation marks:

  Example:

  <IMG SRC="flower.gif" ALT="">

• When using graphics to provide dot-point identification for each point, include the graphic as part of an active link.

  Example:

  <A HREF="#introduction"> <IMG SRC="/gifs/star.gif" border=0 ALT="dot">Introduction</A>

• It is recommended that the main document not contain graphics that are bigger than a screen. Use a button to determine if the person wishes to see the full graphic. This will help to reduce download time.

• images should not be wider than 476 pixels. This is because most viewers start up with the document area 564 pixels across.

Preformatted Text

• It is strongly recommended that the tags: <pre> </pre> are NOT used.

  In old documents where the <pre> </pre> tags were used, it is recommended that the following tags be avoided within the <pre> </pre> tags:

  • headers eg. <H1> </H1>
  • lists eg. <UL> </UL>
  • figures eg. <FIG> </FIG>
  • tables eg. <TABLE> </TABLE>
    
  The reason for this recommendation is that the preformatted text is rendered using a fixed width font and whitespace characters are treated literally.