<?php
if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml")) 
{
    
//A browser supporting XHTML
    
header("Content-Type: application/xhtml+xml");
    echo 
'<?xml version="1.0" encoding="ISO-8859-1"?>'"\r\n";
    
$xhtmlSupport '<p class="goodnote">Your browser reports "XHTML 1.0 Strict" 
                     compliance.<br />You should see this page exactly as I\'ve 
                     written it.</p>'
;
}
else
{
    
//A sucky one that doesn't, like IE
     
header("Content-Type: text/html");
     
$xhtmlSupport '<p class="badnote">Your browser reports "XHTML 1.0 Strict"<br /> 
                      non-compliance.<br />This page may not render properly.</p>'
;
}
  
// Ignore the below line when viewing the source from the link in the Resources
// section. All of the example pages to show errors (Purpose section) as well as
// the main page include validation2.php which is the main body of the tutorial. 
// I did this so I only had to edit one page for all examples. You can safely 
// delete this line if you combine validation.php (or index.php) and 
// validation2.php 
include('validation2.php');

?>
<!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" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="content-language" content="en-us" />
  <meta name="revisit-after" content="14 days" />
  <meta name="robots" content="follow,index" />
  <meta name="rating" content="general" />

  <title>An Exercise in XHTML, WCAG, and CSS Validation</title>
  <meta name="author" content="Leif Gregory" />
  <meta http-equiv="reply-to" content="validation1@devtek.org" />
  <meta name="keywords" content="xhtml 1.0 strict rule validate hr table column row w3c standard css wai wcag code source template element section 508" />
  <meta name="description" content="XHTML 1.0 Strict Template and Validation Tutorial with HTML element and CSS examples" />
  <meta name="abstract" content="XHTML 1.0 Strict Adherance Validation Tutorial with HTML and CSS Examples" />

  <style type="text/css">
   @import url("includes/site.css");
  </style>

  <link rel="stylesheet" type="text/css" title="Site CSS" href="includes/site.css" />

  <script type="text/javascript">
  <!-- //This tells us which mode the browser chose to render in
  var mode=document.compatMode,m;
  
  if(mode)
  {
    if(mode=='BackCompat')
      m='Quirks';
    else if(mode=='CSS1Compat')
      m='Standards Compliance';
    else m='Nothing';

    alert('The document is being rendered in '+m+' Mode.');
  } 
  -->
  </script>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-74586-2";
urchinTracker();
</script>
 </head>
 <body>

<!-- To get rid of the template page content, cut out from here -->
<div id="box">
<div id="content">
<div id="topnav">
<a href="#purpose" title="Links to Purpose Section">Purpose</a> &nbsp;::&nbsp;
<a href="#lessons_learned" title="Links to Lessons Learned Section">Lessons Learned</a> &nbsp;::&nbsp;
<a href="#general_rules" title="Links to General Rules Section">General Rules</a> &nbsp;::&nbsp;
<a href="#formative_examples" title="Links to Formative Examples Section">Formative Examples</a> &nbsp;::&nbsp;
<a href="#resources" title="Links to Resources Section">Resources</a> &nbsp;::&nbsp;
<a href="#contact" title="Links to Contact Section">Contact</a>
</div>
<p><a href="http://ncam.wgbh.org/webaccess/symbolwinner.html"
      title="NCAM Web Access Project Web Access Symbol">
        <img src="images/access1.0.gif" height="67" width="72"
             alt="Web Access Symbol (for people with disabilities)" class="floatRight" /></a></p>


<p>&nbsp;</p>
<p><img src="images/beakers.jpg" height="200" width="254"
        alt="Multiple Scientific Beakers" class="floatLeft" /></p>
  <h1>An Exercise in the Alchemy of <acronym title="eXtensible Hypertext Markup Language">
      XHTML</acronym> 1.0 Strict, <acronym title="Web Content Accessibilty Guidelines">
      WCAG</acronym> 1.0 (triple A), Section 508, and <acronym title="Cascading Style Sheets">
      CSS</acronym> 2.0 Validation</h1> 

<p class="centerDate">Last updated on <?php echo date ("F d, Y"filemtime('validation2.php'))?></p>
<p><a id="purpose" /></p>
<div class="centernote"><? echo $xhtmlSupport; ?></div>
<p>&nbsp;</p>

