Codificación de caracteres, charset UTF-8

Codificacion de caracteres - 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?

12 comentarios en “Codificación de caracteres, charset UTF-8

  1. 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.

  2. 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,

    1. 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.

  3. 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 :’)

  4. 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?

    1. 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.

  5. 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?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

Menú

Centro de preferencias de privacidad

Necesarias

Estas cookies són necesarias para el correcto funcionamiento de este sitio web así como sus funcionalidades internas.

PHPSESSID, gdpr[allowed_cookies], gdpr[consent_types]

Promoción

newsletter_leads

Estadísticas

_gat_gtag_UA_6499264_16, _gid, _ga

Otras