HTML
Diferencias entre elementos void, texto especial, entidades HTML y contextos de escape, con ejemplos de script, style, title, textarea, pre, br, wbr y hr.
No tienen contenido ni etiqueta final:
area base br col embed hr img input link meta source track wbr<img src="avatar.webp" alt="">
<input type="text" name="name">
<hr>No escribas:
<input></input><img src="avatar.webp" alt="" />Es tolerado como estilo, pero HTML no necesita sintaxis self-closing.
Usa comillas y un espacio antes del slash. En un valor sin comillas, el slash puede acabar formando parte de la URL.
script y style interpretan su contenido como texto especial hasta la etiqueta final correspondiente.
<style>
.card::before { content: "<"; }
</style><script>
const less = 1 < 2;
</script>Una secuencia literal </script> puede cerrar el elemento incluso dentro de un string. No insertes contenido no confiable en scripts inline.
title y textarea procesan referencias de caracteres, pero no elementos hijos normales.
<title>Portfolio & servicios</title>
<textarea>Usa <main></textarea><pre><code>const total = price * quantity;</code></pre>pre conserva espacios y saltos, pero sigue siendo HTML: procesa entidades y elementos hijos.
< <!-- < -->
> <!-- > -->
& <!-- & -->
" <!-- " -->
<!-- espacio no separable -->Con UTF-8 puedes escribir directamente la mayoría de caracteres:
<p>© 2026 Nicolás Garzón</p><p>Usa <main> para el contenido principal.</p>
<p title="Dijo "hola"">...</p>HTML, URL, JavaScript y CSS requieren reglas diferentes. No existe un escape universal.
No alinees contenido con espacios no separables. Pueden impedir saltos y producir lectura extraña.
Uso apropiado:
<span>10 km</span><address>
Calle 1<br>
Bogotá, Colombia
</address>br representa un salto dentro del mismo contenido.
<p>identificadorMuyLargo<wbr>ConOtraParte</p>wbr marca una oportunidad de salto.
<hr>hr representa un cambio temático, no solo una línea decorativa.
<!-- TODO: replace placeholder image -->Llegan al cliente. No incluyas credenciales, información privada o lógica sensible.
<pre><code><button type="button">
Guardar
</button></code></pre>/> autocierra cualquier elemento.</script> dentro de script inline. o br para layout.hr solo como decoración.¿Por qué <div /> no crea necesariamente un div autocerrado?
Porque los elementos normales de HTML no utilizan sintaxis self-closing. El slash se ignora y el div sigue abierto hasta su cierre explícito o implícito.
Parser, DOM y recuperación de errores muestra cómo el navegador construye el árbol.