<h2 class="buttonize">Purpose</h2>

<ul>
  <li>A learning experience in order to understand what was necessary to 
      author the <acronym title="Hyper Text Markup Language">HTML</acronym> 
      in accordance with <acronym title="eXtensible Hypertext Markup Language">
      XHTML</acronym> 1.0 Strict, <acronym title="Web Content Accessibilty Guidelines">
      WCAG</acronym> 1.0, Section 508, and <acronym title="Cascading Style Sheets">
      CSS</acronym> 2.0 validation standards.</li>
  <li>To create a base template document that conforms to valid XHTML 1.0 
      Strict (i.e. declarations, headers, language, external 
      <acronym title="Cascading Style Sheets">CSS</acronym> linkage etc.)</li>
  <li>To attain a Priority 3 rating for <acronym title="Web Content Accessibilty Guidelines">
      WCAG</acronym>.</li>
  <li>To provide examples of common <acronym title="Hyper Text Markup Language">HTML</acronym>
      entities found in most documents as valid <acronym title="eXtensible Hypertext Markup Language">
      XHTML </acronym> 1.0 Strict and conforming to Priority 3 
      <acronym title="Web Content Accessibilty Guidelines">WCAG</acronym>.</li>
</ul>
      
<p class="margin2">
  The primary purpose of <acronym title="eXtensible Hypertext Markup Language">
  XHTML</acronym> 1.0 is as a transition between the relatively limited 
  <acronym title="Hyper Text Markup Language">HTML</acronym> and the more robust 
  <acronym title="eXtensible Markup Language">XML</acronym>. 
  <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> is
  no longer a sibling of <acronym title="Hyper Text Markup Language">HTML</acronym> 
  but rather a child of <acronym title="eXtensible Markup Language">XML</acronym>
  and as such, seeks to promote the following:
</p>

<ul>
  <li>Divorce page content from design and layout. i.e. not using tables as a
      placement mechanism for images and text.</li>
  <li>Proper closing of all tags to conform with 
      <acronym title="eXtensible Markup Language">XML</acronym>.</li>
  <li>Proper nesting of elements. i.e. sticking this unordered list
      inside &lt;p&gt; tags will throw an error.</li>
</ul>

<p>&nbsp;<a id="lessons_learned" /></p>
<h2 class="buttonize">Lessons Learned</h2>

<p class="margin2">
  One thing that I've learned from this experience is that unless some really 
  good authoring software comes along, writing validated pages is going to end
  up back in the hands of programmers. Without easy to use authoring tools, 
  the browsers will never be able to fully move on to stricter standards. No 
  browser developer is going to risk losing market share by breaking a huge
  amount of the internet by refusing to render improper pages.
</p>

<p class="margin2">
  Another thing I've learned is that authoring validated pages requires a whole
  lot of work. I estimate that 40% of the markup in this tutorial is solely to 
  support <acronym title="Web Content Accessibilty Guidelines">WCAG</acronym> 
  and Section 508. This renders the readability of the markup much more difficult
  to follow along with and make changes to. Where before I was pretty consistent
  at breaking my markup lines at 80 characters, I now have very oddly shaped
  "paragraphs" of markup. Each of which requires a good deal of reformatting if 
  I add or delete just even a couple of words. Don't get me wrong, I'm not
  complaining, just trying to emphasize the point I made earlier about the need
  for really good authoring tools. Without them, I just don't see your average
  Joe putting in the time and effort necessary to author validated pages. This
  is especially true when it comes to multimedia content where synchronized 
  captioning of spoken text is required.
</p>

<p class="margin2">
  All in all, one thing is for certain. The old adage "You can please all the 
  people some of the time, and some of the people all the time, but you can never 
  please all the people all the time" is very apt. If you decide to go full-bore
  using the latest tags and elements you are going to break older browsers. We'd
  all like to think that in this day and age of innumerable exploits, everyone 
  would keep their OS and browsers patched, but it just doesn't happen. A quick
  look at webserver logs for an even minimally popular site dispels that idea
  in a heartbeat. One of the driving forces behind the use of newer tags is 
  <acronym title="Web Content Accessibilty Guidelines">WCAG</acronym> 1.0 and 
  Section 508. One issue with these in particular that you'll quickly come to 
  realize is that while we really should make every attempt possible to make
  our web pages accessible to those with disabilities, doing so has an aesthetic
  impact on the page as well. A good for instance is the Form Legend element
  (see Formative Examples) which draws a box around associated form elements.
