w3c

In the migration from HTML web design to XML based design, why wouldn't one choose to skip XHTML and go straight to the source, cut the middle-man and code content in XML?

It may come as a surprise or shock to hear this, just when we all thought that XHTML was the happy in-between buggy, irregular and bad HTML, and the neat, orderly, structurally valid XML. Many web designers have come to like the comfort ease of use that one finds in HTML. Besides the short-comings of badly structured HTML and the mix of presentational and layout markup (Believe me, we all know some web designers who refuse to embrace semantic markup and CSS), we can all admit to have liked the forgiving nature of HTML.

It is not more or less a universally accepted fact that HTML 4.x and its predecessors are not future-compatible enough to be used in creating valid and stable web content that is accessible, and that stays faithful to the web content presentation architecture of separating content from design, from mark-up.

XHTML in its various flavours of Transitional, Strict, and to a lesser extent Frameset are quickly becoming the standard markup languages for web content. XHTML is a representation of XML, and when valid, it is as good as any other XML document that is built upon a valid DTD especially when well written, strict and valid.

Client-side XML

XML, the term and the technology is talk about and used almost everywhere. It is thought and talked about by everyone. It is now arguably the de-facto method for presenting and exchanging data between applications, disparate technologies and products. Most of the noise is being made about server-side or inter and intra-application interfacing. for client-side use, this is mostly installed applications.

Making a case for Client-side XML

As a subset of XML, XHTML by definition and characteristics complies with formatting and structural architecture of XML. Technically,XHTML is XML. It even has a DTD (Document Type Definition). If browsers support XHTML, the it supports XML. Through my trials and research, I have found that more browser versions support XML, than these that support CSS 2.x . It is ironic that CSS is more widely used than XML markup, yet they at least have the same support. It should therefore makes sense for anyone who prefers pure XML for markup to go ahead and markup his/her content in XML as opposed to XHTML, and much less in HTML.

This document is one of many that discuss the use of XML in Web Design

An alternative approach to valid, accessible and semantic XHTML markup that is as good if not better than DIV, and not as evil as TABLES

Using inherently hierarchical mark-up in place of neutral mark-up (such as DIV, SPAN) is an interesting idea and alternative way of writing semantic mark-up. Each approach has advantages and disadvantages.

Non-hierarchical tags such as DIV and SPAN (structurally block and inline respectively) allow more flexibility and permutations for nesting multiple tags. As such, a DIV tag can be nested within other DIV tags, and each can in-turn contain other block-level and inline tags such as FORM, P, SPAN, DL, etc. Being that DIVs are the default mark-up approach used by the W3C in defining valid semantic markup, deciding how to nest tags while maintaining code validity is easy because of all the available literature, and guidelines. For instance, using the W3C validator at to validate DIV based code provides in-depth information on the allowed parent/child relationship between P, SPAN, DIV, FORM, INPUT. These guidelines aid in creating mark-up that is stable and easy to build upon.

Hierarchical tag structures such as Definition Lists and Ordered/Unordered Lists have the advantage of inherently structuring content in the absence of CSS to define the positioning, or for bots, crawlers and non-traditional browsing media to easily understand it's structure for better basic layout and SEO. when dealing with hierarchical content such as web pages and XML data that is structural in nature, using a list system is a more natural transition (Structural XML to Structural lists).

Example:
XML data

<catalog>
<car>
<marketing_name>Honda Civic EX</marketing_name>
<model>HCEX20074DR</model>
<engine>
<capacity>1800cc</capacity>
<cylinders>4</cylingers>
<type>4 Stroke</type>
</engine>
<price>17300</price>
<year>2007</year>
</car>
</catalog>

Semantic XHTML Menu

<ul id="catalog">
<li class="car">
<ul class="details">
<li class="marketing_name">Honda Civic EX</li>
<li class="model">HCEX20074DR</li>
<li class="engine">
<ul class="details">
<li class="capacity">1800cc</li>
<li class="cylinders">4</li>
<li class="type">4 Stroke</li>
</ul><!-- END details -->
</li><!-- END engine -->
<li class="price">17300</li>
<li class="year">2007</li>
</ul><!-- END details -->
</li>
</ul><!-- END catalog -->

Comment: The hierarchical relationship between elements in the XML file is directly translated into the list-based markup UL markup.

The main difference between hierarchical (UL/DL/OL) and non-hierarchical (DIV, SPAN, P) markup approaches is the ability for hierarchical structures to be logically navigated and understood without visual cues and presentation that is only useful for conventional browsers. However, the base stricture of the XHTML DTD prevents certain important tags from being used within lists.

Currently using lists is the logical approach to creating markup for menus within semantic XHTML markup. The structural nature of menu systems (parent, title, list-items) logically fits into lists (OL/UL/DL). Although using DIV/SPAN elements would work as well, DIV based mark-up does not provide a hint of the structural relationship between items as well as lists (OL/UL/DL)do.

Note: The use of DIVless hierarchical markup structures as clearly explained by P.J. Onori and David Nelson is a valid alternative to DIV/SPAN based markup especially in situations where the markup XHTML elements need to maintain a strong hierarchical relationship beyond what may be defined using CSS for visual layout and presentation.

NB: To respond to a concern that may be raised about the validity of nesting high level tags such ad DIV within list items, I have tested the code against the Tidy validator and the code is valid.