Entidades HTML

Algunos caracteres son especiales en HTML. Si escribes un < crudo en el texto normal de la página, el navegador puede pensar que empieza una etiqueta. Si escribes un & crudo, puede pensar que empieza una entidad. Las entidades de carácter (character entities) son códigos seguros que muestran esos símbolos como texto visible en lugar de confundir al analizador. Esta sesión enseña el sistema de entidades en sí: cuándo las necesitas, cómo escribir las formas con nombre más comunes y cómo evitar la sobrecodificación que estropea la legibilidad sin beneficio. Cuando entiendes la regla, las páginas de tutorial y los ejemplos incrustados se vuelven más fiables entre editores y navegadores.

¿Qué es una entidad HTML?

Una entidad HTML es una forma codificada de escribir un carácter en el marcado. La mayoría de las entidades con nombre empiezan con & y terminan con ;. El navegador sustituye el código por el carácter real al renderizar la página. Necesitas entidades sobre todo para caracteres que HTML ya usa como sintaxis de marcado, y a veces para símbolos incómodos de teclear. No sustituyen guardar el archivo en UTF-8 ni significan que cada letra del párrafo necesite una entidad. Piensa en ellas como herramientas precisas: úsalas donde el carácter crudo sería inseguro o ambiguo, y deja la prosa normal intacta. Ese equilibrio protege al analizador y mantiene el código fuente legible para quien escribe.

Respuesta directa

Usa entidades cuando un carácter sería inseguro o poco claro como texto crudo. Recuerda primero estas: < para <, > para >, & para & y   para un espacio de no separación. Termina siempre una entidad con nombre con ;. Úsalas en párrafos y dentro de ejemplos que enseñan HTML siempre que el carácter crudo rompería o malinterpretaría el documento. Si muestras etiquetas en una frase normal, las entidades mantienen el ejemplo como texto, no como elementos vivos. Si necesitas un signo «y» visible en un nombre de marca al estilo AT&T, & es la forma segura habitual. Empieza con estas cuatro y añade " y © cuando haga falta; no memorices listas largas antes de dominar la regla básica.

Entidades comunes de un vistazo

Caracteres reservados en oraciones

Cuando enseñas o mencionas etiquetas en un párrafo normal, muéstralas con entidades para que sigan siendo texto. El lector ve la forma familiar de la etiqueta, mientras el documento sigue siendo válido porque no insertaste una etiqueta real en medio de la explicación. Este hábito es esencial en tutoriales, blogs técnicos y cualquier página que explique HTML dentro de HTML. Sin él, la línea de ejemplo puede aparecer como un párrafo o sección nuevos, o parte del texto desaparece porque el analizador «se come» los ángulos. Las entidades dejan clara la intención: estos son caracteres para mostrar, no estructura viva de la página.

Lectura del ejemplo

• <p> muestra los caracteres <p> sin crear un elemento de párrafo ahí
• Tom & Jerry se muestra como Tom & Jerry
• Un & crudo sin entidad válida puede causar problemas de análisis
• Las letras normales como p y Jerry no necesitan entidades
• El punto y coma al final de cada entidad con nombre forma parte de la regla, no es adorno opcional
• Compara el código fuente con el texto renderizado para ver el código frente al resultado

Espacios de no separación

  es un espacio que los navegadores no deberían usar como punto de ajuste suave entre las partes que une. Sirve para mantener una etiqueta corta con un número, o palabras que quieres juntas. No lo esparzas por todas partes como herramienta de diseño: prefiere espacios normales y CSS para el diseño real. Abusar de   hace el código fuente difícil de leer y puede impedir el reflujo en pantallas estrechas sin resolver un problema real de maquetación. Úsalo con intención: título corto y número de capítulo, unidad con valor, o un par de palabras que no deben partirse al borde de la línea. Los espacios entre frases, márgenes y alineación pertenecen a CSS.

Entidades con nombre frente a escribir el símbolo

Para muchos símbolos puedes pegar el carácter real si el archivo se guarda como UTF-8 (ver la sesión Charset más adelante). Las entidades siguen siendo especialmente importantes para <, > y & porque esos caracteres forman parte de la sintaxis HTML. Aprender las formas con nombre comunes hace fiables las páginas didácticas y los ejemplos entre editores. Un editor moderno puede permitir pegar © o comillas tipográficas, pero un tutorial que muestra etiquetas en un párrafo sigue necesitando < y >. Las entidades con nombre también son más claras en revisiones de texto: quien revisa ve el código y entiende la intención al instante. No sustituyas por costumbre cada carácter no latino con entidades numéricas; UTF-8 cubre la mayor parte de la prosa moderna. Reserva las entidades donde la codificación protege el significado o evita romper el marcado.

Práctica en tu editor

1. Escribe un párrafo que muestre el texto <div> usando < y >.
2. Añade una línea con AT&T escrito de forma segura con &.
3. Usa   entre un título corto y un número que no quieras partir en líneas.
4. Abre la página y confirma que los símbolos se ven correctos.
5. Mira el código fuente y encuentra los códigos de entidad — compara fuente y texto renderizado.
6. Olvida a propósito el punto y coma de una entidad, recarga, observa el resultado raro y corrígelo.
   Después pregúntate: ¿queda algún & crudo sin entidad completa? ¿Se codificaron letras normales sin motivo? ¿Se usó   solo donde no debe haber salto? La práctica fija la idea mejor que memorizar una lista; el error deliberado del punto y coma muestra por qué la regla es estricta.

Errores que rompen las entidades

• Olvidar ; al final de una entidad
• Escribir un & suelto en texto que no es una entidad completa (prefiere & cuando quieres un ampersand)
• Codificar letras y palabras ordinarias que nunca necesitaron entidades
• Usar   como sustituto de márgenes y diseño en lugar de aprender el espaciado en CSS
• Confundir < y > al mostrar ejemplos de etiquetas
  Estos errores parecen «pequeños» hasta que uno rompe la visualización o ensucia el código fuente. Una revisión rápida — buscar & en el archivo y comprobar que cada uno inicia una entidad válida que termina en ; — evita la mayoría de los problemas antes de publicar.

Resumen

• Las entidades muestran caracteres reservados o especiales con seguridad en el texto HTML
• Empieza con <, >, & y  
• Las entidades con nombre empiezan con & y terminan con ;
• Codifica ángulos y ampersands cuando deban aparecer como texto
• No codifiques con entidades las letras de la prosa normal sin motivo
• Las entidades son especialmente útiles cuando una página HTML enseña HTML
  Guarda la regla, no toda la lista: protege el analizador, muestra el símbolo deseado y mantén limpio el código fuente. Así tus ejemplos se pueden copiar y enseñar sin sorpresas en el navegador.