Fixing site validation
I have reason to rejoice, now that my site validates. After sleeping over the issue for so long, I have finally managed to fix those errors. Whew! A few insights, if you will.
There are only three kinds of things that break your site validation:
- Theme (Home-grown or a downloaded one; I guess this is obvious.)
- Plugins (Yes they do, especially if they embed things in your content unsanitized, raw.)
- Widgets and code snippets (Flickr badge, Advertisements, Links, Trackers, et al. — These, without a doubt, if you’re not careful.)
So usually, it is not you (the editor), who is at fault, for all those validation problems — assuming you use Wordpress1. The error that dogged me is interesting enough to write this post, and it is something I had never come across before.
When you design your site with [X]HTML elements, you’ll ensure closing those elements that need to be closed. And I did. I closed all my divisions (div), my self-closable tags (meta, links, etc), everything. And it still gave me errors. How, why, what the..?
Well, it had something to do with an if statement.
You see, an if statement has two boolean results. When you close elements for an individual result and you keep the other open, you introduce a systematic error. Aha! Let me demonstrate it here. If you see the following code, nothing looks out of the ordinary. You’ve got your elements closing nicely.
if (some-expression-here) { (like the loop code)
<div class="post">
(result one); }
else: { (result two); }
</div>
endif;
Now look closer (and this is the one that validates).
if (some-expression-here) { (like the loop code)
<div class="post">
(result one); }
</div>
else: { (result two); }
</div>
endif;
When you’re wearing a designer’s hat, you would only equate open elements to closed ones. But when you put on a programmer’s hat on top of it, you’ll realize that the blind equation isn’t good enough for validation. Because in this case, if the first statement is true, the first result gets executed and you’ll notice that it’s not closed.
But then, that’s not good programming either, right? Programming also needs to — sometimes — follow a designer’s convention, for simplicity, especially if they’re coded by two different people. Like for example, move the opening div to the top line and the closing one to the bottom. This would then follow the rule of equal number of opening vs. closing elements.
The ideal one would be the following. (Though this doesn’t always happen, especially if you’re not too careful, and if you have too many elements or divisions — each assigned to do something very specific — via the if statement, for example.)
<div class="post">
if (some-expression-here) { (like the loop code)
(result one); }
else: { (result two); }
endif;
</div>
The other obvious ones that introduce validation errors are those code snippets that you add in the raw theme files without sanitizing the non-compliant characters first. Ampersand is the most common one. You’ll need to convert it into its HTML equivalent when you hard-code in raw theme files.
So the footer tagline — “Valid XHTML and CSS” — on this site returns2.
- Because Wordpress auto-santizes non-compliant characters within your story that would otherwise give you validation errors. [←]
- I have mixed results for 508 compliance though, and it is still proving to be a elusively silly one, thanks to a silly search form I have. [←]