FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Image
TJ Baker
Joomla! Expert
Published on 24 March 2009

XHTML Validation

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

Validating a Website's HTML

One of the first things that should be done after a site is constructed, and repeated at various steps as things are changed/updated, is the validation of the site's HTML. In the case of a Joomla powered site, HTML errors can come from 4 places:

  1. Templates
  2. Components
  3. Modules
  4. Articles

Why Validate?

It's simple really; HTML errors can present unwanted issues with your site, and is the leading cause of issues with template display that we see. These issues present themselves even more so when a 'pure CSS' template is in use, as CSS is unforgiving of left out closing brackets (>) and other often overlooked HTML errors that are introduced by extensions or other invalid code inserted in articles. While extension code is not the ONLY vehicle by which invalid code can make its way into a site, it has become one of the leading cause of issues that we have seen.

How to Validate?

The World Wide Web Consortium (W3C) has provided a handy tool to run your site's HTML output against the standards for validation which may be accessed at http://validator.w3.org

Testing your site's validation is as simple as putting your site's URL in the Address field and clicking 'Check':

W3C Validation Service

After the service runs you'll be presented with a 'results' page. If the site is free of HTML errors you will see a message of congratulations and some nice buttons you can proudly display on your site if you wish:

Successful Validation

If there are errors, you will be presented with a results page that outlines the errors:

Errors in HTML

Error Outlined

What to do With This Information

Seek and Destroy! Or better put, find and fix the errors.

The 'Validation Output' that is presented will show all of the errors that are found, although using the info with a Joomla powered site may not be as simple as if we were validating a static HTML site.  This is because in Joomla there really are no 'pages' except for the one that is presented to the viewer at the time of viewing.  The Joomla 'page' is a collection of output items from the database, presented and laid out within the confines of the template.  The Validation Services runs the presented 'page' against the standards and outlines the errors on the presented 'page', but in our instance the items on our 'page' could come from any number of sources.  For instance, if you have a website that has a calendar component, a commenting component and a component to manage your advertisements you not only have the default Joomla output in the form of articles on a 'page', you also have the output that is coming from three other sources -- any of which could present an error or multiple errors.  The validation service does not point out which is the offending source of output, only the errors and on which line they appear.

Seeking out the reported errors can be a very time consuming process, however, there are some steps that you can do to help with your process.

The first thing I do when checking for the source of a site's errors is to 'rule out' possible sources.  As I know in the case of a site with a Joomlashack template that the template is not the cause, I check that one off. I would next go to the code I inserted in articles and rule them out by unpublishing ALL articles and checking the validation.  If the errors are gone, publish one article at a time until the offending code is found.  If errors still persist after articles are ruled out, I next go to components as a possible source.  One quick way to check components is to use a bit of code at the end of your site's URL that will remove the template and show the output of the site presented only as the output from the components in use.  To do this, add the following at the end of your URL: /?tmpl=component So for example, if we wished to check the Joomlashack site's HTML with only the output of components in use we would put this in the Validation Service: http://www.joomlashack.com/?tmpl=component  If that fails validation we know the offending code is coming from a component.  If it's a simple site and does not have too many components in use or is a site still under development, I would recommend uninstalling ALL user installed component, reinstalling one at a time while checking the validation after each component is reinstalled.  Doing this should help you pinpoint the offending code.

In the case of already developed sites or sites with large amounts of components installed the process above might not be possible, in which case it may be necessary to hire a professional to help you seek out the offending code.  You may also wish to seek assistance in the Joomlashack Community Forum

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

published in Joomla Tutorials

RECENT POSTS