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

HTML5

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.