XHTML and best practice coding for skins and modules in DotNetNuke(R)

ref: http://www.dnncreative.com/Articles/WebDesign/CodingBestPractices/tabid/228/Default.aspx

What is XHTML?

XHTML, is a markup language that has the same possibilities as HTML, but it uses a stricter syntax.

The changes from HTML to XHTML are minor and basically raise the HTML coding to the XML standards.

The main areas that this covers are:

• The document must be well formed, all elements must have closing Tags
• XML tags are case sensitive, therefore within XHTML all tag names must be in lowercase
• All attribute values must be in quotes

Examples below: The HTML version demonstrates how you may have coded in the past, the XHTML version demonstrates the coding standards that you need to adapt to create XHTML compliant code.

Examples	HTML	XHTML
Lowercase	<TABLE> <P>	<table> <p>
Well formed tags	<br> <hr> <img … > <p>text here<p>more text	<br /> <hr /> <img … /> <p>text here</p><p>more text</p>
Quote attributes	Height=10px	Height="10px"

Further examples can be read in the Styleguide

And Wikipedia

Why bother with XHTML compliant code? What's it all about?

The main reason for creating XHTML compliant code is that XHTML will help your website display more reliably in browsers and devices such as PDAs, mobiles etc.

To quote the W3C (World Wide Web Consortium):

The motivation for XHTML Basic is to provide an XHTML document type that can be shared across communities (e.g. desktop, TV, and mobile phones), and that is rich enough to be used for simple content authoring.

The web is moving towards XML, so it's worth learning the correct coding techniques before learning any bad habits.

How does this affect DotNetNuke?

Using the standard settings of DotNetNuke and a table based skin while also ensuring you have XHTML compliant code will not make any difference.

If however you wish to improve the performance, accessibility, search engine results and reduce the bandwidth of your DotNetNuke skins, you can create CSS layout skins which do not use any tables.

Once you begin using CSS with DotNetNuke, you need to ensure that your code is following the XHTML standards. You may find that if you miss a closing tag for instance that it will completely ruin the display of your CSS skin.

The XHTML standards also need to be adhered to by module developers. Why?

Well, if you install a module into your pure css skin that contains missing closing tags such as <br> rather than <br /> or other non-compliant code, this may corrupt the layout of your skin, meaning that you will not be able to use the module with your skin until you can fix all of the non-compliant code.

Conclusion:

Study how to create XHTML compliant code and learn good habits. Even if you currently only create table based skins, you may wish to adventure into pure CSS skin design in the future. Applying this knowledge now will help you make the change to a pure CSS environment at a later date a much easier transition.

Regarding module developers, I would recommend that you implement XHTML compliant code to future proof your modules so that your modules can be used in as many various configurations as possible.

References and further recommended reading:

Styleguide XHTML Guidelines
XHTML Wikipedia definition
Semantics Wikipedia definition
XHTML Benefits
This HTML Kills: Thoughts on Web Accessibility
Better Living Through XHTML
Modifying Dreamweaver to Produce Valid XHTML
HTML versus XHTML
What is HTML / XHTML?
XHTML - Marking of a new dawn

Validation:
Validate your HTML code at W3C
WDG HTML validator
Validate your CSS code at W3C

--
Happy day, happy life!