</p>

<p>&nbsp;<a id="general_rules" /></p>

<h2 class="buttonize">General Rules</h2>

<ul>
  <li>To truly force a browser to render a page using <acronym title="eXtensible HyperText Markup Language">
      XHTML</acronym> you have to set the <acronym title="Multipurpose Internet Mail Extensions">
      MIME</acronym>-type header to "application/xhtml+xml". However, 
      since there are only certain browsers that fully support 
      <acronym title="eXtensible Hypertext Markup Language">
      XHTML</acronym>, you need to ensure the browser can actually render 
      it. For Mozilla based browsers, this is relatively easy (see the 
      <a href="#resources" title="Links to Resources Section">Resources 
      section</a> of this page to view this tutorial's source for 
      how to do it.) To see how much <acronym title="eXtensible Hypertext Markup Language">
      XHTML</acronym> various browsers support, take a look at the
      <a href="http://www.w3.org/People/mimasa/test/xhtml/media-types/results" 
         title="W3C XHTML Media Type Support">
         W3C XHTML Media Type Support</a>.<br /><br /></li>
  <li>If you use the <acronym title="eXtensible Markup Language">
      XML</acronym> Prologue as follows &lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
      then you will force <acronym title="Internet Explorer">IE</acronym>
      into Quirks Mode which will render the page poorly. Use scripting
      to test for an <acronym title="Internet Explorer">IE</acronym> 
      browser and don't output the prologue if it is. See the source of 
      this page in the 
      <a href="#resources" title="Links to Resources Section">
      Resources section</a> to see how I accomplished this in 
      <acronym title="PreHypertext Processor">PHP</acronym>.<br /><br />
      One good thing about using the prologue during the authoring phase is that
      it'll catch a large majority of mistakes without the need to validate
      through an external source.</li>
  </ul>
      <div class="roundBorder">
      <p>As a test, I've created a few variations on this page for you. You'll
      notice the most issues with <acronym title="Internet Explorer">IE</acronym>:
      </p>
      <ul>
        <li><a href="xml_prologue.php" 
               title="Using the XML prologue">
            Using the XML prologue.</a> In <acronym title="Internet Explorer">
            IE</acronym>, pay attention to the Javascript Alert and how the
            page looks as compared to other browsers. This test is the only one
            which does not force the xhtml/xml header.</li>
        <li><a href="forced_header.php" 
               title="Forcing the xhtml/xml header">
            Forcing the xhtml/xml header.</a> <acronym title="Internet Explorer">
            IE</acronym> will usually try to download the page.</li>
        <li><a href="xhtml_error.php" 
               title="Forcing an XHTML Rendering Error">
            Forcing an XHTML rendering error.</a> <acronym title="Internet Explorer">
            IE</acronym> will usually try to download the page.</li>
      </ul>
      <p>For you <acronym title="Internet Explorer">IE</acronym> users, the 
         surrounding blue box here is supposed to have rounded corners which
         Mozilla shows correctly.</p>
      </div>
  <ul>
  <li>Any tag opened must be closed.<br /><br /></li>
  <li>Empty tags must be closed as follows: &lt;hr /&gt;, &lt;br /&gt;<br /><br /></li>
  <li>All tags and attributes are lower-case: &lt;hr /&gt; not &lt;HR /&gt;. 
      However, attribute values may be mixed case.<br /><br /></li>
  <li>Use double-quotes for attribute values: &lt;a id="example"&gt;
  <img src="images/blue_beaker.gif" height="134" width="97"
  alt="Blue Beaker" class="floatRight" style="margin-right: 100px;" /><br /><br /></li>
  <li>Do not overlap elements: &lt;strong&gt;&lt;i&gt;Hello&lt;/strong&gt;&lt;/i&gt; 
      is incorrect.<br /><br /></li>
  <li>Many elements no longer allow nesting. This was one of the biggest 
      stumbling blocks for me. It was easy to find examples of use, but there
      was a lot of shuffling elements around to find a nesting order which did
      not break validation. The form in Formative Examples is a good example.<br /><br /></li>
  <li>Tables require captions, summaries and &lt;th&gt; elements.<br /><br /></li>
  <li>The "align" attribute is depreciated in nearly everything except 
      &lt;tr&gt; elements. However, the W3C validator let me get away with using
      them in the below table to center the right-hand column.<br /><br /></li>
  <li>There are a good number of depreciated elements, so take a look at
      the <a href="#resources" title="Links to Resources Section">Resources 
      section</a> of this page to check them out.<br /><br /></li>
  <li>If you use an acronym, you need to provide a definition using the
      &lt;acronym title="A Major Headache"&gt;AMH&lt;/acronym&gt; tag. 
      This requirement alone is responsible for the majority of markup and 
      readability issues while authoring this tutorial.</li>
