Tildes y acentos en HTML
Si alguna vez has visto caracteres extraños como “España” en lugar de “España” en una página web, es probable que haya un problema con la codificación de caracteres. En HTML, las tildes, acentos y otros caracteres especiales pueden no mostrarse correctamente si no se manejan bien.
En esta guía, te explicaré cómo poner tildes en HTML de manera correcta usando diferentes métodos, como entidades de caracteres, codificación UTF-8 y buenas prácticas para evitar errores. También te mostraré qué opción elegir dependiendo del contexto en el que estés trabajando.
Qué es la codificación de caracteres
Aunque parezca que te quiero soltar un tostón que no viene a cuento, dame un minuto para explicarte la importancia de la codificación de caracteres.
La codificación de caracteres es el sistema que permite representar letras, números y símbolos en una página web. En el caso de las tildes, acentos y la letra ñ, si la codificación no es la correcta, el navegador no podrá interpretarlas bien y mostrará caracteres extraños.
Los dos sistemas más utilizados en HTML son:
- UTF-8: Soporta prácticamente todos los caracteres de cualquier idioma y es el estándar recomendado.
- ISO-8859-1: Fue popular en páginas en español, pero está en desuso porque tiene menos compatibilidad con caracteres especiales.
Para evitar problemas con las tildes y otros caracteres, siempre debes declarar la codificación en la cabecera de tu archivo HTML con la etiqueta <meta>.
<meta charset="UTF-8"> indica al navegador que use UTF-8, lo cual garantiza que las tildes, la ñ y otros caracteres especiales se muestren correctamente.
Tildes, acentos y otros caracteres especiales en HTML
Si por alguna razón no puedes usar UTF-8 (que a veces pasa) o necesitas asegurarte de que los caracteres especiales se muestran correctamente en cualquier navegador, puedes recurrir a las entidades de caracteres en HTML. Estas son códigos especiales que representan símbolos o letras con tildes, evitando problemas de codificación.
Para ello, aquí tienes una tabla con las entidades más utilizadas para vocales con tilde y la letra ñ en HTML:
| Carácter | Entidad HTML | Código ASCII |
|---|---|---|
| á | á | á |
| é | é | é |
| í | í | í |
| ó | ó | ó |
| ú | ú | ú |
| ñ | ñ | ñ |
| Ñ | Ñ | Ñ |
Para comprender esto mejor, vamos a ver un par de ejemplos
Escribir Ñ HTML
Ejemplo de código
<p>La capital de España es Madrid.</p>Resultado
La capital de España es Madrid.
Poner acentos HTML
Ejemplo de código
<p>Haz clic aquí.</p>Resultado
Haz clic aquí.
Cómo evitar problemas de codificación
- Siempre usa UTF-8: es el estándar actual y evita la mayoría de los problemas.
- Guarda los archivos correctamente: al guardar archivos HTML, asegúrate de que el editor de texto los guarde en UTF-8.
- Evita copiar texto de fuentes externas sin revisar: si copias y pegas desde Word o Google Docs, revisa que no haya caracteres extraños.
- Verifica la codificación del servidor: asegúrate de que tu servidor también esté configurado para servir contenido en UTF-8.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!