The Horrors of HTML Validation

If you’re a fellow web designer, at one point or another you have probably experienced the horrors of HTML validation. Sure, it can be a wonderful thing; when the W3C lights up green it can make your whole day. But what about those times when you see lists of errors that were not simply mistakes or typos and there’s something else getting in the way of your validation? In this case, I’m primarily referring to HTML5 validation since it’s still in development and more and more pieces of code that were valid in the past are becoming deprecated.

Most often, this problem occurs when using other peoples’ code. If you’re writing something yourself, it’s usually an easy fix or an easy Google search to find a way around it. But if you’re installing third party WordPress plugins or using code developed by someone else, it can be a bit of a nightmare to find and solve those pesky errors.

At some point, you may be faced with the horrible choice: remove the code (which may be an awesome website feature!) to validate your website, or keep the feature and have a website that does not validate completely. So which do you choose?

What is your error?

First, let’s consider what your error is. The important thing is to not get lazy! If it’s a simple matter of not including alt tags or self-closing tags, just fix them! It’s best practice and a good habit to get into.

Find a workaround!

Before making your choice, try to find a workaround. Scour the internet for solutions (hello, Google!). Can’t find one? Maybe you should try experimenting and recoding the feature on your own. If it’s a WordPress plugin that will likely involve digging into the source code. It’s scary, I know. Finding your way through someone else’s code can be like trying to hack your way through an impossibly dense forest. Never mind trying to determine what’s what – how the heck do you even move forward???

If that fails, bat your eyelashes and ask your computer science boyfriend to do it for you. Don’t have one? Out of options? Getting ready to pull out your hair and rage quit? It’s time to make the choice.

What’s your message?

First, we have to consider the message you’re trying to send to your website viewers. Who are you appealing to? Are you a hobbyist or a casual blogger just trying to create your own corner in the internet? Or maybe you own a business unrelated to web design and development. In that case, as long as your errors do not affect the design or functionality of your site, and the feature will add to the appeal or usability of your site, I would recommend letting it be. If you’re not trying to tell the world that you’re a great web designer and you have another motive for having a website, do not let validation prevent you from using a great feature that can enhance the functionality of your site.

However, if you are a web designer or developer, I would put validation above everything. As someone in the web industry, the purpose of your website is to attract new clients for web design/development. Having a website that validates will make you look more professional and credible in the web industry. Furthermore, I would expect web developers to spend more time finding a solution than anyone else. They’re more capable and it is a great learning experience.

The truth is, solutions are out there if you look hard enough. If you put the time and effort into finding solutions to your validation errors, you’ll have that much more of a reason to be proud of your validated site.

What about CSS3?

Do not bother trying to get your CSS3 to validate. Sure you can use the validator to check for legitimate mistakes, but for most CSS3 we have to resort to browser hacks such as:

-moz-border-radius:10px; //Browser hack for Mozilla Firefox
-webkit-border-radius:10px; //Browser hack for Safari and Chrome
border-radius:10px; //The only one that will validate

These browser hacks will not validate. But if you exclude them, you’re limiting yourself and not making your site appear the same across all browsers. Don’t give up the latest and greatest CSS3 design techniques for the sake of 100% valid CSS.

Solutions to validation errors!

Next time… see some HTML5 validation errors that I have come across and the solutions that I found!