Why you should validate

Tags:

In writing the year it's almost 2010. HTML should be well known by most developers by now. Despite this; I do still see people ignoring validation errors. As late as today I talked to a developer who found it very odd that invalid mark-up do render different in different browsers. There is nothing odd about that. Each time I am confronted with this topic I always run this simple example to illustrate what is going on.

What browsers do

Most web pages on the web today is served as text/html. Even web pages written in xhtml, which is XML, is faulty served as text/html on most web sites. When browsers get a file served as text/html the browsers does not quite know what its getting. They do not know if the document is valid or not. It's not even sure if the document is a HTML document at all. To deal with this, browsers treat the document as tag soup and it is when parts of the document is read it begins to know what it's dealing with. When errors occur in this tag soup, browsers try to correct the errors and each browser try to correct them in a different way. This does often result in different behavior in different browsers.

The example

Let's start with a simple CSS which set all occurrences of the <p> element to the color red and all occurrences of a <i> element that are descendants of a <p> element to the color green. This is valid CSS. 


<style type="text/css">
    p{color: red;}
    p i{color: green;}
</style>

If we apply the above CSS to this simple, but invalid, HTML we start to get some strange results in different browsers:


<div>
    <i><p>I'm wrong markup, but I should be red</p>
</div>
<div>
    <i><p>I'm wrong markup, but I should be red</p></i>
</div>
<div>
    <i><p>I'm wrong markup, but I should be red</i></p>
</div>
<div>
    <p><i>I'm correct markup and I should be green</i></p>
</div>

Opera (here version 10.10) will display the above combination as this:

Opera displaying invalid html document

Let's take a look in Firefox (here version 3.5.6):

Opera displaying invalid html document

It's clearly something going on here. If we take a look in each browsers representative debugger we can see how each browser have tried to correct the invalid mark-up.

This is how Opera have corrected the mark-up:

Dragonfly displaying the DOM structure of invalid html document

This is how Firefox have corrected the same mark-up:

Firebug displaying the DOM structure of invalid html document

One can clearly see how different each browser try to clean up the tag soup and how it result in different DOM structures which affect our final representation when the CSS is applied. Invalid mark-up end up different in different browsers. Valid mark-up does not. This is one of many reasons why you should make your web pages valid.

Here your can test this example on your own. It will be different in almost all browsers.

23.12.2009 01:56 - Posted by Trygve - Comments: 0 - Technical

Comments:

Post a Comment:

HTML Syntax: NOT allowed