Semantic Markup

Drupal was selected as the ideal CMS infrastructure by the Recreational Services Department of Indiana University. The design team for this department had a clear vision, and an approved set of mock designs for the proposed website. The In-house content manager for Indiana University described the vision to include available functionality in Drupal, as well as customizations of existing modules to fit the specific website needs of the student, staff and alumni community. The presentation of content in this CMS setup was to be based on the already approved mocks (Adobe Photoshop files) with reasonable enhancements and accommodation for the specific needs of a CMS website.

iDonny Productions created a custom Drupal theme based on the approved designs provided by the client; with multiple content regions to enable the dynamic placement of content blocks depending on a predetermined logical relevance matching system.

NB: Although we always recommend the use of semantic XHTML markup without using tables for layout, the scope requirements for this site required the use of tables for basic layout to avoid differences in browser implementation of CSS-P positioning box models.

Indiana University Recreational Services Website

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.