 |
Making your web pages validate
The html templates have been validated as xhtml 1.0 transitional, so you can test your web pages for html validilition.
Listed below are some common useful changes you can apply to your code to improve web html validilition.
N.B. As with the accessability validation, we do not have time to check every page!
Some examples of pages that have been tested are top links to static html pages from the home page that are managed by the es group, or any of the tool summission forms on the tools page that sre static html pages managed by the es group, e.g. /Tools/clustalw2/.
- Install web developer into firefox.
- Using the right mouse menu select: Web developer>tools>validate local html.
- You will now get a w3 report for your chosen web page.
Replacing Old Tags
Here are some common examples of stuff that needs to be updated to xhtml.
Frequently Ocurring Problems with validation
- Ensure mark-up is lower case
html tags as well as javascript methods should all be lower case,
e.g.
<HEAD><SCRIPT LANGUAGE="Javascript">function doSomething()...
should read:
<head><script type="text/javascript">function dosomething()...
- Add close slash to single tags
Single tages like <hr> must be closed, e.g. <hr />. This includes image!
- Dont nest forms within tables
Must be outside, set the margin attributes of the forms to remove padding, e.g. <form style="margin-top: 0px; margin-bottom: 0px;"><table...
- Add type attributes to embedded scripts
here the correct mime type needs to be declared, e.g. <script type="text/javascript">
- Avoid excessive nesting
This may lead to validation errors,
e.g.
<p>bla bla <ul><li>bla bla</li><li>bla bla</li></ul>bla bla</p>
should be replaced by:
<p>bla bla </p><ul><li>bla bla</li><li>bla bla</li></ul><p>bla bla</p>
- Ensure alternative content is available
The most common error is not having an alt attribute to describe images, if you get into accessability testing, the same will apply for form elements, see the accessability guide for more details, e.g.
<IMG SRC=foo.html>
should be replaced by:
<img src
="foo.html" alt="View foo" />
- Ensure strange characters in URL's are encoded
e.g.
<a href="foo&bar.html">click here</a>
should be replaced by:
<a href="foo&bar.html">click here</a>
- Do not use integers for internal anchors
This throws errors, e.g.
<A HREF=#2>Click Me</A>, <A NAME=2>
should be replaced by:
<a href="#s_2">Click Me</a>, <a name="s_2"></a>
- Do not use tag attributes with no value
These now must be follwed by an equales sign and a value, e.g.
<TD NOWRAP>
should be replaced by:
<td nowrap="nowrap">
<OPTION SELECTED>
should be replaced by:
<option selected="selected">
<INPUT TYPE=CHECKBOX NAME=FOO CHECKED >
should be replaced by:
<input type="checkbox" name="foo" checked="checked" />
- Do not use margin attributes in body tag
e.g.
<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"
These can be removed and are in the css files anyway...
- Mixed case javascript calls are invalid
e.g.
onSubmit, onClick, onMouseOver, onMouseOut
should be replaced by:
onsubmit, onclick, onmouseover, onmouseout
- Ensure form elements are closed
If these have a single tag, close them,
e.g.
<INPUT TYPE=SUBMIT>
should be replaced by:
<input type="submit" />
- Do not use duplicate ID's
This will throw an error, if this is linked to CSS, make sure the id styles are replaced by class styles, so that multiple elements can be added.
- Add alt attributes to areas of image maps
<AREA SHAPE="rect" COORDS="12,141,173,177" HREF="foo.html">
should be replaced by:
<area shape="rect" coords="12,141,173,177" href="foo.html" alt="go to foo" / >
Useful Links
XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
HTML Validater
CSS 2.1 Specification
Firefox download
Firefox web developer extension download
|
