По сути это аналог дельфового treeview. Структура html-страницы для отображения дерева не отличается от любого html файла. Для реализации потребуется описание стилей CSS или же указать ссылку на файл описания стилей, jquery и немного времени. По структуре своей дерево простое. Вот так оно выглядит в примитивном виде:
<li>
<span><a href="">1. Ветка</a></span>
<ul>
<li><span><a href="#">1.1. Ветка</a></span></li>
<li><span><a href="#11">1.2. Ветка</a></span></li>
</ul>
</li> Ну...
Один из ключевых аспектов веб-разработки – это структура HTML-документа. Но иногда трудно визуализировать, как именно выглядит документ на основе его кода. В этом случае может помочь инструмент для визуализации HTML-дерева.
Просто вставьте свой HTML-код в поле слева, и вы увидите древовидное представление вашей разметки. Это позволяет легко оценить иерархию элементов и их вложенность. Исходный код проекта доступен на GitHub...