Codificar entidades HTML

Cómo usar Codificar entidades HTML

1. Pega tu texto o tus entidades.
2. Elige la dirección de la conversión.
3. Copia el resultado.

Las tildes y la ñ ya no se codifican

Este es el punto clave para páginas en español y contradice una costumbre muy extendida.

Escrituras como ñ para ñ, á para á o ü para ü vienen de una época en que la codificación de la página era incierta o estaba limitada a Latin-1.

Hoy prácticamente toda página usa UTF-8, y eso permite escribir ñ, á, é, í, ó, ú y ü directamente. Se mostrarán bien en cualquier navegador.

Solo hacen falta dos cosas: que el archivo esté realmente guardado en UTF-8 y que la codificación se declare en la cabecera. Sin esa declaración el navegador adivina, y suele adivinar mal.

De ahí viene el clásico texto roto: "Espa�a" o "España". El origen casi siempre es uno de tres: el archivo guardado en otra codificación, la declaración que no coincide con el contenido, o la base de datos y su conexión que no están en UTF-8.

Ese último caso es el más olvidado: no basta con la página, también hay que revisar el cotejamiento de las tablas y el juego de caracteres de la conexión, o el texto saldrá roto aunque la página esté bien.

Y los signos de apertura ¿ y ¡ funcionan igual: escríbelos directamente. Codificarlos hace el código ilegible sin ninguna ventaja.

Lo que sí hay que codificar

Solo un puñado de caracteres tiene significado sintáctico en HTML.

El ampersand es el caso más importante porque inicia una entidad. Un & suelto en una URL, separando parámetros, debe escribirse & para que el HTML sea válido.

Aquí está además la parte de seguridad: al mostrar texto introducido por usuarios, codificar estos caracteres es la protección contra los ataques de scripting entre sitios. Texto sin filtrar escrito directamente en el HTML puede contener código que se ejecuta.

Para eso no confíes en una herramienta como esta, sino en la función de escapado de tu framework o de tu motor de plantillas: conoce el contexto — texto HTML, atributo, JavaScript, URL — y cada contexto necesita un escapado distinto.

Entidades que sí siguen siendo útiles

Algunos caracteres compensan como entidad porque son invisibles en el código.

El espacio de no separación   impide un salto de línea. En español es útil entre número y unidad — 5 kg, 20 °C — y en abreviaturas que no deben partirse.

Ojo: se abusa de   para crear separación. De eso se encarga el CSS.

Las comillas tipográficas españolas son las latinas «» para el primer nivel, y las inglesas dobles para citas dentro de citas. Se pueden escribir directamente, y quedan mejor que las comillas rectas del teclado.

La raya para incisos — esta — es un carácter distinto del guion y del signo menos. En español se usa la raya larga, y confundirla con un guion corto es un error tipográfico frecuente.

Y por último los caracteres invisibles: si al copiar de Word o de un PDF aparecen saltos raros, suele haber espacios de no separación o guiones opcionales dentro. Pasar el texto por aquí sirve precisamente para verlos.

Preguntas frecuentes