Posted by: Timo Breumelhof
Saturday, August 02, 2008 

As Cathal posted before, a lot has been done to get core DNN XHTML (transitional) compliant.
For now we focussed on the public side of DNN, the next step will be to get the admin side XHTML compliant too.
I noticed that with the corrections on the public side, the admin side has become much more compliant already

Why XHTML
Here's why I think XHTML is important for DNN

1. XHTML pages are a good step towards more accessible pages (the alt attribute for "img" tags is mandatory for instance)
2. That's why in a lot of countries government / public service websites must be XHTML compliant.
3. XHTML is cleaner, content and style are (in general) better separated.
4. The XHTML doctype makes skinning a lot easier since it avoids some important IE style bugs.
(don't worry there are plenty left even with an XHTML doctype ;-)
5. If the core is XHTML compliant this makes it easier to "debug" (ascx) skins. A lot of cross browser problems are caused by HTML errors.
Finding a HTML error in the skin is easy if your HTML validator shows 2 errors instead of a 55 + 2
6. XHTML is the future, HTML 4 transitional is history (just like classic ASP ;-)

Modules and XHTML
We started testing the modules for XHTML compliance  in December 2007, as part of the release process (for now only the public side). We did not fail any modules though, if they where not XHTML compliant.
This will change from now on. Modules that enter the release tracker have to be XHTML compliant to pass (except for minor bug fixes).
I think this is a step forward towards full XHTML compliancy, for core and core modules.
(and yes, the new skin for DNN 5 is XHTML compliant)

Third party Modules / Skins
The XHTML status of a lot of third party DNN products is a bit like the situation for the core about a year ago (there are exceptions).
I noticed that the number of commisions with mandatory XHTML compliancy is increasing, which means XHTML compliance is becoming one of the a selection criteria.

XHTML Compliant skins
As Cathal mentioned the default doctype in DNN 5.0 will be XHTML transitional, this means people will expect a skin to be XHTML compliant too, or at least render correctly. The majority of the third party skins is not XHTML compliant.
If you don't make your skins XHTML compliant you will sell less skins in the future.

I would like to encourage  all "non core" module developers and skinners to move forward and also make their products XHTML compliant.

How to Change to XHTML
Here are some tips:

XHTML warnings in VS
A lot of errors can be avoided by using the validation options in Visual Studio. VS will warn you for invalid (X)HTML

Testing your pages
The VS option only works for static HTML, so You will have to test the module / skin on the actual page too.
You can use the W3C validator for this.
But I prefer the "Html Validator" extension for Firefox (I use it for the XHTML tests)
It integrates with FFs "Source view".
Use:
Install the extension.
Choose Tools > Html Validator option" and set
- Algorithm to "Serial"
- Enable validation in Browser, this will show an Error icon in the browser (right bottom) if there are errors.
Double-clicking the icon will open the source view, showing the errors / warnings.
If you double-click an error it shows the offending HTML in the top pane of the source view window.

Most Common XHTML problems
Here's a list of the problems I see most during the XHTML tests:

-All tags should be closed
Wrong: <br>
<hr>
<img src="test.gif" alt="test">
Correct: <br />
<hr />
<img src="test.gif" alt="test" />

-All attributes should be in lowercase
Wrong: <div Class="test">
<div onClick="myfunction">
Correct: <div class="test">
<div onclick="myfunction">

-All Attribute values should be quoted:
Wrong: <td colspan=2>
Correct: <td colspan="2">

-No alt attribute defined for images
Wrong: <img src="test.gif" />
Correct: <img src="test.gif" alt="test image" />

-Deprecated tags: Wrong: <center></center>
Correct: <div class="DNNAligncenter"></div>

-Block elements inside inline elements:
Wrong: <span><div>test</div></span>
Correct: <div><div>test</div></div>
This is often caused by the use of the label control, use the literal control instead (with a div). If you have to add a block element inside an inline element, use an inline element and set its CSS to display:block, the result is the same and it will validate. Please note that a <p> element can not contain any block element either so use divs.

-Script tags without type="text/Javascript"
Wrong: <script src="myscript.js" language="javascript"></script>
Correct: <script src="myscript.js" type="text/javascript"></script>

- Links to external CSS stylesheet inside the body of the page
A Link to an external stylesheet must be in the <head> of the page to be compliant
For modules, move all this CSS to module.css, if it's dynamic CSS, write it in the head of the page.
Skins should have all CSS in either in skin.css of "skinname".css

Trackback Print

Tags:

Categories:

Location: Blogs Timo Breumelhof