Learn something new every day
More Info... by email
A tree in computer data terms is a method of displaying information as a sequence of nested nodes that can be expanded or collapsed to show subheadings or other information. In the HyperText Markup Language (HTML), the implementation of a tree is often known as a tree view. An HTML tree can be used to show the layout of the pages within a given website; the headings and subheadings of an outline, document or book; or the topics and responses in a forum. There is no single way to implement an HTML tree, and HTML itself does not have any built-in support for a tree view. Instead, an HTML tree is usually constructed using a combination of tools that collectively are referred to as dynamic HTML (DHTML).
An HTML tree is used when there is a collection of information that can be displayed linearly, and each top-level entry might have zero or more pieces of information that can be related to that entry. Each entry is called a node and can have other nodes nested under it. One example of an instance in which a tree could be used to organize and display information is within an online message board.
Each topic in an online message board could be listed as a top-level node, with the term "top-level" indicating that the node is not nested under another node. Every response to a single topic is nested under the top-level node, or the main topic. If a response is made to a response, then the first response becomes a node under which the second response is nested. In this way, information can be organized so the associations from the top to the bottom can be visually portrayed, usually by increasing the indentation of each line in relation to how deeply nested it is in the structure.
One aspect of an HTML tree that requires the use of DHTML is the ability for each node to be expanded, showing all the nodes beneath it, or to be contracted, hiding all the nodes so only the top-level one is seen. This can be achieved through the use of an HTML table that is manipulated through a scripting language that modifies the document object model (DOM) to show or hide the necessary table cells. Another method used to create a dynamic HTML tree is to employ extensible markup language (XML) documents that are turned into HTML pages with server side scripts or other modules.