</ul>

<p>&nbsp;<a id="formative_examples" /></p>
  <h2 class="buttonize">Formative Examples</h2>
  <br />
  <br />
  <table border="1" width="100%" cellpadding="2" cellspacing="0"
         summary="Basic Element Examples">
    <caption>Some basic examples</caption>
    <tr>
      <th style="width:65%">Element / Snippet</th><th style="width:35%">Output</th>
    </tr>
    <tr>
      <td>
        <pre style="position: relative; left: -47px;">
      &lt;hr /&gt;
        </pre>
      </td>
      <td><hr /></td>
    </tr>
    <tr>
      <td>
        <pre style="position: relative; left: -47px;">
      &lt;a href="http://www.example.com"
         title="Describe the object linked to"&gt;
         The Example Website&lt;/a&gt;
        </pre>
        <p class="note">NOTE: Hovering over the link will display the "title"</p>
      </td>
      <td align="center">
      <a href="http://www.example.com" 
         title="Describe the object linked to">
         The Example Website</a></td>
    </tr>
    <tr>
      <td>
        <pre style="position: relative; left: -47px;">
      &lt;form id="exampleForm" method="post" action="validation.php"&gt;
        &lt;fieldset&gt;
        &lt;legend&gt;Example input&lt;/legend&gt;
        &lt;p&gt;
          &lt;label for="exampleData"&gt;Enter Data:&lt;/label&gt;&lt;br /&gt;        
            &lt;input type="text" id="exampleData" 
                   value="Data goes here" /&gt;
          &lt;input type="submit" id="go" value="Go" /&gt;
        &lt;p&gt;
      &lt;/fieldset&gt;
      &lt;/form&gt;
        </pre>
      </td>
      <td align="center">
        <form id="exampleForm" method="post" action="validation.php">
          <fieldset>
          <legend>Example input</legend>
          <p>
            <label for="exampleData">Enter Data:</label><br />
              <input type="text" id="exampleData" value="Data goes here" tabindex="1"/>
            <input type="submit" id="go" value="Go" tabindex="2"/>
          </p>
          </fieldset>
        </form>
      </td>
    </tr>
    <tr>
      <td>    
        <pre style="position: relative; left: -47px;">
      There can be only 
      &lt;del&gt;two&lt;/del&gt;
      &lt;ins datetime="1994-11-05T08:15:30-05:00"
           title="Changed as a result of one biting the bullet"&gt;
              one&lt;/ins&gt;!
        </pre>
        <p class="note">Instead of using font decorations like strikethrough and 
           underline when you need to keep changes intact. It also provides for
           a hover tooltip on the new portion of the text to provide an 
           explanation for the change</p>
      </td>
      <td align="center">
        There can be only <del>two</del>
        <ins datetime="1994-11-05T08:15:30-05:00"
             title="Changed as a result of one biting the bullet">
          one</ins>!
      </td>
    </tr>
    <tr>
      <td>
        <pre style="position: relative; left: -47px;">
      &lt;a href="http://validator.w3.org/check?uri=referer"
         title="XHTML Validator"&gt;
      &lt;img src="images/xhtml10.png" height="31" width="88"
           alt="Valid XHTML 1.0 icon, XHTML Validator" />&lt;/a&gt;
        </pre>
        <p class="note">NOTE: Hovering over the link will display the "title" in 
           every browser except <acronym title="Internet Explorer">IE</acronym>, 
           which will display the "alt" information. 
           Notice the "title" attribute is associated with the link and not the
           image. Further note that the "alt" tag contains both the image
           description, a comma, and then the same information in the "title" tag.
           This is the best workaround for the broken <acronym title="Internet Explorer">
           IE</acronym> browser to ensure compliance with <acronym title="Web Content Accessibilty Guidelines">
           WCAG</acronym> 1.0 (<a href="#resources" 
           title="Links to Resources Section">see resources below</a>)</p>
      </td>
      <td align="center">
        <a href="http://validator.w3.org/check?uri=referer"
           title="XHTML Validator">
        <img src="images/valid-xhtml10.png" height="31" width="88"
             alt="Valid XHTML 1.0 icon, XHTML Validator" /></a>
      </td>
    </tr>
    <tr>
      <td>
