Cómo usar esta herramienta para desarrolladores
- Pega el HTML que quieras explorar.
- Decide si quieres incluir nodos de texto.
- Pulsa «Ver estructura HTML».
- Expande tu análisis usando la profundidad y el árbol de salida.
HTML Viewer
Visualiza la jerarquía de un documento HTML como un árbol de texto indentado. Muestra etiquetas, hasta cinco atributos por elemento y, de forma opcional, nodos de texto resumidos. Es útil para entender rápidamente la estructura DOM sin renderizar ni ejecutar la página.
Datos de entrada
Texto o códigoEspacio publicitario
Qué hace esta herramienta para desarrolladores
Presenta una vista legible de la jerarquía HTML y calcula el número de elementos, profundidad máxima y nodos de texto incluidos.
La herramienta recorre el DOM en profundidad y escribe una línea por nodo. La sangría aumenta con cada nivel para hacer visibles relaciones padre-hijo.
La vista no reproduce estilos, dimensiones ni comportamiento JavaScript; representa estructura, no apariencia visual.
Ejemplo
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo</title>
</head>
<body>
<main>
<h1>Hola</h1>
<img src="foto.jpg" alt="Paisaje">
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Enlace</a>
</main>
</body>
</html>Casos de uso
- Comprender plantillas con muchos contenedores anidados.
- Revisar jerarquía semántica antes de refactorizar.
- Comparar la estructura DOM de dos fragmentos manualmente.
Consejos para obtener resultados fiables
- Oculta los nodos de texto si solo necesitas la estructura.
- Observa niveles de anidación excesivos.
- Recuerda que el navegador puede reconstruir HTML mal formado.
- Usa el Parser cuando necesites JSON en vez de una vista humana.
Detalles del procesamiento
Cada elemento se muestra con su nombre de etiqueta y una muestra acotada de atributos. El recorrido se hace sobre documentElement después del parseo local.
No carga CSS ni recursos externos y no pretende ser una previsualización visual de la página.
Preguntas frecuentes
¿Qué muestra un HTML Viewer basado en estructura DOM?
Muestra la jerarquía de etiquetas y atributos en forma de árbol indentado, con la opción de incluir fragmentos de texto.
¿El HTML Viewer renderiza la página como lo haría una pestaña del navegador?
No. Esta herramienta muestra estructura, no estilos ni diseño visual, y no ejecuta scripts del documento analizado.
¿Cómo puedo detectar HTML excesivamente anidado con esta vista?
Revisa la profundidad máxima y observa bloques con muchos niveles de sangría consecutivos.
¿Por qué aparecen html, head o body aunque pegue un fragmento pequeño?
DOMParser construye un documento HTML completo y puede insertar esos elementos al normalizar el fragmento.
¿Cuál es la diferencia entre HTML Viewer y HTML Parser?
Viewer prioriza una salida legible para personas; Parser devuelve una estructura JSON más adecuada para procesamiento posterior.
Herramientas relacionadas para desarrolladores
Módulos del análisis
| Módulo | Función |
|---|---|
| Recorrido DOM | Genera un árbol indentado por niveles. |
| Atributos | Muestra una muestra de atributos por elemento. |
| Métricas | Calcula elementos, profundidad y texto visible. |