Jump to main content.

Some differences between XHTML 1.0 Strict and HTML 4.01 Transitional

A recent trend in web development is a shift towards XML. XML is a markup language that allows you to create your own customized tags enabling the definition, transmission, validation, and interpretation of data between applications and between organizations. Out of this transition was born the programming standard XHTML. XHMTL, short for Extensible Hypertext Markup Language, is a hybrid of HTML and XML.

Writing XHTML isn't difficult. The hardest part is breaking a few old habits. One very important thing to remember when writing XHTML: use the right tag to properly mark-up your code. For instance, if it's a paragraph, surround the text with paragraph tags. Don't just drop it on the page and put two break elements after it.

The following tips will help you make sure that your HTML code complies to XHTML recommendations.

  1. (If you're using Dreamweaver 8:) Set up Dreamweaver to code with XHTML 1.0 Strict. Edit the following settings.
    • Edit > Preferences > New Document. Find the field labeled Default Document Type (DTD) and select XHTML 1.0 Strict.
    • Edit > Preferences > Validator. Select the XHTML 1.0 Strict checkbox.
    • Edit > Preferences > General > Use <strong> and <em> in place of <b> and <i>
  2. All elements (tags) and attribute names must be in lowercase.
    • <blockquote cite="http://www.americanrhetoric.com/speeches/Ihaveadream.htm"><p>And so even though we face the difficulties of today and tomorrow, I still have a dream.</p></blockquote>
    • The element is blockquote, with a start tag and an end tag in lowercase.
  3. All attributes names must have values, and those values must be quoted.
    • <a href="xyz.html" title="Link to xyz document">
    • a is the element, with href and title attributes. All in lowercase and quoted.
  4. All elements must be closed.
    • Examples: <li>some text here</li> or <p>some text here</p>
  5. The start tag for empty elements must end with />.
    • Examples: <br /> or <hr />.
    • <img src="flower.gif" alt="flower" />
  6. Properly nest all of your code:
    • Example: <p><b>This is correct</b></p>
    • Example: <b><p>This is INCORRECT</b></p>
  7. No double dashes within a comment tag.
    • Example: <!-- This is correct - and proper -->
    • Example: <!-- This is INCORRECT -- and may cause problems-->
  8. Encode all ampersand (&) and less-than (<) signs with &#38; or &#60;. Code for other common HTML entities are easily found Exit EPA Disclaimer.
    • When using a character or numeric entity, be sure to close it with a semicolon.
  9. Use the hexadecimal code when listing colors, not color names (such as "red"), because some browsers will not recognize the letters.
  10. For links in the same page, use id, rather than name.
    • Link to another part of the page: <a href="#section2">Section 2</a>
    • Where the link should point: <h2 id="section2">Section 2</h2>
    • Note that you can use id within any element to uniquely identify it. Once an element has that unique identifier, you can point to it with an anchor link. See the markup for the "Top of Page" link for another example.
  11. Validate! Use the W3C validator Exit EPA Disclaimer. Validation is an excellent way to find errors in your markup.

Additional guidance for writing good mark-up.

Top of Page

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.