Usa el Codificador y Decodificador de Entidades HTML gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por qué existen las entidades HTML
Una página web se escribe en HTML, y HTML da un significado especial a algunos caracteres. El signo menor que abre una etiqueta, el ampersand abre una entidad y las comillas delimitan los valores de los atributos. Si quieres que esos caracteres aparezcan como texto normal en la página, no puedes escribirlos sin más. Un signo menor que seguido de letras puede interpretarse como el inicio de una etiqueta y desaparecer de la página, o peor aún, romper el diseño de todo lo que viene después. Las entidades HTML resuelven esto dando a cada carácter especial una forma escrita segura que el navegador muestra como el carácter en sí.
Una entidad tiene esta forma: un ampersand, un nombre o un número, y un punto y coma, por ejemplo & para el ampersand o < para el signo menor que. Cuando el navegador encuentra una, muestra el carácter que representa. Por eso los tutoriales, la documentación y los ejemplos de código están llenos de entidades: son la única forma fiable de mostrar código HTML dentro de una página HTML. Cualquiera que escriba sobre la web, la enseñe o publique fragmentos de código necesitará entidades tarde o temprano.
Cómo funciona esta herramienta
Pega tu texto en el cuadro y elige una dirección. En modo codificación, la herramienta recorre tu texto carácter a carácter y reemplaza cada carácter especial por su entidad. Los ampersands, los ángulos y los dos tipos de comillas siempre se codifican, porque son los caracteres que pueden romper el HTML. Símbolos comunes como copyright, registrado, euro, libra y grados también se reemplazan por sus entidades con nombre, lo que mantiene el resultado legible para las personas.
También hay una opción para codificar cada carácter no ASCII como una entidad numérica. Eso sirve para sistemas antiguos o procesos estrictos que solo aceptan ASCII puro, aunque para páginas modernas no suele ser necesario, ya que UTF-8 maneja directamente las letras acentuadas y los símbolos. En modo decodificación, la herramienta hace lo contrario: convierte las entidades en los caracteres que representan, incluidas las entidades con nombre y las numéricas decimales o hexadecimales, para que puedas recuperar texto legible desde HTML con escapes.
Cuándo usarla
Usa el codificador cuando pegues código o caracteres especiales en una página web, una entrada de blog, una plantilla de correo o un gestor de contenidos que interprete HTML. Si escribes un tutorial que muestra un div o una etiqueta de enlace, codifica primero el ejemplo, o tus lectores verán un elemento real en vez del código que querías mostrar. Lo mismo vale para foros y comentarios en sitios que permiten HTML limitado: codificar mantiene tu texto visible e inofensivo.
Usa el decodificador cuando copies texto del código fuente de una página, de un feed RSS, de una exportación de base de datos o de una respuesta de API y lo encuentres lleno de entidades. El texto decodificado es mucho más fácil de leer, buscar y editar. Los desarrolladores también usan la decodificación al depurar, porque comparar las versiones con y sin escapes de la misma cadena suele revelar dónde se coló un error de doble codificación.
Errores comunes que debes evitar
El error más común es la doble codificación: pasar un texto ya codificado por el codificador otra vez. Un ampersand que forma parte de < se convierte en &lt;, y la página muestra literalmente < en vez de un signo menor que. Si tu resultado se ve mal, comprueba si la entrada ya estaba codificada antes de culpar a la herramienta. Normalmente la codificación debe ocurrir exactamente una vez, en el punto donde el texto entra en un contexto HTML.
Otro error es codificar todo a mano con prisa y olvidar el propio ampersand. El ampersand siempre debe codificarse primero, porque toda entidad empieza con uno. Esta herramienta maneja ese orden por ti, así que no necesitas pensar en ello. Por último, recuerda que las entidades son un concepto de HTML: no sirven de nada en un archivo de texto plano, una hoja de cálculo o un mensaje de chat, donde los caracteres normales están bien.
Consejos para un resultado limpio
Codifica solo el texto que vivirá dentro de HTML, y guarda en un lugar seguro un original en texto plano. Si necesitas editar el contenido después, edita el original y codifica de nuevo, en vez de decodificar, editar y volver a codificar, lo que invita a errores. Para ejemplos de código largos, considera un bloque de código con el escape que maneje tu editor o plataforma, y usa esta herramienta para fragmentos cortos y arreglos puntuales donde una configuración completa sería excesiva.
Todo funciona en tu navegador. Nada de lo que pegas se sube a ningún servidor, así que puedes codificar fragmentos de proyectos privados, documentación interna y borradores de trabajo sin preocuparte por dónde va el texto.
Herramientas relacionadas
- HTML Entity Encoder Decoder (English version)
- Añadir Números de Línea a un Texto
- Eliminar Líneas Vacías