IT:AD:Patterns:It's all Hierarchical After All

All current 2D applications – whether WIMP/ based, or CUTE/ based, are hierarchical in nature.

In pure html terms (not talking about the abomination of ASP.WebForms/) that means that a web page is easily laid out as a series of elements within a UL/LI structure. The rest is just judicious use of CSS.

To better explain this, consider your average HTML page. It's just:

• Head
• Body
• Footer

Consider your average Header Breadcrumb structure. It's really just a List (eg: Home/Student/Search) flattened out, so it too fits easily into the hierarchical page structure:

• Head

  • Breadcrumbs:
    • Home
      • Student
        • Search

  * Body

• Footer

Consider the menu part. It's just a UL/LI tree in the header as well:

• Head

  • Logo
  • Menu:
    • Welcome
    • Students
      • Search
      • Add
    • Help
  • Breadcrumbs:
    • Home
      • Student
        • Search

  * Body

• Footer

The body area is also hiearchical. Classically, it's just:

• Head

  • Logo
  • Menu:
    • Welcome
    • Students
      • Search
      • Add
    • Help * Breadcrumbs: * Home * Student * Search Body
  • Top
  • Middle
    • Left
    • Center
    • Right
  • Bottom

  * Footer

  • Copyright
  • Legal

Each Framework has it's own conventsions, and in HTML5 there are a couple of tags to help break the page down into navigation and content areas.

It's a matter of style really whether the whole page should be one big long UL list – or discrete UL lists within the HTML5 tags. YMMV.