Getting your website’s XHTML and CSS right ensures that your site will function properly for all your users. As web browsers change and (hopefully) become more standards-compliant, it becomes even more important to have good markup on your pages, lest you face a headache trying to fix it later when your site no longer works with the latest Firefox. Sloppy code may cause your site to take forever to draw a page, look bad in a particular web browser, and may turn off potential surfers, or even worse, advertisers.
XHTML comes in three flavors that we are concerned with:
XHTML 1.1 appears to be deprecated, so ignore the fact that it looks like the logical path to follow. XHTML 1.0 Transitional is more forgiving, allowing users to include some traditional styling markup and still validate. XHTML 1.0 Strict is what I strive for, but it is unforgiving and requires more effort on your part to achieve validation.
I have found that there are 4 Major Hiccups that cause most websites to not validate. Fortunately none of them are difficult to fix.
- Use of align on XHTML 1.0 Strict web pages
align is deprecated. Transitional XHTML will let you get away with using it, Strict XHTML will not. Instead of using align, we have two CSS alternatives we can implement:
- float
- text-align
For aligning an object left or right, we can inject CSS float to replace it and achieve validation. Instead of img src align=”right”, we can use img src style=”float: right;”.
float has no ‘center’ property, so to center align an object instead of img src align=”center”, we can use img src style=”text-align: center;”. Styling info can also be wrapped in a div, so if you’re using div instead of p for paragraphs (you should be), keep that in mind.
- You missed a trailing slash somewhere.
- Your crappy plugins are poorly coded and are breaking your site.
- Your ads are declaring a language variable.
You forgot to close something with a trailing slash. This is easy enough to fix, just find it and insert the / where needed.
More than half the plugins out there are poorly coded. Sure they work, but they have bad markup, or worse, create duplicate pages of your content (polls are notorious for this), and now Google hates you.
It’s easy enough to figure out if a plugin is breaking your site’s validation. If one is, see if there is another plugin with the same functionality that validates. If not, sometimes you can fix someone else’s bad markup and find the problem in the plugin’s .php flatfile and hand edit it to use proper markup. Obviously this fix is not for everyone, but again, if you have a site you should be absorbing some XHTML and CSS know-how. It’s not rocket science.
Big cause of XHTML errors. Javascript declarations used to include a language=”javascript’ variable. It’s deprecated. All you need to do is change your script calls to include a type=”text/javascript” and do away with that language declaration.
W3C’s validation page is the place to check your site’s XHTML validation, and at the bottom of that page they also have links to their CSS and RSS validation pages. You can check the verbose output and show source buttons, and identifying your problems and figuring out the fixes will be a snap.
If you can get your site to validate XHTML 1.0 Transitional, you may not be too far off from getting it to validate XHTML 1.0 Strict. XHTML 1.0 Strict is the path toward where W3C is going with XHTML, so you’re that much closer to having your site ready for the next standard. Plus, it’s harder to get your site to validate Strict, so there are bragging rights involved.
Take the time to check your site in more than just your favorite web browser. There are 4 major web browser engines in use at this time. Download an example of each and run your site through them all to make sure that your pages are displaying properly. Firefox and IE are the two major players, but both Opera and Safari boast enough users for you to care about their experience.
- List of Mozilla-based web browsers:
- Mozilla
- Firefox
- Netscape
- Flock
- Camino (Mac)
- Galeon (Gnome)
For what it’s worth, I’m a Mac user at home. My personal preference is Camino. OmniWeb, which is based on Safari, but with nicer features and interface, is also excellent. Those of you using Xwindows can take your pick between Firefox, Galeon and Konqueror. As far as I’m concerned, the only game in town for Windows users is Firefox.
If no one cares about standards we end up with a sub-standard web. Case in point, Microsoft’s Internet Explorer, a standards non-compliant web browser that breaks half the sites it displays, because once again, instead of sticking to established standards, Microsoft thought they knew what was best for all of us and made up their own rules when making IE. What a mess. If you’re using it, please go download a real web browser.
The prevalent attitude is that if it works in IE and Firefox, who cares about validation? ESPN’s front page has 1378 XHTML errors, and they are not alone. That’s a lot of work for those webmasters if they need to fix those sites to work in the new version of Mozilla, and it’s just plain sloppy.
There are a lot of broken websites out there. Don’t let yours be one of them.
