Why XHTML?
A. XHTML forces you to create clean code
B. The separation of content and layout potentially makes XHTML pages better for viewing on mobile devices (although this only true if you use less or no tables)
C. For the same reason they are better for accessibility
D. In a lot of countries there are regulations that make XHTML for public or government websites mandatory.
For these reasons we are trying to get the core and all modules to validate for XHTML.
This is part of the release process now and this document is intended to you as a developer some guidelines on how to get you module XHTML compliant.
Tools
Here are some tools that can help you develop XHTML valid modules:
1. Visual Studio / Visual Web Developer express.
The editor can warn you for XHTML errors, they will be visible in the "Error List" pane.
In Visual Web developer Express edition
Menu: Tools > options > validation
For target: Choose "XHTML Transitional" and check "Show errors".
This will only show you static XHTML errors, not what is generated in code.
This also forces the editor to close all your tags, including
automatically.
2. Testing in DNN - XHTML compliant skin
Use the latest version of DNN to test and use an XHTML compliant skin.
(DNN with the the Minimal Extropy skin is XHTML compliant since DNN 5.1)
3. Test rendered output in the browser
There are some valuable plugins for testing for XHTML compliance:
A. "Html Validator" extension for FF.
(https://addons.mozilla.org/en-US/firefox/addon/249)
It integrates with the "Source view" in Firefox.
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.
Note: This validator has one problem, it shows a warning about ID's starting with an underscore (viewstate), this is invalid for HTML, but valid for XHTML (if the tags are wrapped in a div), so you can ignore this.
B. Internet Explorer: web developer toolbar
Firefox: Web Developer extension
Both can validate local and online pages, but IMO the FF extension is easier to use.
They will open a new page with the test page in the W3C validator for an XHTML compliance test.
Notes:
* Mostly one XHTML violation causes more then one error in the test.
* Some errors can also hide other errors, so you'll have to test again after your changes.
Where to start?
There are a few simple things you can do to get rid of 90% of the XHTML violations.
These will prevent you from having to go through a lot of issue if you test your module in an XHTML validator.
A. Use Visual studio to clean your ASCX
1. Open your ASCX files in Visual Studio
2. Switch to Source view
3. Select all
4. Right Click and choose "Format Selection"
This will get rid of all CASE errors and add a closing / to all image tags
B. Search for unclosed elements
Search the ASCX for "<br>" and "<hr>" and fix them by adding a closing /
C. Check for Images without alt attributes
1. Search for "<asp:Image>" & <asp:ImageButton> and make sure they all have the "AlterNateText" attribute set
2. Search for <img> and check if there is an Alt attribute, if not add one.
D. Check Label controls
You should only use a Label control if you are 100% sure it will never contain block elements (<p>, <div>, etc).
In general, if the user can change the text you cannot be sure this is the case.
Replace the label control with a panel or a literal.
Use an XHTML validator
Finally you should test you module with either a plug in or one of the online validators to find the remaining issues.
Most validators give you some guidance on how to solve an issue too.
Other common problems:
A list of the problems we see most during the module 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 tags and 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">
-Every img tag should have an alt attribute.
Wrong: <img src="test.gif" />
Correct: <img src="test.gif" alt="test image" />
This attribute is mandatory to help the visually impaired, you will not help them by adding alt="".
Please use descriptive alt text values.
-Deprecated tags
Wrong: <center></center>
Correct: <div style="text-align:center"></div>
-Block elements inside inline elements
Wrong: <span><div>test</div></span>, <p><div>test</div></p>
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.
CSS files linked in the Body
All linked CSS files should be in the head of the page.
Adding a CSS file link directly in your ASCX will lead to an XHTML violation.
Add your CSS links with this code:
Dim oLink As New HtmlGenericControl("link")
oLink.Attributes("href") = "YourFile.css"
oLink.Attributes("type") = "text/css"
oLink.Attributes("rel") = "stylesheet"
Dim oCSS As Control = Me.Page.FindControl("CSS")
oCSS.Controls.AddAt(0, oLink)
HyperLink control
When you use the Hyperlink control with the ImageUrl attribute set, but without the
Text attribute set, the image will not get an alt tag.
In many cases you will need to add an Image control inside the HyperLink control to be XHTML compliant.
This:
<asp:HyperLink ID="lnk" ImageUrl="~/desktopmodules/Module/icon.gif" runat="server" />
You could replace it with:
<asp:HyperLink ID="lnk" runat="server">
<asp:Image ID="lnkIcon" runat="server" ImageUrl="~/desktopmodules/Module/icon.gif " AlternateText="Link Icon" />
</asp:HyperLink>
But this does mean you need to check your code if you are setting the ImageUrl attribute dynamically.
Things to avoid
<br />
The main reason for a module developer to render a Break is mostly because he used a label and wants to force the next element on a new line.
If you render a div instead of a label (or any other inline element) the result is the same and it's a lot better for skinners.
(A div can be forced to float left, a <br /> cannot)
<p>
If you want to avoid XHTML errors you should not be using these in your controls at all. A <p> element can only contain inline elements, which means a <div> inside it will be an XHTML violation.
Mostly these are used to create some distance to the element above it.
There is no guarantee this will actually work because most skinners will overrule the <p> margin-top to 0.
It is better to use a div or a literal and set the margin-top for the element, or even better; add a class and set the margin-top in module.css.
A lot of developers use this to get some space between two inline controls. The problem is that the distance depends on the font size and if the two controls don't fit in the available width, the second will float down and the could be in front if it.
Instead use CSS: padding-right for the first or both elements.
Module.css vs. inline styles
Try to separate content and layout by putting all you CSS in module.css, try to avoid inline CSS.
It's much easier to use inline CSS, but it will make your module a lot more difficult to skin.
The advantage of putting the CSS in module.css is that you are forced to assign classes to the objects and this means a skinner can use these classes too.
If you use inline CSS, there is no way a skinner can address the tag, unless you provide a class or id.
Make sure the classes / CSS either uses the default DNN classes or is specific enough so it doesn't influence the rest of the site.
Question / suggestions
I hope this document helps with the process of getting a module XHTML compliant.
If you have any questions or suggestions, feel free to contact me.
Useful links