Is validating html code important?

The W3C html and CSS validators are very useful tools. They are easy to use, give clear results and provide lots of information about site errors as well as potential ways to fix them. These code checkers will highlight some basic coding errors such as incorrect attributes and missing opening or closing statements. These errors are easy to make but very hard to find and fix without a tool like the validator. Valid sites are more likely to be future proof, more likely to look good on a range of browsers and devices and should gain some sort of ranking benefit over websites with invalid code. However there is no guarantee that a website that validates will look good in all browsers. Browsers still interpret valid code in different ways and in some circumstances this can have a big effect on how your website looks and behaves. These validation tools are great but there is still no shortcut to manually testing your website on as many different browsers as possible. A second caveat is that valid websites can still load very slowly and be inappropriate for viewing on mobile devices. Website speed is important – slow websites lose viewers and can dramatically increase bounce rates so it’s always a good idea to check your speed performance with a tool like Pingdom. This tool typically highlights huge images that you might have forgotten to resize and widgets from some social media that can be very slow to load. Simply finding a “light” version of the widget can dramatically improve speed, we applied one of these lighter social media plugins on this number plates website.

Wikipedia Validation Errors

Conversely there are lots of websites out there that perform well and look good in a range of devices that do not validate. Not even the Wikipedia home page validates, it has 3 errors and 1 warning. How can this be??? Some of the errors and warnings just don’t matter. Social media, flash and other widgets are notoriously bad at validating even from websites like Facebook. Hundreds of thousands of websites use them without any issues. But how do you know which errors are important and which are not? We are going to use a few case studies from real commercial websites to help you understand how to go about getting the most from these validation tools and to help you decide which errors you can ignore.

The Strategy

There are three main ways of looking at the problems one of which should give you a few quick wins. 1) See which line numbers the errors appear on. You often find loads of errors and warnings with a few lines caused by a single bit or code, script or error cascading. 2) Focus on the errors first and ignore the warnings. Focus on the errors rather than the warnings first. Often there will be some missing opening or closing tags which can cause a cascade of errors. By cascade I mean that a single missing bracket or closing div can create reports of errors for following correctly coded divs. Fix the first missing div and the rest of the code order suddenly makes sense again to the validator; and lots of errors disappear. It can be hard to see where your opening and closing divs are but the tool usefully gives you a line number for the start and end of the phrase it does not understand so you can find the missing or duplicated tag. Click the revalidate button and I bet your error count goes down drastically. 3) Sort the information by type. There can be lots of error or warning titles you don’t understand that require researching. Clicking the “Group error messages by type” option and then clicking revalidate is helpful here. You can easily visualise which error types are most frequent and focus your research effort on them.

Case Study One – Scripts

Beautiful World is a travel guide to the most beautiful locations on the planet. It has an attractive and colourful design with heavy use of images and navigations so that locations can be found by either continent / country or by type of feature e.g. lake, mountain, river etc. The pages load quickly even though they have a large number of reasonably high quality images and it performs equally well in all browsers and all devices including mobiles and tablets. However a quick W3C check reveals the home page has 17 errors and 18 warnings (17+18=35)! We used each of the three strategies to analyse the errors. For this website the line number strategy was most useful. Of the 35 issues; 33 of them all occurred on line 4 of the code! Viewing the page source and looking at line 4 we see that there is a chunk of script code in there (i.e. not html or css). It is quite common to use a bit of code from a third party to add functionality to a flat html website. Typical examples are contact form plugins, image scrollers to highlight different categories of doors, analytics scripts or social media widgets. You are unlikely to understand this code and so fixing it will be very difficult if not impossible. Ideally you would replace this script/widget with one that validates – but this is a very time consuming and technically difficult job. In some cases it is not possible for you to change the code at all. Google analytics code and Facebook widgets are coded by Google and Facebook and if they do not validate there is nothing anyone external can do about it. If the widget works in the browsers and devices that are important to your website but creates lots of validation errors; our advice is don’t worry about it. Don’t waste your time, move on to something more important like a speed test. This is what Beautiful World has done; they know there are errors but they understand how they were created and have been able to determine that the validation issues are not causing a performance problem for them. The important job of delivering lots of fast loading images of beautiful destinations and presenting a well structured navigation is unaffected.

Speed Test

Case Study – Social Media Widgets

Quicksand Flooring are a floor sanding firm based in London. The staff all work on floors at client sites so they don’t have the time or expertise to update their website. Instead they use social media to quickly upload information and images of completed floors or projects mid stain so the before and after look is demonstrated. They use social media widgets on their website to automatically draw information posted to Facebook onto their website homepage. So they use technology they understand and can operate on the go but still have a website that has fresh up to date information and sanding projects on it. The validator is showing 29 errors and 15 warnings – ouch! The sort by error type and line number strategies are both useful here. 31 of the issues are very closely related. When coding html does not want you to type in characters directly – it requires you to use specific clearly defined codes. For example you never type ‘&’ you should instead use ‘&’ or ‘&’. If you forget, or some of your borrowed code has not used html codes, then the validator will list every separate case. In Quicksand Flooring’s case we see lots of instances of errors under each of these headings; “reference to external entity in attribute value”, “general entity X not defined and no default entity”, “required attribute X not specified”, “reference not terminated by REFC delimiter”, ” syntax of attribute value does not conform to declared value”, ” cannot generate system identifier for general entity X”, “reference to entity X for which no system identifier could be generated”. If these errors occurred in your code or text then you would simply look up the right html code and replace the characters. This is a useful reference for the html codes. However using the line number strategy we quickly see that most of the issues are concentrate in lines 119 and 400-450. Scan the code and what do we see on these lines? Facebook, Twitter and Instagram widgets. Quicksand Flooring have a good and very practical social media strategy. Instagram is a great brochure for them to highlight some of the lovely finishes that can be achieved with a floor sand and polish. Facebook lets them demonstrate how many flooring projects they work on each month and when this information is automatically transferred to their website it shows they are an active and specialised business. Twitter is a great tool for them to highlight some of the big names they have restored floors for which gives them a lot of credibility. So they get a great deal from these social media widgets – too much for them to contemplate removing the code simply to get their website to validate.