spacer

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. http://www.ebi.ac.uk/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.

HTML 2.0 (1995) XHTML 1.0 (2002)
<BR>, <HR>, <B>, <H2>
<br />, <hr />, <b>, <h2>
align=left
style="text-align: left;"
valign=middle
style="vertical-align: middle;"
border=0
style="border: 0px;"
cellpadding=0
style="padding: 0px;"
cellspacing=0
style="border-collapse: collapse;"
border=1 bordercolor=black
style="border: 1px solid #000000;"
width=100
style="width: 100px;"
height=100
style="height: 100px;"
onMouseOver
onmouseover
<FONT FACE=COURIER COLOR=BLUE><B><I>
<span style="color: #0000ff; font-family: corier; font-weight: bold; font-style: italic; ">
<IMG ALIGN=LEFT WIDTH=5 HEIGHT=1 BORDER=0  SRC="foo.gif">
<img style="float: left; width: 5px; height: 1px; border: 0px;" src="foo.gif" alt="foo" />
<A HREF=foo&bar.html">bla bla</A>
<a href="foo&amp;bar.html">bla bla</a>
<A HREF=#2>Click Me</A>, <A NAME=2>
<a href="#s_2">Click Me</a>, <a name="s_2"></a>
<UL TYPE=DISC>
<ul style="list-style-type: circle;">
<TD BACKGROUND=foo.gif>
<td style="background: url("/images/foo.gif");">
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE><P>
<p style="text-indent: 40px;">
<TABLE><FORM><TR>
<form style="margin-top: 0px; margin-bottom: 0px;"><table><tr>
<NOBR>bla bla</NOBR>
<span style="white-space: nowrap;">bla bla</span>
<BODY BGCOLOR=WHITE>
<body style="background-color: #ffffff;" >
<OPTION SELECTED>
 
<option selected="selected">
 
<SCRIPT LANGUAGE="Javascript">
 
<script type="text/javascript">
<CENTER>bla bla</CENTER>
<div style="text-align: center">bla bla</div>
<A HREF="#" onClick="dosomething(); return false;">
<a href="javascript: dosomething();">
<TD NOWRAP>
<td nowrap="nowrap">, or <td style="white-space: nowrap">
<IMG HSPACE=2 VASPACE=6>
<img style="margin: 2px 6px 2px 6px;" /> 
<HTML><HEAD>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  lang="eng">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-GB" />

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&amp;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


spacer
spacer