Displaying hierarchical data with HTML.

[eluser]TheFuzzy0ne[/eluser]
Hi, all.

A friend has asked me the best way to display hierarchical data on a Web page, but alas, I do not know the answer!

What would like to display, units, which are made up from modules, which are made up by lessons.

So the structure is like thus:

Code:

UNIT 1 - Description of unit
|
+- Module 1 - Description of module
|  |
|  +- Lesson 1: Description of lesson
|  +- Lesson 2: Description of lesson
|  +- Lesson 3: Description of lesson
|  +- Lesson 4: Description of lesson
|
+- Module 2 - Description of module
|  |
|  +- Lesson 1: Description of lesson
|  +- Lesson 2: Description of lesson
|
+- Module 3 - Description of module
|  |
|  +- Lesson 1: Description of lesson
|  +- Lesson 2: Description of lesson
|  +- Lesson 3: Description of lesson
|
+- Module 4 - Description of module
   |
   +- Lesson 1: Description of lesson
   +- Lesson 2: Description of lesson

UNIT 2 - Description of unit
|
+- Module 1 - Description of module
|  |
|  +- Lesson 1: Description of lesson
|  +- Lesson 2: Description of lesson
|  +- Lesson 3: Description of lesson
|
+- Module 2 - Description of module
|  |
|  +- Lesson 1: Description of lesson
|  +- Lesson 2: Description of lesson
|
+- Module 3 - Description of module
   |
   +- Lesson 1: Description of lesson
   +- Lesson 2: Description of lesson
   +- Lesson 3: Description of lesson

# And so on...

I just have no idea how I should be displaying the data. Should I be using unordered lists? Any input appreciated.

[eluser]daveWid[/eluser]
Unordered lists would probably be the best way to do that. Making one for each unit would probably be the easiest to follow but sticking them all into 1 big list would work as well.

Code:

<ul>
  <li>UNIT 1 - Description of unit
    <ul>
      <li>Module 1 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
          <li>Lesson 3: Description of lesson</li>
          <li>Lesson 4: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 2 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 3 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
          <li>Lesson 3: Description of lesson</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>Module 4 - Description of module
        <ul>
          <li>Lesson 1: Description of lesson</li>
          <li>Lesson 2: Description of lesson</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

# and so on...

[eluser]TheFuzzy0ne[/eluser]
That's what I was thinking. Many thanks.