[kagamine]

That's a problem for sure but last week I looked into creating a family tree with the basics of HTML and CSS and the following nested lists seems to be the best solution according to forums. Now, try to add into these nested lists some siblings(the people kind) and some new branches as you discover people in census reports from 100 years ago. Now add in a newborn. Is this the best we can do? (apologies, but I haven't the time to tab this correctly, link to Codepen at the end):

    <div class="tree">
      <ul>
        <li>
          <a href="#">Parent</a>
            <ul>
              <li>
                <a href="#">Child</a>
                  <ul>
                    <li>
                      <a href="#">Grand Child</a>
                        </li>
                          </ul>
                            </li>
                              <li>
                                <a href="#">Child</a>
                                  <ul>
                                    <li><a href="#">Grand Child</a></li>
                                      <li>
                                        <a href="#">Grand Child</a>
                                        <ul>
                                          <li>
                                            <a href="#">Great Grand Child</a>
                                          </li>
                                          <li>
                                            <a href="#">Great Grand Child</a>
                                          </li>
                                          <li>
                                            <a href="#">Great Grand Child</a>
                                          </li>
                                        </ul>
                                      </li>
                                      <li><a href="#">Grand Child</a></li>
                                    </ul>
                                  </li>
          </ul>
        </li>
      </ul>
    </div>

Lifted from here: https://codepen.io/chuongdang/pen/lcnsC

[shadowfiend]

Lifted from there, but with broken indentation :) In fact with correct indentation, you see that this goes down 4 levels (instead of the seeming 14 the current rendering seems to indicate). That's significantly better, and once you get used to the structures of lists it's actually relatively straightforward to understand a list like that. Moreover, it's trivial for a computer to understand a list like that as nested lists of lists.

Side note: the top-level div isn't really necessary; you can just apply the `tree` class directly to the `ul` with a small tweak or two to the CSS.

[kagamine]

Absolutely, but try researching a family tree and then implementing it using that model and see how quickly you get lost in the nested list structure. The, as I said in another comment, try adding a child born after you started the lists, ie, before the first UL. Then add a divorce and a new spouse and see how easy that is to logically display the relationship.

To illustrate how HTML so ill suited to this structure, I had another look at the problem and found Treant, because yes, the easiest to do this on the Web and maintain it is to write an entire API.

http://fperucic.github.io/treant-js/

[yoz-y]

How could this be done better though? Unless using a DSL it seems to me that this problem is quite complex to begin with.

[kagamine]

It is, but it also illustrates the problem of drawing a simple diagram for the web. It was in response to user mattmanser's illustration of diabolical nested tables and user einar's nested divs. HTML is problematic for anything complex. I suppose the best way to represent the data is to not use HTML at all, but instead use an image (SVG? for scalabilty) or a big PDF that opens a new tab?

I googled for a solution that I could add to and maintain myself and this was what The Internet threw up as the best solution, but it is far from good.

[yoz-y]

I would say that best for drawing diagrams in html pages would be to use a DSL like plantuml or dot and some javascript library to transform it into a SVG image.

[metamet]

> How could this be done better though?

      <ul>
        <li>
          <a href="#">Parent</a>
          <ul></ul>
        </li>
      </ul>