HTML entities
En HTML, ciertos caracteres tienen significado especial en el código fuente:
<y>delimitan etiquetas.&inicia una entity.
Si el contenido que querés mostrar incluye esos caracteres, el navegador los confunde con código HTML. Para mostrarlos como texto, se usan character references (entidades HTML):
Sin entities, el <p> del contenido desaparece — el navegador lo parsea como una etiqueta de apertura, cierra el primer párrafo y abre uno nuevo:
<!-- Sin entities: el <p> se consume como etiqueta -->
<p>Escribí</p>
<p>para crear un párrafo.</p>Escribí
para crear un párrafo.
Con entities, el texto se muestra exactamente como está escrito:
<!-- Con entities: el <p> aparece como texto -->
<p>Escribí <p> para crear un párrafo.</p>Escribí <p> para crear un párrafo.
Los navegadores modernos son tolerantes y a veces muestran el texto igual aunque el HTML esté técnicamente roto. No te confíes: el comportamiento puede diferir en lectores de pantalla, scrapers y validadores. Las entities son obligatorias cuando el contenido incluye
<,>o&.
Las cuatro entities esenciales
| Entity | Carácter | Por qué existe |
|---|---|---|
< | < | Carácter reservado — delimita etiquetas |
> | > | Carácter reservado — cierra etiquetas |
& | & | Carácter reservado — inicia entities |
| espacio sin salto | Espacio que no se puede comprimir ni partir entre líneas |
Cuándo usarlas
< y > son necesarias cuando querés mostrar < o > como texto: código HTML en un tutorial, fórmulas matemáticas, comparaciones numéricas.
& es necesaria cuando querés mostrar & literal. Si el texto que sigue al & coincide con el nombre de una entity, el navegador la interpreta. Por ejemplo, € es la entity del símbolo € — si querés mostrar el texto € tal cual, necesitás escapar el &:
<!-- Sin &: el navegador interpreta € como el símbolo € -->
<p>La entity € produce el símbolo del euro.</p>La entity € produce el símbolo del euro.
<!-- Con &: el & queda como texto y se muestra la entity literal -->
<p>La entity &euro; produce el símbolo del euro.</p>La entity € produce el símbolo del euro.
es útil en casos específicos: evitar que dos palabras se partan en líneas distintas. A diferencia de un espacio normal, el navegador nunca corta una línea en un .
<p>Llamá al Dr. Pérez para más información.</p>Llamá al Dr. Pérez para más información.
El navegador nunca va a separar a “Dr. Pérez” en líneas distintas.
Sintaxis de entities
Una entity empieza con &, tiene un nombre, y termina con ;. El punto y coma final es obligatorio — sin él, el navegador puede no interpretarla correctamente.
La lista completa de named character references tiene cientos de entradas (©, ™, etc.). También existen numeric references (< equivale a <). Ver Referencia. Para los caracteres del día a día, las cuatro esenciales de arriba son suficientes.
Nota sobre acentos: en archivos con codificación UTF-8 (que es el estándar actual), los caracteres acentuados (
á,é,ñ) se pueden escribir directamente sin entities. Solo<,>y&requieren escape.
Tu turno: escribí el párrafo que muestre 5 < 10 y 20 > 15 & todo correcto usando las entities correctas. Luego hacé clic en “Comprobar”.
HTML entities
Escribí un párrafo que muestre el siguiente texto exactamente: `5 < 10 y 20 > 15 & todo correcto` Usá entities para los caracteres especiales: `<` para `<`, `>` para `>`, `&` para `&`. Recordá que cada entity termina con punto y coma (`;`).
Preview