HTML and CSS Validation: Should You Validate Your Web Page?

If you don't hang around webmaster circles, you may not realise that HTML validation and CSS validation are controversial issues with some people. This article discusses some of the positions taken in these discussions to provide some perspectives on issues that have come increasingly to the fore in web development. Hopefully, the article will also provide a practical method that overworked webmasters can use to improve their website.

Some Background Information: What does Validating HTML or CSS Mean?

For those who are unfamiliar with what validating a web page (ie validating your HTML or CSS code) means, it basically refers to using a program or an online service to check that the web page that you created is free of errors.

In particular, an HTML validator checks to make sure the HTML code on your web page complies with the standards set by the W3 Consortium (the organisation that issues the HTML standards). There are various types of validators - some check only for errors, others also make suggestions about your code, telling you when a certain way of writing things might lead to (say) unexpected results.

The W3 Consortium has its own online validator which you can use for free. It may be found at: http://validator.w3.org/

A CSS validator checks your Cascading Style Sheets in the same manner; basically, most will check them to make sure that they comply with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation).

Again, you can get free validation for your style sheets from the W3 Consortium: http://jigsaw.w3.org/css-validator/

There are numerous other validators around, both free and commercial, focusing on various aspects of ensuring that your code will run trouble-free across browsers and platforms. You can find a list of free ones (including specialised validators like those that check your code for accessibility) from Free HTML Validators, CSS Validators, Accessibility Validators at http://www.thefreecountry.com/webmaster/htmlvalidators.shtml

Note that validating your web page does not ensure that it will appear as you want in various browsers. It merely ensures that your code is without HTML or CSS syntax errors. Ensuring that your code appears correctly in different browsers require cross browser testing. You can read more information about how to do this even if you only have one computer from the article How to Check Your Website with Multiple Browsers on a Single Computer at http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml

Why Validate Your HTML Code?

The proponents of HTML validation (and CSS validation, of course) say that there are a number of reasons why you should validate your code:

1. It Helps Cross-Browser, Cross-Platform and Future Compatibility

   Although you may be able to create a web page that appears to work on your favourite browser (whatever that may be), your page may contain HTML errors (or CSS errors) that do not show up with that browser due to an existing quirk or bug. Another person using a different browser that does not share that particular bug will wind up viewing a page that does not show up correctly. It is also possible that later versions of your browser will fix that bug, and your page will be broken when people use the latest incarnation of the browser.

   Coding your pages so that it is correct without errors will result in pages that are more likely to work across browsers and platforms (ie, different systems). It is also a form of insurance against future versions of browsers, since all browsers aim towards compliance with the existing HTML and CSS standards.

2. Search Engine Visibility

   When there are errors in a web page, browsers typically try to compensate in different ways. Hence some browsers may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors in the page, resulting in certain parts of your web page (or perhaps even the entire page if your error is early in the page) not being indexed.

   The safest way, it is held, is to make sure that your web page validates error-free. That way, there is no dispute about which part of your page should be scanned for keywords and the like.

3. Professionalism

   Even if you test your web site with all the various browsers in existence on all the platforms in use (Mac, Linux, Windows, FreeBSD, etc) and find that it works perfectly in all, errors in your site reflect poorly on your skill as a web developer.

   The issue is two-fold: firstly, a poorly coded web page reveals that either the web designer does not know his stuff or is a sloppy worker; secondly, it affects his marketability.

Why Not Validate?

Those who are against a blanket rule about validation often cite the following reasons:

1. Validation is No Guarantee that Page Works

   Even if you validate your code, you still have to test it in the various browsers. Having code with no syntax errors does not mean that the HTML or CSS code does what you want. Hence some of the proponents of this view argue that the main goal when designing a web page is to make sure it is viewable and usable by your visitors, not some esoteric goal of standards compliance.

2. Time Constraint for Conversion

   In an ideal world, you want all your pages to be usable and error free. In the real world however, many web designers with thousands of existing pages will be hard-pressed to find time to convert all those pages so that they validate correctly. Since these pages are already doing well on the web, both with existing browsers and search engines, time is better spent doing work that is actually productive.

3. The Average Visitor Does Not Check Your Source Code

   Against the argument about professionalism is the counter-argument that the average visitor to your site is not likely to go around your site viewing the source code to your pages in an effort to locate HTML or CSS errors. To the visitor, how the page appears in his/her browser is the true test of the web designer's skill.

One Possible Solution

Like some web designers, I started designing web sites long before I realized that there were tools that could validate my pages for correctness. By the time I started validating and correcting my pages, I already had hundreds of existing pages that I needed to correct, including pages on thesitewizard.com and thefreecountry.com.

My concerns were primarily cross-browser and cross-platform compatibility as well as search engine indexability. I didn't want an error on my pages that I might miss seeing with my browser but that creeps up in other browsers, systems or the search engines. However, the problem was that converting hundreds of pages is not exactly my idea of a pleasant day's work.