<?php 
// Doing this in PHP so I only have to write it once, but I can display it as
// plaintext and HTML in the Formative Examples table without the &lt;&gt;.
$tableOutput = <<<HERE
<table width="100%" cellpadding="2" cellspacing="0" 
       summary="Basic Table Example">
<caption>Basic Table</caption>
  <tr align="center">
    <th>&nbsp;</th>
    <th>Col-1</th><th>Col-2</th><th>Col-3</th>
  </tr>
  <tr align="center">  
    <th>Row-1</th>
    <td>R1C1</td><td>R1C2</td><td>R1C3</td>
  </tr>
  <tr align="center">  
    <th>Row-2</th>
    <td>R2C1</td><td>R2C2</td><td>R2C3</td>
  </tr>
</table>
HERE;
highlight_string($tableOutput);
echo 
"</td><td>$tableOutput";
?>
      </td>
    </tr>
    <tr>
      <td>
<?php 
// Doing this in PHP so I only have to write it once, but I can display it as
// plaintext and HTML in the Formative Examples table without the &lt;&gt;.
$tableOutput2 = <<<HERE
<table width="100%" cellpadding="2" cellspacing="0" 
       summary="Advanced Table Example">
  <caption>A more advanced table</caption>
  <thead>
    <tr>
      <th>Col-1</th><th>Col-2</th><th>Col-3</th>
    </tr>
  </thead>  
  <tfoot>
    <tr align="center">
      <td colspan="3">Table created 9 Feb 2005</td>
    </tr>
  </tfoot>
  <tbody>
    <tr align="center">
      <td>R1C1</td><td>R1C2</td><td>R1C3</td>
    </tr>
    <tr align="center">
      <td>R2C1</td><td>R2C2</td><td>R2C3</td>
    </tr>
  </tbody>          
</table>  
HERE;
highlight_string($tableOutput2);
?>
        <p class="note">NOTE: Use this type of table when you know you're going 
           to have multiple pages. The header and footer will output to every 
           page automatically so you don't have to hardcode it.</p>
<?
echo "</td><td>$tableOutput2";
?>
      </td>
    </tr>
    <tr>
      <td>
<?
// Doing this in PHP so I only have to write it once, but I can display it as
// plaintext and HTML in the Formative Examples table without the &lt;&gt;.
$multimediaExample = <<<HERE
<object type="application/x-mplayer2"
        codebase="http://activex.microsoft.com/activex/controls
                 /mplayer/en/nsmp2inf.cab#Version=5,1,52,701" 
        standby="Loading Microsoft Windows® Media Player 
                 components..." 
        data="images/johnwestbear.wmv"
        width="200" height="163"
        title="Movie: Fighting a Bear Over Salmon Commercial">
  A funny commercial about a man attacking a bear to steal the 
  salmon  away from the bear. It looks very realistic until the 
  bear starts throwing some karate moves.
  <param name="movie" value="images/johnwestbear.wmv" />
  <param name="animationatStart" value="0" />
  <param name="transparentatStart" value="0" />
  <param name="autoStart" value="0" />
  <param name="showControls" value="1" />
  <param name="Volume" value="-20" />
</object>
HERE;
highlight_string($multimediaExample);
?>
        <p class="note">NOTE: This is technically the only item on this tutorial
        which isn't 100% compliant. It's mainly here to show how to validate it
        against <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym>
        1.0 Strict. In order to validate it against <acronym title="Web Content Accessibilty Guidelines">
        WCAG</acronym> 1.0 and Section 508, it would require that I provide  
        captioning of the spoken text. Since I am not much of a multimedia guy,
        I'm going to just provide a text equivalent of what is being said when
        I get a bit more time.</p>
        <p class="note">Just FYI, this is still a work in progress. As is, it's
        broke in <acronym title="Internet Explorer">IE</acronym> because the way
        <acronym title="Internet Explorer">IE</acronym> requires the markup to
        stream the video is in direct contradiction to 
        <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> 
        1.0 Strict.</p>
        
        <p class="note">I spent a lot of time trying to fix this particular one for Firefox. 
        It says just about everywhere that the &lt;param&gt; values are boolean 
        and all the examples used true/false. Firefox was ignoring these and I 
        just happened to run across a site using 1/0 values. Gave it a shot and 
        it fixed it.</p>
