Analizador de HTML

Funciones

• Esquema de encabezados: h1–h6 en orden con su texto (las etiquetas en línea se atraviesan, así que `<h2>Hola <em>mundo</em></h2>` se lee como `Hola mundo`)
• ⚠️ Detección de saltos: `<h1>` a `<h3>` se señala, con una explicación de por qué importa
• ⚠️ Sin h1 dice «normal en el armazón de una aplicación, quizá una omisión en otro caso» en vez de mostrar solo un 0
• Enlaces: cada `<a href>` con su texto ancla, `rel` y `target` (mostrados como (ninguno) cuando faltan), con los externos marcados
• ⚠️ Tipos de enlace: interno, externo, ancla, mailto, tel, javascript: (inseguro, marcado en rojo con una explicación), descarga y vacío, cada uno con su número y su proporción
• Imágenes: ⚠️ el alt que falta y `alt=""` se cuentan por separado, uno es una omisión y el otro una declaración
• Frecuencia de etiquetas, ordenada y con la proporción de cada una, para ver de qué está hecho realmente el marcado
• Texto plano: el cuerpo sin etiquetas (excluyendo script y style), con saltos de línea en los elementos de bloque
• Información del documento: title, lang, meta description y meta viewport
• Recuentos: bytes, etiquetas totales, caracteres de texto y comentarios
• ⚠️ No repara etiquetas: informa de lo que dice el texto original, y una etiqueta sin cerrar sigue sin cerrar
• ⚠️ Un `>` dentro de un valor de atributo y un `<` dentro de un script no descarrilan el análisis

Cómo se usa

1. Pega el HTML: una página entera o un fragmento
2. Marca «incluir también el texto» si quieres el cuerpo sin etiquetas
3. Léelo por grupos: documento → encabezados → saltos → enlaces → imágenes → etiquetas

Preguntas frecuentes

¿Por qué no usar el analizador HTML del navegador?

Porque un analizador corrige lo que considera HTML erróneo, y una herramienta de análisis necesita ver el texto original. Un `<div>` sin cerrar o una etiqueta mal colocada dentro de una `<table>` son hechos que el autor necesita saber, y un analizador que los arregla en silencio esconde justo eso. También hay una razón estructural: cada herramienta de conversión de este sitio es una función pura, y tocar `document` la haría imposible de probar fuera de un navegador, así que el sitio comparte un analizador sin DOM (HTML a Markdown, conversión de UBB y XPath también lo usan). No implementa el algoritmo completo de análisis de HTML5, solo la separación de etiquetas y texto, como dice la página.

¿Qué diferencia hay entre no poner alt y poner alt=""?

Una grande. Sin atributo alt es una omisión: el lector de pantalla no tiene nada que anunciar y recurre al nombre del archivo («IMG_2043.jpg»). `alt=""` es una declaración explícita de que la imagen es decorativa y debe saltarse. Contarlas juntas hace que una página que usa bien `alt=""` parezca tan mala como una que lo olvidó, cuando los arreglos son opuestos: la primera necesita una descripción, la segunda que la dejen en paz.

¿Por qué a veces no tener h1 está bien?

Porque el HTML de una aplicación de una sola página suele ser solo un armazón: el contenido y los encabezados los construye JavaScript en el navegador, así que el documento que sirve el servidor no tiene `<h1>` de verdad. Los buscadores tratan ese caso de forma específica. En un documento renderizado en servidor o en una entrada de blog, no tener h1 suele significar que se ha olvidado. La herramienta no puede saber de qué tipo es tu página, así que expone las dos posibilidades.

¿Para qué sirve la frecuencia de etiquetas?

Para ver de un vistazo de qué está hecho el marcado. Un fragmento lleno de `<div>` significa maquetación por anidación de contenedores; muchos `<table>`, una tabla o una maquetación antigua; un número inusual de `<span>` suele significar algo pegado de un editor de texto enriquecido y a menudo se puede simplificar. Informa de recuentos sin juzgar: un recuento no es bueno ni malo en sí, pero es el hilo del que tirar.

¿Puedo usar directamente el texto extraído?

Depende para qué. Es un resumen fiel de lo que dice aproximadamente el HTML, válido para contar palabras, hacer extractos o echar un vistazo. Pero no es el resultado renderizado: el contenido generado por CSS, el texto insertado por JavaScript y los pseudoelementos `:before` no aparecen. Para el texto renderizado exacto, usa el inspector del navegador o un navegador sin interfaz.

¿Por qué se destacan los enlaces javascript:?

Porque son la única categoría de este desglose con una dimensión de seguridad. Un `<a href="javascript:...">` ejecuta script al pulsarlo, es una vía habitual de XSS y a menudo el rastro de una concatenación de plantilla mal hecha. Las demás categorías son como mucho un problema de estilo; esta puede ser una vulnerabilidad real, así que tiene su propia fila, en rojo y con una explicación, en vez de quedar enterrada en «otros».