Definir el charset o tipo de codificación de tus páginas

Es posible que al escribir el título de tu web del modo que te he enseñado antes, veas que aparecen carácteres extraños en esa barra superior del navegador. Sobre todo al usar acentos o "eñes". Por qué ocurre esto? Cómo lo evitamos?

Imaginas la cantidad de carácteres extraños que existen? Cosas en hebreo, en chino, o si no las letras rusas esas tan raras, je je je. Para no volver locos a los navegadores tenemos que indicarles qué tipo de codificación vamos a usar en nuestras páginas web. Por ejemplo, para escribir en español o castellano y evitar que aparezcan símbolos raros al escribir los acentos, tenemos que avisar que estamos tratando de escribir en ese idioma. Para que se muestren carácteres chinos y no una ristra de cosas sin sentido (como si el chino tuviera sentido....) tendríamos que avisarle igualmente al navegador que mostrara los carácteres segun esa codificación. Me explico?

Pues bien, para que se muestren correctamente las tildes o acentos que escribamos en el contenido de nuestras páginas, tenemos que añadir una línea que indique ese tipo de codificación. Como eso es algo que no se ve directamente en el navegador, sino que es un tipo de definición, está claro que esa línea de código ha de ir en la cabecera. La línea para que los carácteres en castellano aparezcan bien en los navegadores cuando se escribe código Html5 sería esta:

Esa línea ha de ir en todas las páginas de nuestras webs, o al menos, en las que no hablemos en chino ;=) Colócala siempre sin cambiarle nada, tal cuál está.

Verás que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre (no se pone </meta> al final de la línea). Es un caso un poco especial pues normalmente casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso caso de que una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra al final de la línea de apertura. En este caso la puedes ver al final del código que he colocado antes. Te la he señalado en rojo para destacarla. Otra etiqueta que no tiene etiqueta de cierre es la de imagen, que veremos enseguida.

Ahora que tenemos claro que el código Html va a tener una codificiación del tipo UTF-8, hemos de asegurarnos de que cada vez que guardamos un archivo de código, ha de guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se guardara con otra codificación, podríamos tener los problemas comentados atrás, como que los acentos aparezcan raros, etc. Visita la sección Editores de Texto Plano de nuevo para leer cómo se elige la codificación antes de guardar un archivo, oki? Especialmente si usas el Block de Notas o Notepad. Creo que el Sublime Text reconoce automáticamente la codificación y no necesita que le digas nada.

Y este es el código que llevamos hecho por el momento en este tutorial y que conocemos ya perfectamente, línea a línea!

<!DOCTYPE html>
<html lang="es">
    <head>
       <meta charset="utf-8" />
       <title>Título de esta página</title>
    </head>
    <body>
    </body>
</html>

Por último y antes de seguir añadiendo líneas y líneas de código Html5 a nuestros ejemplos, recuerda que la línea que especifica el charset="utf-8" tiene que ser la primera línea que haya justo después de <head>, oki? En caso contrario podria no ser leida por los navegadores. (Debe estar dentro de los primeros 512 carácteres del archivo).

Y tras estas últimas páginas que han sido un poco rollo, vamos a ver cosas más vistosas, vale?