Skip to main content

¿Qué es un árbol HTML?

Un árbol en términos de datos de computadora es un método para mostrar información como una secuencia de nodos anidados que se pueden expandir o contraer para mostrar subtítulos u otra información. En el lenguaje de marcado de hipertexto (HTML), la implementación de un árbol a menudo se conoce como una vista de árbol. Se puede utilizar un árbol HTML para mostrar el diseño de las páginas dentro de un sitio web determinado; los títulos y subtítulos de un esquema, documento o libro; o los temas y respuestas en un foro. No existe una única forma de implementar un árbol HTML, y el propio HTML no tiene soporte incorporado para una vista de árbol. En cambio, un árbol HTML generalmente se construye utilizando una combinación de herramientas que colectivamente se denominan HTML dinámico (DHTML).

Se utiliza un árbol HTML cuando hay una recopilación de información que se puede mostrar linealmente, y cada entrada de nivel superior puede tener cero o más elementos de información que puedan estar relacionados con esa entrada. Cada entrada se llama nodo y puede tener otros nodos anidados debajo de ella. Un ejemplo de una instancia en la que un árbol podría usarse para organizar y mostrar información es dentro de un tablero de mensajes en línea.

Cada tema en un tablero de mensajes en línea podría aparecer como un nodo de nivel superior, con el término "nivel superior" que indica que el nodo no está anidado en otro nodo. Cada respuesta a un solo tema está anidada bajo el nodo de nivel superior o el tema principal. Si se realiza una respuesta a una respuesta, la primera respuesta se convierte en un nodo bajo el cual se anida la segunda respuesta. De esta manera, la información se puede organizar de modo que las asociaciones de arriba a abajo se puedan representar visualmente, generalmente aumentando la sangría de cada línea en relación con lo profundamente anidada que está en la estructura.

Un aspecto de un árbol HTML que requiere el uso de DHTML es la capacidad de expandir cada nodo, mostrar todos los nodos debajo de él o contraerse, ocultando todos los nodos para que solo se vea el de nivel superior. Esto se puede lograr mediante el uso de una tabla HTML que se manipula a través de un lenguaje de script que modifica el modelo de objetos del documento (DOM) para mostrar u ocultar las celdas de tabla necesarias. Otro método utilizado para crear un árbol HTML dinámico es emplear documentos de lenguaje de marcado extensible (XML) que se convierten en páginas HTML con scripts del lado del servidor u otros módulos.