<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ejercicio opcional árbol</title> </head> <body> <header> <img src="firefox-os.png" alt="FirefoxOS Logo" width="200" height="164"> </header> <nav> <ul> <li>Menú 1</li> <li>Menú 2</li> <li>Menú 3</li> </ul> </nav> <article> <h1>Titular de nivel 1</h1> <p>Contenido de la página</p> </article> <footer>Pie de página</footer> </body> </html>

Esquema de este documento HTML en estructura de tipo árbol
Click sobre cualquier elemento, dentro de cualquier caja, obtenemos información sobre elemento
Click sobre cualquier caja, se contraen los elementos hijos