I decided to take the approach I saw on a website. If I remember correctly, I think it was the W3 Consortium's own website that mentioned this method. At that time, they had a notice stating that they knew that not all their pages complied with the standards. However, all new pages they created will validate correctly, as will any old pages that they updated.

I realise that this is not the "ideal" that some webmasters argue for; but it is a practical solution for a web designer with many existing pages. If you are in the same boat, with too many existing pages to contemplate revamping everything, you might want to consider taking this route. It may not salve your pride (ie, the craftsman's pride at producing a perfect work), but at least it will help you cope with the workload.

How Often Should I Validate?

Some people validate every time they make a modification to their pages on the grounds that careless mistakes can occur any time. Others validate only when they make a major design change.

I always validate the template for my pages when I make a major design change. I try to validate my pages each time I make modifications, although I must admit that I sometimes forget to do so (with the occasional disastrous consequence; Murphy's Law doesn't spare webmasters).

I find that having an offline validator helps to make sure that I remember to validate: having to go online just to validate my pages tends to make me put off validation till later, with the result that it'll occasionally get overlooked. For those not familiar with the terminology I use, when I say "offline validator" I simply mean a validator that I can download and install in my own computer so that I can run it on my pages without having to go to the W3 Consortium's website. You can find offline validators on the free validators page I mentioned earlier, that is, http://www.thefreecountry.com/webmaster/htmlvalidators.shtml

The HTML Tidy validator (listed on that page) is available for numerous platforms (including Linux, Mac, Windows, etc) and has proven helpful to many webmasters the world over.

Conclusion

Validating your HTML and CSS code for standards compliance has certain benefits: it protects your pages from problems arising from syntax errors in your code due to different ways of interpreting errors by the search engines and other browsers. If, however, you have a large number of existing pages that have not been validated and corrected, but nonetheless work well in search engines and other browsers, you might need to consider some sort of strategy (such as the one I used) to prevent webmaster-overload.

Copyright 2003-2004 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

This article can be found at http://www.thesitewizard.com/webdesign/htmlvalidation.shtml

# posted by Abdul Mannan @ 10:50 PM 0 comments

Appearance, Usability and Search Engine Visibility in Web Design

I was recently asked by a visitor to thesitewizard.com to take a look at her company's website, designed by a university student. I will not give the URL for that site, partly to protect the innocent, and partly because by the time you read this, it'll probably have been modified.

The site was heavy in its use of graphics with images adorning most parts of the page layout, to provide curved borders (to replace the sharp corners in enclosing boxes), different background images for different parts of the page, etc. It had a top navigation bar, driven entirely using JavaScript. The navigation bar mimicked the sort of menu bar you find in computer programs - there is a horizontal menu bar with different items listed. When you move your mouse over one of those items, the menu will automatically expand vertically. As you move the mouse cursor down the pop-up menu, the item beneath the pointer is highlighted. Click it, and you will be delivered to another page on the site.

In general, that site is typical of the kind of sites produced by newcomers to web design. It scores well in terms of prettiness and gadgetry (although only under one browser, it doesn't work well under other browsers), but fares dismally in terms of usability and search engine readiness. In fact, the reason my visitor wrote to me was because the website suffered a significant drop in the number of visitors after it was redesigned in its current form.

This article uses that site as a starting point for discussing some of the issues that a web designer needs to consider when creating a website that must exist and compete in the real world (as opposed to a site that is created merely to fulfill the course requirements of a school or university).

1. Appearance is Not the Most Important Issue

Over the years that I have dealt with newcomers to web design, it is my observation that they tend to focus excessively (and sometimes almost exclusively) on the appearance of a website. The site I mentioned earlier is a case in point: the designer tried hard to make the site look beautiful (and, if I may add, succeeded too - the site does indeed look pretty). However, as hard as it may be to believe (if you are a newcomer), appearance isn't the most important thing to look at when you are planning and creating your site.

Don't get me wrong here. I'm not saying that appearance is of no importance. Far from it. However, in this article, my intention is to address the excessive importance newcomers place on beauty. In fact, if you belong to the other extreme, discounting the value of the appearance of a website altogether, you might want to read my discussion of Two Common Web Design Myths at http://www.thesitewizard.com/archive/myths.shtml

Having said that, your site can still survive (or even thrive) if it is a plain-looking site like Google. This is not necessarily the case if you overlook the other important issues in web design.

2. Usability is Important for You to Achieve Your Purpose

All sites are created for a particular purpose. Some were created so that their owners can sell something. Others are information resources (like thesitewizard.com). Still others are designed to showcase their owner's talents (such as sites displaying the owner's resumes and portfolios).

The usability of your site is important to help you achieve that purpose. The basic question that you need to address when dealing with usability is: can your visitors easily access the information they need so that they can do the stuff that you want them to do? There are quite a number of things involved in this question.

1. Information Availability

   Is the information that your visitors need to make informed decisions available on your site? For example, before they can buy a product, they will want to know more about that product. A brief one-line summary about your product's features may work for your main page, but you will probably find that you get more buyers if you can provide a link to a page that gives a detailed list of features of each of your products.

2. Information Accessibility

   Not only must your information be available to your visitors, it must be easily accessible. A page that gives a detailed description of your products is not going to help your visitors if they have to work hard at finding it. In fact, my experience is that if visitors have to work at finding something on your site, they are not going to find it. Either put the information right under their noses, or put a link to it in that place.

3. Navigation

   A good navigational system for your website is crucial. A navigational system is one by which visitors can move from one page to another. For example, on thesitewizard.com, one way in you can access the main pages on the site is to use the navigation buttons on the left column of the page.

   There are a few features to a good navigational system:

   1. If you are using a navigation bar or panel, standardize its location on all the pages of your website. Don't make your visitors feel as though they are embarking on a treasure hunt every time they reach a new page.

   2. In addition to your navigation bar or panel, provide short-cuts to places where visitors are likely to want to go. Don't force your visitors to have to go through your main page (or your site map) every time they need to visit another page on your site. In fact, put direct links in logical places - for example, on your "Products" page, you should have a links to your "Buy / Order" page as well as links to the pages with detailed information about individual products. Think like a visitor and ask yourself what are the things a visitor might want to know or do when he/she is at a particular page.

   3. A good navigation system must be usable by all your visitors. As a result, try to avoid things that are dependent on certain facilities or features being available. For example, don't make your menu dependent on a specific browser. If your menu is JavaScript-driven, make sure that you have an alternative facility available for people who do not have JavaScript enabled.

   4. If your site has a large number of pages, a site search engine will improve your site's usability. Not everyone mentally organises information the way you do. Hence a logical arrangement to you may not be logical to another person. Giving your visitors a way to search your web site will help them locate what they want. I discuss the use of a search engine for your site in my article How to Put a Search Engine On Your Site at http://www.thesitewizard.com/archive/searchengine.shtml

   5. It's always good to have a Site Map, unless your site has only a few pages. This allows people to have another route to the other pages on your site. It also helps search engines locate all the pages on your site, particularly if you use dynamically-generated links to your pages (like JavaScript-created links).

3. Search Engine Visibility is Your Site's Lifeline

As I mentioned earlier, the problem that my visitor faced when her site was redesigned was that it no longer appeared in search engine results even when relevant terms were used for searches.

The problem in her case was that her site relied exclusively on a JavaScript navigation menu. Apart from the links generated by the JavaScript menu, there were absolutely no other links on her site pointing to other pages within the site. Since search engines bots can't interpret JavaScript (at least not at this time, to my knowledge), they could not follow any links and could thus only index her main page. As a result, her pages were not listed in searches for her keywords (since only the main page was indexed), leading to a drastic drop in visitors.

This is a problem fairly easily fixed (for example, one way is to create a site map and add a normal link to it from the main page), but it illustrates one of the most important issues a real-world website faces: search engine visibility. If your site is not listed in the search engines, you're not going to be able to get many visitors, if at all. Without visitors, you're obviously not going to be able to achieve your purpose for the site.

Designing a site that is search engine ready is a lengthy topic, so I am not even going to try to address it here. If you are interested to know more, you can find some general principles for making your site search engine ready by perusing the articles listed on: http://www.thesitewizard.com/sitepromotion/index.shtml

Conclusion

This article is about the importance of factoring usability and search engine readiness into your web design. Usability is important because it improves the chances that your site will help you accomplish your purpose. Search engine visibility is crucial because without it, you will get few visitors. Plan with these two aspects in mind, even as you look into the appearance of your site, and your design will go far in helping you achieve the goals for your site.

Copyright 2004 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

This article can be found at http://www.thesitewizard.com/webdesign/usabilitysearchengine.shtml

# posted by Abdul Mannan @ 10:43 PM 0 comments

Security Flaw Discovered in GPG
"A serious problem in the use of GPG to verify digital signatures has been discovered, which also affects the use of gpg in email. It is possible for an attacker to take any signed message and inject extra arbitrary data without affecting the signed status of the message. Depending on how gpg is invoked, it may be possible to output just faked data as several variants of this attack have been discovered. All versions of gnupg prior to 1.4.2.2 are affected, and it is thus recommended to update GnuPG as soon as possible to version 1.4.2.2."

# posted by Abdul Mannan @ 11:34 PM 0 comments

"Washingtonpost.com's Security Fix blog has an interesting post profiling the activities of a kid named Witlog who controls a botnet of roughly 30,000 hacked Windows PCs. Even after the authorities manage to shut down the network Witlog uses to control his bots, he pops up somewhere else. From the article: 'Witlog may in fact be the product of a new generation of script kiddiez; the chief distinguishing feature of this generation being that instead of using Web site flaws to deface as many Web sites as possible, these guys are breaking into thousands of home and work PCs and taking them for a virtual joyride, often times all the way to the bank.'"

# posted by Abdul Mannan @ 11:30 PM 0 comments

Can Open Source Outdo the IPod?

# posted by Abdul Mannan @ 9:52 PM 0 comments

5% of All Web Traffic Unsafe

# posted by Abdul Mannan @ 10:23 PM 0 comments