HTML
Cómo el navegador transforma HTML en un árbol DOM, corrige markup inválido y aplica reglas especiales para párrafos, tablas, scripts e inserciones con innerHTML.
El navegador convierte bytes HTML en caracteres, tokens y finalmente un árbol DOM mediante un parser con recuperación de errores.
bytes → caracteres → tokens → DOMSource:
<table>
<tr><td>Producto</td></tr>
</table>DOM posible:
<table>
<tbody>
<tr><td>Producto</td></tr>
</tbody>
</table>El parser inserta estructuras necesarias.
El mismo carácter puede interpretarse distinto:
<p>1 < 2</p>
<script>const less = 1 < 2;</script>El tokenizer utiliza estados para data, atributos, comentarios, scripts y otros contenidos.
El algoritmo usa modos de inserción, un stack de elementos abiertos y reglas especiales para tablas, formatting elements, templates y contenido SVG/MathML.
<p>Introducción
<div>Contenido</div>div no puede estar dentro de p; el parser cierra el párrafo antes.
<button>
Abrir
<button>Cerrar</button>
</button>Los botones no deben anidarse. El resultado puede diferir de la indentación y la interacción queda inválida.
Markup como:
<b><i>Texto</b> final</i>activa reglas especiales. No necesitas memorizar el algoritmo; evita depender de él.
Contenido no permitido dentro de una tabla puede moverse fuera:
<table>
Texto inesperado
<tr><td>Dato</td></tr>
</table><!doctype html>
<title>Ejemplo</title>
<p>HolaEl parser crea html, head, body y cierres implícitos. Escribirlos mejora mantenimiento.
element.innerHTML = markup;Usa parsing contextual. No insertes entrada no confiable sin sanitización.
Interactúa con el parser activo y puede reemplazar el documento. Es bloqueante y difícil de razonar; evítalo.
<script src="app.js"></script>Un script clásico sin defer puede detener parsing.
<script defer src="app.js"></script>Permite continuar. Los modules se difieren por defecto.
Ocurre después de parsing y scripts deferred/modules requeridos, no necesariamente después de todas las imágenes.
XML exige cierre y mayúsculas exactas, y puede detenerse ante errores. Un .xhtml servido como text/html continúa usando el parser HTML.
<ul>
<li>JavaScript
<li>TypeScript
<li>HTML
</ul>El parser cierra cada li al iniciar el siguiente. Escribir los cierres suele ser más claro.
¿Por qué DevTools puede mostrar un tbody ausente en View Source?
Porque el tree builder lo inserta implícitamente al construir el DOM de la tabla.
Categorías de contenido y anidamiento explica las restricciones estructurales.