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=”https://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.
- When including javascript on a page it’s <script type=”text/javascript”… and NOT <script language=”Javascript”. See Google’s analysis on the script tag for more detail.
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.
The Markaby template library for Ruby is also a great way to generate valid XHTML. You can even omit whitespace, which helps with some display errors in some browsers.
I can highly recommend the use of the Firefox extension HTML Validator.
It validates HTML on the fly and immediately shows the result in Firefox’s status bar. Also, since it is built upon Dave Raggett’s Tidy utility it provides a great way to tidy up HTML quickly.
http://users.skynet.be/mgueury/mozilla/
Mark, thanks for pointing me to that Firefox HTML Validator plugin! I’ve been using it for the past week and it’s fantastic! What I like is that I can easily validate pages that aren’t publicly accessible on the internet (such as on my localhost). It’s also much more particular than the W3C validator which is also good!
Perhaps you should learn HTML 4 first. Most of your XHTML mistakes aren’t specific to XHTML, but to HTML.
Stefan, that is indeed true but I think there’s more awareness and concern around having validating pages with XHTML than there was with HTML so I think most people will learn to correct these mistakes in the context of XHTML, regardless if they were issues with HTML 4. It’s a good point you raise though!
People don’t care for real XHTML as long as they send it as text/html. The browser isn’t picky enough when you tell him it’s ordinary HTML.
But you can’t use the correct content-type because of the many users of Internet Explorer, who don’t care either.
Old post about Xhtml, but still up to date.. I was searching for this one. Thanks!
I code all my pages in valid XHTML, now i’m used to it I find it easy, it’s just second nature, might forget the odd thing, so I do a quick check and fix up any mistakes.