Codificación de caracteres, charset UTF-8
El español es un lenguaje que por suerte o por desgracia posee caracteres especiales tales como tildes, ñ, diéresis (ü)…
Esto en HTML es un problema, pues no todo hay forma de mostrarlo más que con entidades HTML (códigos especiales que muestran estos caracteres).
Por ejemplo:
á => á é => é í => í ó => ó ñ = ñ . . . |
Entendiendo la codificación de caracteres; ¿Qué es y para qué sirve?
Una forma de «estandarizar» la visualización de este tipo de caracteres sin tener que escribir constantemente las entidades HTML que las definen (ver ejemplo anterior) es utilizar una codificación de caracteres.
Se entiende por codificación de una página Web a la tabla de caracteres que es utilizada en ella. Una tabla de caracteres es una lista de caracteres válidos; por ejemplo, una página en español necesita disponer de todas las letras del abecedario (incluida la ñ) así como tildes, interrogaciones, exclamaciones y demás caracteres característicos del idioma.
Al declarar una codificación en nuestra página web estamos, por decirlo de alguna manera, diciéndole al navegador cómo debe interpretar esos caracteres especiales que componen el texto; por lo que internamente el navegador hará las sustituciones de los caracteres especiales por las entidades HTML correspondientes de forma automática.
De forma resumida, nos permite escribir con total normalidad en nuestro documento HTML sin preocuparnos de las tildes, interrogaciones y demás caracteres especiales del lenguaje.
¿Cómo se usa en HTML?
Para utilizar una codificación basta con incluir la etiqueta mostrada a continuación en la cabecera de nuestro documento HTML (entre las etiquetas <head> y </head>).
Versión XHTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
Versión HTML5:
<meta charset="UTF-8"/> |
¿Qué requisitos tengo que cumplir?
Requisitos como tal no hay, pero sí una serie de pautas o recomendaciones que hay que tener muy en cuenta:
- Es importante tener la misma codificación en el editor de código que la indicada en el charset del HTML; nuestro editor de código debe guardar los ficheros con la misma codificación que será interpretado nuestro HTML, de lo contrario no se entenderán entre sí y mostrará símbolos raros.
- Utiliza el charset que más se adapte a nuestras necesidades: No es lo mismo una página en Español (de España) que una en inglés o una internacional (aunque esté redactada en Español).
¿Por qué UTF-8?
No voy a tratar de convencer a nadie, pero a todos nos gustaría tener una web «universal» y legible por todos (sean de donde sean). UTF-8 es el sistema de codificación más extendido y con más soporte a lo largo y ancho del mundo; por algo será, ¿no?
No sé quien sos… pero te amo!!!
Soy aficionado a esto, aun no voy a la universidad pero siempre he querido diseño web.
Esto me motiva :3
En fin. Feliz día.
Muchas gracias por la explicación, ¡me sirvió mucho!
Una explicacion util; gracias.
Exelente informacion, breve pero concreta, justo como la buscaba… Gracias.. Saludos.
Excelente explicación, sintética y concisa.
Hola Dario,
Una pregunta… si utilizo UTF-8 es necesario seguir utilizando la codificación tipo: á para tildes en páginas planas html o podría escribir directamente con tilde?
Saludos,
Hola, si guardas tu fichero en formato UTF-8 y al navegador le dices que esa web es UTF-8, podrás escribir normal sin problemas con las tildes.
Muchas muchas gracias por tu ayuda, no sabes lo felíz que ando en estos momentos al poder hacer que mi navegador lea correctamente todo lo que escribo :’)
Hola.
Cuando entro al código fuente de tu página (view-source:https://www.dariobf.com/codificacion-de-caracteres-charset-utf-8/) los caracteres «Ñ» o tildes, me salen correctamente.
En cambio, cuando entro al código fuente de mi página (view-source:https://milviatges.com/2015/que-hacer-y-ver-en-budapest-en-3-dias/) salen siempre «raros». Es decir, «í» etc…
– Hay manera de que el código fuente salga bien (como en tu caso)?
– Afecta esto al posicionamiento en google?
Hola Jordi,
el primer problema que veo en tu código es el lang de la etiqueta HTML. debería ser «es» y no «es-ES».
Sobre los caracteres extraños, deberías mirar cómo guarda el código tu editor. Ya que es posible que lo esté guardando con otro formato que entre en conflicto utf8.
Saludos.
Darío, ¿cómo estás?
Me ayudó mucho este artículo tuyo; ahora bien, se me presentó algo que no lo entiendo, consiste en que dos formularios de contacto idénticos, alojados en el mismo servidor del hosting (de diferentes sitio, claro), arrojan diferentes resultados, uno envía sin errores y el otro envía signos en vez de á, é, í, ú, ¿se te ocurre dónde puedo buscar lo que genera esta diferencia?
Influye cómo está guardado el archivo, asegúrate que es utf8 también.