<?
echo '</td><td align="center">' . $multimediaExample;
?>
      </td>
    </tr> 
  </table> 

<p>&nbsp;<a id="resources" /></p>
  <h2 class="buttonize">Resources</h2>

<p><img src="images/red_beaker.gif" height="134" width="97"
        alt="Red Beaker" class="floatRight" style="margin-right: 300px;" /></p>
  <h3 class="margin1">Code Sources</h3>
  <p class="margin2"><a href="viewsource.php"
        title="View the source of this page">
        View the source of this page (including PHP).</a><br />
 
        <a href="strict_template.txt"
        title="Get the XHTML 1.0 Strict Template">
        Get the basic <acronym title="eXtensible Hypertext Markup Language">XHTML
        </acronym> 1.0 Strict Template.</a><br />

        <a href="includes/site.css"
        title="Get the site.CSS page">
        Get the <acronym title="Cascading Style Sheet">CSS</acronym> page used
        for this tutorial.</a>
  </p>
 
  <h3 class="margin1">Valid <acronym title="Hyper Text Markup Language">HTML</acronym>
      4.0 Elements</h3>
  <p class="margin2">For a list of all elements and their use or depreciation
     status, visit the
     <a href="http://www.w3.org/TR/REC-html40/index/elements.html"
        title="HTML 4.0 Elements">
        W3C <acronym title="Hyper Text Markup Language">HTML</acronym> 4.0 
        elements table</a>
  </p>

  <h3 class="margin1">Valid <acronym title="Hyper Text Markup Language">HTML</acronym> 
      4.0 Attributes</h3>
  <p class="margin2">For a list of all attributes and their use or depreciation
     status, visit the
     <a href="http://www.w3.org/TR/REC-html40/index/attributes.html"
        title="HTML 4.0 Attributes">
        W3C <acronym title="Hyper Text Markup Language">HTML</acronym> 4.0 
        attributes table</a>
  </p> 
  
  <h3 class="margin1">Depreciated commonly used tags, elements, and attributes</h3>
    <table border="1" style="margin-left: auto; margin-right: auto;" width="95%" cellpadding="2" cellspacing="0" summary="Depreciated Tags">
      <caption>Non-exhaustive listing</caption>
      <tr>
        <th>Item</th>
        <th>Old use</th>
        <th>Fix</th>
        <th>Current use</th>
      </tr>
      <tr align="center">
        <td>name</td>
        <td>&lt;a name="example"&gt;</td>
        <td>id</td>
        <td>&lt;a id="example"&gt;</td>
      </tr>
      <tr align="center">
        <td>align</td>
        <td>&lt;table align="center"&gt;<br />
            &lt;hr align="center"&gt;</td>
        <td><acronym title="Cascading Style Sheets">CSS</acronym></td>
        <td>&lt;table style="margin-left: auto; margin-right: auto;"&gt;<br />
            &lt;hr style="margin-left: auto; margin-right: auto; /&gt;</td>
      </tr>
      <tr align="center">
        <td>Hyperlink Targets</td>
        <td>target="xxxx"</td>
        <td>None</td>
        <td>Javascript Popup?</td>
      </tr>   
      <tr align="center">
        <td>font</td>
        <td>&lt;font&gt;</td>
        <td><acronym title="Cascading Style Sheets">CSS</acronym></td>
        <td>CSS Font Attributes</td>
      </tr>           
      <tr align="center">
        <td>strike</td>
        <td>&lt;strike&gt;</td>
        <td><acronym title="Cascading Style Sheets">CSS</acronym></td>
        <td>text-decoration: line-through</td>
      </tr>  
      <tr align="center">
        <td>underline</td>
        <td>&lt;u&gt;</td>
        <td><acronym title="Cascading Style Sheets">CSS</acronym></td>
        <td>text-decoration: underline</td>
      </tr>  
      <tr align="center">
        <td>Script - Language</td>
        <td>&lt;script language=""&gt;</td>
        <td>type</td>
        <td>&lt;script type="text/javascript"&gt;</td>
      </tr> 
      <tr align="center">
        <td>Body - Attributes</td>
        <td>bgcolor, link, vlink, alink</td>
        <td><acronym title="Cascading Style Sheets">CSS</acronym></td>
        <td>background-color, a:link, a:visited, a:hover</td>
      </tr> 
    </table>

  <p class="margin2">If you'd like to see a more complete list, see
     <a href="http://liorean.web-graphics.com/xhtml/comparison.loose-strict.html"
        title="Comparison of Loose vs. Strict">
        Liorean Web Graphics comparison of loose and strict</a>
  </p>   
  
  <h3 class="margin1">Validation</h3>
  <p class="margin2">The below are validation icons to test if your code validates. 
     You may keep these icons and their associated code on your production page 
     if you wish (Provided of course that you pass validation). Please note that 
     there are many validators for
     <a href="http://www.w3.org/TR/WCAG10/"
        title="Web Content Accessibility Guidelines (WCAG 1.0)">
        <acronym title="Web Content Accessibilty Guidelines">WCAG</acronym> 1.0</a> 
     and Section 508, and each one has its quirks. Using the 
     <a href="http://www.w3.org/TR/WCAG10/full-checklist.html"
        title="WCAG 1.0 Checklist">
        <acronym title="Web Content Accessibilty Guidelines">WCAG</acronym> 
        1.0 Checklist</a> 
     as you go would probably be a bit easier in terms of mitigating most 
     Priority 1 problems.   
  </p>
  <p class="margin2">This page passes validation with all of the below checks.
     To be completely honest, there was a great deal of hit and miss in order
     to pass validation for all of these (including the recommended additional
     validation services). Often I would attempt to fix a problem
     brought up on one validation failure and inadvertently cause another. This
     wasn't necessarily the fault of the validation sites as I was learning what
     was good and bad code as I went through this. However, some validation
     warnings sent me on wild-goose chases trying to figure out how to fix 
     something that really wasn't broken.</p>
  <p class="margin2">Further, this page is valid for nearly all current browsers 
     but fails for older versions such as NN4, Opera4, <acronym title="Internet Explorer">IE</acronym>4. 
     When deciding what level of validation you wish to attain, you'll really 
     need to profile your target audience. If they tend to use older browsers, 
     then you'll need to author your pages to conform to older standards which 
     may or may not pass validation.</p>

  <p class="margin2">
    <a href="http://validator.w3.org/check?uri=referer"
      title="XHTML Validator">
      <img src="images/valid-xhtml10.png" height="31" width="88"
           alt="Valid XHTML 1.0 icon, XHTML Validator" /></a>&nbsp;

    <a href="http://jigsaw.w3.org/css-validator/check/referer"
      title="CSS Validator">
      <img src="images/vcss.png" height="31" width="88"
           alt="Valid CSS icon, CSS Validator" /></a>&nbsp;
           
    <a href="http://www.w3.org/WAI/WCAG1AAA-Conformance"
      title="W3C-WAI Web Content Accessibility Guidelines 1.0">
      <img src="images/wcag1AAA.gif" height="32" width="88"
           alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" /></a>&nbsp;
  </p>
  <p class="margin2">
    The W3C hosts a 
    <a href="http://www.w3.org/WAI/ER/existingtools.html"
      title="WCAG and Section 508 Validators">   
    list of sites for further <acronym title="Web Content Accessibilty Guidelines">
    WCAG</acronym> and Section 508 validation</a>, both on-line 
    and software, which you can use, most for free. Again, each of these tools 
    have their quirks so checking with multiple tools is your best bet.
  </p>
  <p class="margin2">
    Here is a short list of a few that I found particularly useful and why.
  </p>
  <div class="roundBorder">
    <ul>
      <li><a href="http://www.contentquality.com/"
             title="Cynthia Says WCAG/508 validator">Cynthia Says <acronym title="Web Content Accessibilty Guidelines">
             WCAG</acronym>/508 validator</a>
          <ul>
            <li class="goodnote">Very detailed.</li>
            <li class="goodnote">Allows you to emulate different browsers.</li>
            <li class="badnote">A little unclear on how to make sure everything
                gets tested. The report shows some areas with no validation 
                information.</li>
          </ul>           
      <br /></li>
      <li>
             <img src="images/red_vial.gif" height="134" width="97"
                  alt="Red Vial" class="floatRight" />  
      <a href="http://www.wave.webaim.org/index.jsp"
             title="Wave Web Accessibility Tool WCAG/508 validator">Wave Web 
             Accessibility Tool <acronym title="Web Content Accessibilty Guidelines">
             WCAG</acronym>/508 validator</a>
          <ul>
            <li class="goodnote">Very detailed.</li>
            <li class="goodnote">Provides a graphical representation of elements.</li>
          </ul>           
      <br /></li>
      <li><a href="http://www.hermish.com/"
             title="Hermish WCAG/508 validator">Hermish <acronym title="Web Content Accessibilty Guidelines">
             WCAG</acronym>/508 validator</a>
          <ul>
            <li class="goodnote">Pass/Fail for all three Priority levels and 
                Section 508.</li>
            <li class="goodnote">Displays compatibility levels with various 
                browser versions for your page. Clicking the "more information" 
                link will display a detailed table that is excellent.</li>
            <li class="goodnote">Tests tag attributes for errors.</li>
            <li class="badnote">It incorrectly throws a warning for a &lt;TT&gt; 
                tag which does not appear in this page.</li>
            <li class="badnote">Stated that this page scored a 70.66 readability 
                level (extremely difficult). I only placed this in red because 
                they don't tell you which index was used for the calculation and
                it's not consistent with other readability level evaluations. 
                If you want to test your readability level, I suggest 
                <a href="http://www.readability.info/"
                   title="Readability Info">The Readability Info Website</a>,
                which calculates against seven different indices. They rated 
                this tutorial less difficult to understand than an average 
                <a href="http://www.pcworld.com/"
                   title="PC World Magazine">
                   PC World Magazine</a> article.</li>
            <li>I was contacted by the author of Hermish and he's working on
                trying to quash the &lt;TT&gt; bug I ran across.</li>
          </ul>           
      <br /></li>
      <li><a href="http://www.ocawa.com/Home_7_en/top-accessible_26.htm"
             title="Ocawa WCAG validator">Ocawa <acronym title="Web Content Accessibilty Guidelines">
             WCAG</acronym> validator</a>
          <ul>
            <li class="goodnote">Highlighted source code to show where errors 
                were found.</li>
            <li class="goodnote">Provides page statistical data.</li>
            <li class="badnote">Error comments aren't very intuitive, but it 
                gets you pointed in the right direction.</li>
          </ul>
      <br /></li>
      <li><a href="http://valet.webthing.com/"
             title="Valet WCAG validator">Valet <acronym title="Web Content Accessibilty Guidelines">
             WCAG</acronym> validator</a>
          <ul>
            <li class="goodnote">Provides an excellent outline of elements.</li>
            <li class="badnote">Actual validation is kind of lacking in clarity.</li>
          </ul>
      <br /></li>
      <li><a href="http://webxact.watchfire.com/"
             title="WebXact validator">WebXact validator</a>
          <ul>
            <li class="goodnote">This one does a bit more than just 
                accessibility validation.</li>
            <li class="goodnote">Gives you a quality assessment concerning 
                broken links and anchors, navigability, missing element 
                attributes.</li>
            <li class="goodnote">Provides statistics for page.</li> 
            <li class="goodnote">Extremely detailed.</li>
            <li class="badnote">Due to the level of detail, it also cries wolf a 
                bit too much. This page generates a Priority 1 Error due to the 
                use of &lt;pre&gt; tags where it assumed there was ASCII art vs. 
                the <acronym title="Hyper Text Markup Language">HTML</acronym> 
                code I was displaying in the Formative Examples section. 
                This should be a warning instead. It also generated a Priority 3 
                Error because it doesn't like the three validation buttons next 
                to each other and states "Separate adjacent links with more than 
                whitespace."</li>
          </ul>
      </li>
    </ul>
    </div>

<p>&nbsp;<a id="contact" /></p>


  <h2 class="buttonize">Contact</h2>
  <p class="margin1">Feel free to
     <a href="/contact.php" 
        title="Contact me">Contact me</a>
  </p>
</div>
</div>

<!-- ******************* To here ******************* -->
 </body>
</html>