When I first started writing XHTML pages about a year ago I thought that all there was to it was closing every tag XML style. Oh how wrong I was! I’ve since learned to W3C validate as I go so I don’t dig myself into too much of a hole. If you want to see some really nicely written XHTML you have no further to look than the great work done by the folks who wrote WordPress, for example try validating this page or doing a view source and enjoy the clean XHTML goodness of properly used headings, lists, and paragraphs with most of the images and styling off in CSS and nary a table to be found.
Here are the most common mistakes I made while learning and the ones I’ve observed others make:
- Use the ampersand entity reference & everywhere instead of &. It’s really easy to forget to do this inside of href’s where you now need to use it to separate request parameters. For example this is a correct XHTML link: <a href=”http://gabrito.com?param1=foo&param2=bar”>My blog & links</a>
- Lowercase, lowercase, lowercase… remember that it’s <p>, NOT <P> and that applies to all XHTML tags
- Include alt tags on every single img tag! Even better, use stylesheets to apply images and get rid of those mostly unnecessary img tags.
- Your XHTML must be well formed XML which means proper nesting of tags. At work we use JSPX which verifies this for you but with most other templating languages like Ruby’s RHTML and Perl’s FastTemplate it’s up to you to properly nest tags.
Above all, the single most important thing you can do to successfully write validating XHTML is to validate as you build the page, not once the entire page is written!
Update: per Mark McLaren’s suggestion I’ve begun using the Firefox HTML Tidy plugin which is even more strict than the W3C validator and has taught me a lot about block elements versus nested elements.