Decidí poner el esquema utilizando listas no numeradas.
Visualmente, los descendientes van hacia abajo y a la derecha. Se omiten las etiquetas de cierre y puse el contenido del elemento para mayor claridad.
Los que están en un mismo nivel son hijos del elemento inmediatamente arriba a la izquierda y este a su vez es su padre: Por ejemplo la marca ul (azul) y las li (rojas).
Entre que más arriba a la izquierda se encuentra un elemento (en esta representación) mayor jerarquía, la marca html es el ancestro de todas las demás y las otras son sus descendientes.
Básicamente si se tabula correctamente al crear el html el árbol es casi igual a esto que puse arriba usando las marcas ul y li.