Common HTML Validation Errors

There are a couple of errors that people make in writing their HTML that quite likely will make up the greatest portion of all of the reported errors if the page is run through the W3 validator. In both cases the fix for them is very simple.

Ampersands

A problem with ampersands in your page is indicated by an error message that starts with "cannot generate system identifier for general entity".

There are two characters that always have a special meaning in HTML. These are < and &. The less than symbol indicates the start of an HTML tag while the apmersand indicates the start of an HTML entity code. Just about everyone knows about the less than symbol but many overlook the ampersand.

With both of these characters that have a special meaning it is necessary to substitute the corresponding entity code wheneveryou want to use the character itself in your web page (and this includes when you want to include ampersands inside of HTML tags).

The entity code to use for the less than symbol is &lt; and the one to use for the ampersand is &amp;

So the fix for this particular error is to locate the ampersands that you have used in your page that are not already being used to indicate the start of an entity code and add amp; immediately after each one.

Images Without alt Attributes

Not everyone can see the images in your web page - for example those using a web reader that reads the page out to them and those using a text only browser such as Lynx. For these people you need to provide something else to convey the basic information that the image is intended to convey (and if it is just htere to decorate the page then it ought to be defined in the CSS and not in the HTML).

When you get the validation error "required attribute "ALT" not specified" it means that you have forgotten to supply an alternative source of information for those who can't see the image.

To rectify this particular problem you need to make sure that every single image that forms a part of your HTML contains an alt attribute that contains a short piece of text that conveys equivalent information to the image for those who don't see the image for example: <img src="mydog.jpg" alt="my dog at play in the garden">

Remember that those who don't see the image will be presented with the text from the alt attribute instead and so you should read through your content substituting the alt text at the spot where it occurs into the surrounding text and make sure that it will make sense when the text is presented in place of the image.

In the vast majority of instances where you decide that there is no need for alternative text it will mean that the image is not actually a part of the page content but is instead a part of the page appearance and so should be moved to the CSS. There shgould be very few instances where the image forms a part of the content but doesn't need some text to take its place for those who don't see it. Only where you are certain that the image is a part of the content and definitely doesn't need any alternative text should you specify alt="".

Where your image doesn't already have a title attribute you may also consider adding title="" when you add the mandatory alt attribute. While images are not required to have a title attribute (which specifies the text to display in a tooltio when the mouse hovers over the image) some bowsers incorrectly generate one using the alt text if you don't supply a title attribute and so by supplying an empty one you force those browsers to behave according to the standard.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate