Apuntes html

HTML nunca falla, solo se ve raro.

Internacionalización - ASCII, Unicode y Entidades HTML

Cuando escribes texto en tu página web, como café, niño, o incluso -horror- emojis (🌍), quieres que se vea correctamente en cualquier navegador, idioma, o país. Pero a veces, los caracteres especiales aparecen como � o ¿.
Esto ocurre porque las computadoras usan códigos para representar letras, y no todos los sistemas entienden los mismos códigos.
En esta lección aprenderás cómo ASCII, Unicode, y UTF-8 resuelven este problema, y cómo usar entidades HTML (como á para á) para garantizar que tu texto se muestre correctamente en todo el mundo, incluso en navegadores antiguos o sistemas que no soportan Unicode.

El problema de los caracteres

En los inicios de la informática, dominada por el mundo anglosajón, los ordenadores usaban un sistema de caracteres diseñado para el inglés: ASCII. Esto incluía letras a-z, números 0-9, y símbolos como ! o @, pero no incluía caracteres de otros idiomas, como acentos o carácteres propiosá, ñ, o kanji (日本語). Como resultado, las páginas web podían mostrar errores si incluían texto en español, francés, o chino.

Hoy, gracias a Unicode y UTF-8, podemos escribir casi cualquier carácter directamente en HTML, pero necesitamos configurar nuestra página correctamente y, en algunos casos, usar entidades HTML para máxima compatibilidad.

ASCII: El primer estándar

ASCII (American Standard Code for Information Interchange) usa 7 bits para definir 128 caracteres:

  • Códigos 0-31 y 127: Controles (no visibles, como "enter").
  • Códigos 32-126: Caracteres visibles, como A (65), a (97), 0 (48), y ! (33).

Ejemplo: El espacio (código 32) se escribe pulsando la barra espaciadora o (en algunos sistemas) con Alt+32.

Limitación: ASCII no incluye á, ñ, €, ni caracteres de lenguas no inglesas, lo que lo hacía insuficiente para la web global.

ISO 8859: Un paso intermedio

En los años 80, se creó ISO 8859 (o Latin-x), un estándar de 8 bits que amplía ASCII a 256 caracteres. Las primeras 128 posiciones son idénticas a ASCII, y las 128 adicionales incluyen caracteres para idiomas específicos, como á, ñ, ç en Latin-1 (Europa Occidental).

Uso en HTML: Hasta HTML 3.2, Latin-1 era el estándar por defecto. Sin embargo, ISO 8859 no cubría lenguas asiáticas ni ideogramas, y los caracteres de 160-255 (como á) podían fallar en navegadores o sistemas no configurados para Latin-1.

Unicode y UTF-8: La solución global

Unicode es un estándar que asigna códigos a más de 140,000 caracteres, incluyendo letras, símbolos, emojis, y escrituras de casi todos los idiomas (español, chino, árabe, etc.). Usa hasta 16 bits, permitiendo miles de caracteres. Por ejemplo:

  • á = U+00E1.
  • ñ = U+00F1.
  • 🌍 = U+1F30D.

UTF-8 es la forma de codificar Unicode en archivos web. Es:

  • Compatible con ASCII: Los primeros 128 caracteres son idénticos.
  • Universal: Soporta cualquier carácter Unicode.
  • Estándar en HTML: Desde HTML 4.0, UTF-8 es recomendado.

Para asegurarnos de que el navegador interpreta tu página como UTF-8, incluye en su <head>:

<meta charset="UTF-8">

Esto le dice al navegador que interprete el texto como UTF-8, asegurando que café, 抹茶, o € se muestren correctamente.

Entidades HTML para máxima compatibilidad

Aunque UTF-8 permite escribir caracteres directamente (como á), en algunos casos es mejor usar entidades HTML para garantizar que el texto se vea bien en cualquier navegador o sistema. Las entidades son códigos que representan caracteres, y hay dos tipos:

  • Por nombre (mnemotécnico): Por ejemplo, &aacute; para á.
  • Por número: Por ejemplo, &321; (o &#321;) (decimal) o &#xE1; (hexadecimal).

Escapando entidades

En HTML, el carácter & marca el inicio de una entidad, por lo que debe escaparse como&amp; si quieres mostrarlo literalmente. Por ejemplo:

  • Para mostrar la entidad que representa la á, escribe &aacute;.
  • Para mostrar literalmente la entidad &, escribe &amp;.
  • lo mismo si quieres mostrar < o >, usa &lt; y &gt;.

Esto es crucial para explicar entidades (o explicar HTML !) sin que el navegador las interprete.

Caracteres reservados

Cuatro caracteres están reservados en HTML porque tienen funciones especiales:

  • <: Inicio de etiqueta.
  • >: Fin de etiqueta.
  • &: Inicio de entidad.
  • ": Delimitador de atributos.

Siempre usa entidades para estos caracteres si quieres mostrarlos como texto. Ejemplo:

<p>El código HTML usa &lt; y &gt; para etiquetas.</p>

Resultado: El código HTML usa < y > para etiquetas.

En resumen: Para caracteres como á, €, o ©, puedes escribirlos directamente con UTF-8, pero usar entities es útil:

  • En sistemas antiguos (no UTF-8).
  • Para máxima compatibilidad global.
  • Para símbolos poco comunes.

Algunos Ejemplos comunes:

Carácter - Entidad por nombre - Descripción
< &lt; Menor que
> &gt; Mayor que
& &amp; Ampersand
" &quote; Comillas
á &aacute; A acentuada
ñ &ntilde; Eñe
€ &euro; Euro
© &copy; Copyright
™ &trade; Marca
— &mdash; Guión largo

Usando caracteres en HTML

Con <meta charset="UTF-8">, puedes escribir la mayoría de los caracteres directamente:

<p>Mi café favorito está en Niña Street.</p>

Si necesitas máxima compatibilidad o trabajas con codificaciones antiguas, usa entidades:

&lt;p&gt;Mi caf&amp;eacute; favorito est&amp;aacute; en Ni&amp;ntilde;a Street.&lt;/p&gt;

Ambos producen: Mi café favorito está en Niña Street.

Guardando y subiendo archivos

Para que los caracteres se muestren correctamente:

Guarda en UTF-8: En tu editor selecciona "UTF-8" al guardar el archivo. Verifica en la configuración que sea el modo predeterminado.

Declara UTF-8: Incluye siempre:

<meta charset="UTF-8">

en el <head>.

Sube en modo binario: Usa herramientas como FileZilla o SFTP para subir archivos HTML e imágenes en modo binario, evitando corrupciones (ver lección de rutas).

Ejemplo completo

Aquí tienes una página que combina texto multilingüe, emojis, y entidades HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi café internacional</title>
</head>
<body>
  <!-- Título con caracteres especiales -->
  <h1>Mi café internacional ☕</h1>

  <p>Bienvenidos a nuestro café, donde servimos especialidades de todo el mundo:</p>

  <!-- Texto multilingüe -->
  <p>España: Café con leche y tortilla de patatas.</p>
  <p>Francia: Crème brûlée y croissants.</p>
  <p>Japón: 抹茶 (té matcha) y mochi.</p>

  <!-- Entidades HTML -->
  <p>Contacto: info@mi-caf&eacute;.com &copy; 2025.</p>

  <!-- Lista con símbolos -->
  <h2>Símbolos especiales</h2>
  <ul>
    <li>Euro: &euro; (&#8364;)</li>
    <li>Marca: &trade; (&#8482;)</li>
    <li>Guión largo: &mdash; (&#8212;)</li>
  </ul>

</body>
</html>

Instrucciones:

  • Guarda como cafe.html en UTF-8 (en VS Code: "Archivo" → "Guardar como" → selecciona UTF-8).
  • Abre en un navegador para verificar que los caracteres (á, 抹茶, €) se vean bien.
  • Sube al servidor en modo binario (ver lección de rutas).

Consejos para evitar problemas

  1. Prueba tu página: Abre el HTML en diferentes navegadores para confirmar que los caracteres se ven bien.
  2. Evita caracteres en rutas: No uses á, ñ, o espacios en nombres de archivo (mi café.html → mi-cafe.html) para evitar errores en servidores.
  3. Cuidado con codificaciones antiguas: Evita ISO 8859-1 o Windows-1252, que limitan los caracteres.
  4. Editores modernos: Usa VS Code, Sublime Text, o Notepad++, que soportan UTF-8 y convierten entidades si lo necesitas.

Recapitulación

En este tema hemos aprendido:

  • Por qué los caracteres especiales (á, ñ, €) necesitan codificación adecuada.
  • ASCII: Limitado al inglés, 128 caracteres.
  • ISO 8859: Amplía a 256 caracteres, pero insuficiente para la web global.
  • Unicode y UTF-8: Soporta casi todos los idiomas, estándar en HTML con <meta charset="UTF-8">.
  • Entidades HTML.
  • Guardar y subir archivos en UTF-8 para evitar errores.

En la próxima lección, exploraremos cómo conectar páginas con rutas y enlaces.

TOP