ASU Web Community

Home

How to Write XHTML Markup That Validates: 10 Easy Steps

kdmarks's picture
Posted February 21st, 2007 by kdmarks
in
  1. Use the right DOCTYPE. This is the one asu.edu Web Services recommends:

    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />
    &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;<br />
    &lt;head&gt;

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

  2. Close all tags. Example: &lt;p&gt; &lt;/p&gt;
  3. Close all empty elements. Example: &lt;br /&gt;, &lt;hr /&gt; and &lt;img src="example.jpg" alt="An example" /&gt;
  4. Spell out these character entities:
    • &quot;&amp;lt;&quot; represents the < sign.
    • &quot;&amp;gt;&quot; represents the > sign.
    • &quot;&amp;amp;&quot; represents the & sign.
    • &quot;&amp;quot;&quot; represents the " mark.
  5. Ensure elements are correctly nested.

    Wrong: &lt;p&gt;Close tags in correct &lt;em&gt;order.&lt;/p&gt;&lt;/em&gt;
    Right: &lt;p&gt;Close tags in correct &lt;em&gt;order&lt;/em&gt;.&lt;/p&gt;

  6. Write all tags in lower case.

    Wrong: &lt;IMG SRC="http://www.sitename.com/images/box.gif" ALT="Gift Box" ALIGN="left" /&gt;
    Right: &lt;img src="http://www.sitename.com/images/box.gif" alt="Gift Box" align="left" /&gt;

  7. Include values on all attributes.

    Wrong: &lt;img src="http://www.sitename.com/images/box.gif" alt="Gift Box" noshade /&gt;
    Right: &lt;img src="http://www.sitename.com/images/box.gif" alt="Gift Box" noshade="noshade" /&gt;

  8. Put quotation marks on attribute values.

    Wrong: &lt;img src=http://www.sitename.com/images/box.gif alt=Gift Box align=left /&gt;
    Right: &lt;img src="http://www.sitename.com/images/box.gif" alt="Gift Box" align="left" /&gt;

  9. Include alt attributes on all images and title attributes on all links. Example: &lt;a href="http://google.com" title="Google"&gt;Google&lt;/a&gt;
  10. Put all style information in the CSS file.

Further Reading:

Validation Services