Tuesday, April 22, 2008

XHTML

Dorian: Never really looked at XHTML before. All I know was you had to close your tags. I learned a little more today.

All tags have to be lower case e.g. <img .. instead of <IMG.

I had to convert some HTML 4.01 markup to XHTML 1.0. Here is what I did.

I used http://validator.w3.org/ to check my code. It will take a URL, a file upload or you can cut and paste your source in. I just cut and pasted my source as the site wasn’t public and it was derived markup from ASP.Net 3.5.

At first seeing 50 errors was daunting but it wasn’t hard to trim down to perfection.

The bulk of the issues it found were unclosed <br> tags which should be <br/> and unclosed <img …> tags. Every upper case <IMG> tag generated lots of errors because it also complained about each attribute because upper case IMG is an unknown tag. Making the <IMG> tags lower case stripped off heaps of errors.

The other big error count creator is no quotes on attributes. E.g. <table cellspacing=0> instead of <table cellspacing=”0”>

The one that took me a little more time to absorb was the markup like this:

<div>

<span>

<div>

</div>

<div>

</div>

</span>

</div>

The inner divs are invalid. You can’t have a div in a span in XHTML. The probably was the inner divs needed to be full width blocks. The span was automatically generated by a standard ASP.Net control. The way to solve it was this:

<div>

<span>

<span style=”display:block;”>

</span>

<span style=”display:block;”>

</span>

</span>

</div>

Of course I used CSS rather than doing a ugly style attribute hack.

So that was my 10 mins self learning intro into HTML to XHTML conversion. Interestingly while it seems popular Thinking that XHTML is the better way to go for future proofing HTML 5 which is still in draft has support for both nice XML tagging and old style HTML using different doc types. They probably don’t want to break the world.

One thing I’m yet to solve is that this is invalid.

<a href=”http://somewhere” disabled=”disabled”>something</a>

There appears to be no way to disable a link from being clicked without javascript. ASP.Net generates this markup. The only work around it to render the disabled links as labels.

No comments: