Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

quick tutorials

Validation: css and html

If your HTML is not valid, or you use syntax in your CSS which is not correct, then you have a much greater chance that your style sheet based web pages won't work. This final section looks at the process of validating and checking our HTML and CSS code.

Validating HTML

Why validate?

Browsers which support style sheets are very choosey about HTML. Minor problems with your HTML which might "work" by themselves, can cause all sorts of dilemmas when style sheets are applied. This is why we need to move beyond "it looks fine in IE and Netscape on my computer" testing of our pages. To ensure your HTML is correct, it needs to be validated.

Some HTML editing tools like HomeSite have validators built in. There are also a couple of very good ones online, from HTML Help and the World Wide Web Consortium (W3C). You can also find downloadable validators that run on your own computer.

What is validating?

Validators ensure that your HTML conforms to one of the World Wide Web Consortium recommendations for HTML. Validating is a good habit to get into as it ensures that your pages work on browsers other than those you have "tested" it on, especially those which will come in future, and which may not maintain bugs and general leniency to imperfect HTML which current browsers tend to have.

In short, the latest HTML recommendation from the W3C is HTML 4.0. This version of HTML has three flavors, strict, transitional (or loose) and frameset. The strict variant excludes all presentational markup (such as <font> elements), while transitional includes these elements. Frameset includes support for frames.

When validating your pages, you decide which variant (or "document type definition" - DTD) you want to validate against. Which one should you choose? Here is what the W3C has to say, as part of the definition for HTML 4.0 strict.

Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

I'd recommend you always try for strict validation. Then you'll be ready for future versions of HTML.

So how do I do this?

Depending on the validator you use the approach is slightly different, but close enough that by discussing one, you should get the whole picture.

Firstly, you need a way of telling the validator which DTD you are validating against. You do this by adding a link above all the HTML of your document (including the opening html tag) like this

for Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

for Loose

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

for Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

You use the strict DTD if your page contains no presentational markup, and the frameset DTD if your pages have frames, otherwise use the loose DTD. Note that these are case sensitive.

Now the page is ready to be validated. There are two important online validators, as well as validators built into applications, or which run as standalone applications.

Online validators

HTML Help has an online HTML validator which you can paste your HTML into, or with which you can validate your current sites by giving it their URLs.

The World Wide Web Consortium has an online HTML validator. You can check either a page already online, or upload a page for checking.

Both of these return a list of problems with the page which itemize difficulties line by line. At first this feedback can appear a little daunting, but it isn't rocket science.

Stand-alone validators

For a list of downloadable validators that you can run on your own computer, see TUCOWS, which has sections for Macintosh and Windows validators.

Validate your style sheets

Just as it is important to ensure that your HTML is valid, it's also important to ensure that your style sheet is correct. It is common on the style sheets newsgroup to see news items bemoaning a bug in one browser, when the cause is in fact incorrect style sheet syntax that another browser is lenient towards. Beware that Internet Explorer can be very lenient toward invalid style sheets. If you usually "test" your web pages with Internet Explorer for Windows, you might get some surprises when you view the page in another browser which supports CSS.

The most common example is leaving units off values. For example the following rule is invalid CSS. Browsers should ignore it.

h1 {margin-left: 12}

Westciv Self Paced Courses

Learning standards based web development using HTML 4, XHTML and CSS is easy and flexible with our series of hands on, self paced courses.

This specifies that the left margin for <h1> elements should be 12. But 12 what? It isn't specified, and so, this is invalid CSS, and should be simply ignored by browsers. Netscape Navigator 4 does so, but Internet Explorer 4 and 5 for Windows happily treats this as 12 pixels. Often developers consider that Navigator is buggy (because the style sheet "doesn't work") when in fact it is behaving correctly in ignoring the rule. Internet Explorer "works" but is buggy.

Short of knowing the specification backwards (I don't, and I would suggest very few people on earth do) how can we ensure that out style sheets are valid? Check their syntax. There are two good checkers that will help you ensure that your style sheet is valid, and will even warn you about possible problems.

You can validate your style sheets using an online validator from the World Wide Web Consortium.

HTML Help also provides an online CSS validator. In addition to validating your CSS, it also warns of possible usability problems with your style sheets.

Using each of these is as simple as pasting the CSS code or the URL of the style sheet into a field. So go ahead, what are you waiting for?

Web Directions Conference
Style Master CSS Editor