Teoría
Teoría

La etiqueta meta: la codificación de la página

¡Muy bien! Terminamos de marcar el contenido. Volvamos a <head>.

Otra etiqueta importante que va dentro de <head> es <meta>. Es una etiqueta vacía: no lleva una etiqueta de cierre.

Con <meta> podemos comunicar al navegador, a los buscadores y a otros sistemas distintos datos sobre el sitio, también llamados metadatos: la codificación del texto, la descripción del contenido y más. Para eso usamos distintas combinaciones de atributos y valores. Algunos de sus atributos son charset, content, http-equiv y name.

El atributo charset indica la codificación del texto de la página HTML:

<meta charset="nombre de la codificación">

Conviene indicar siempre la codificación. Si el navegador interpreta los bytes con una codificación distinta, puede mostrar caracteres extraños en lugar del texto correcto.

La codificación que debes usar en tus proyectos es utf-8. Antes se usaban otras, como windows-1252, para textos con caracteres latinos. En este ejercicio simulamos lo que ocurre al interpretar un texto UTF-8 como windows-1252: los acentos se ven mal. Corrige la codificación y verás cómo se recupera el texto.

<meta>, <link>, <title> y otras etiquetas que van en <head> pertenecen a la categoría de contenido de metadatos. No se muestran directamente como contenido de la página: guardan información sobre el documento y definen su relación con otros documentos y sistemas.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="windows-1252"> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <h1>Mi primer sitio web</h1> </header> <main> <nav> Navegación </nav> <section> <p>¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

En la metaetiqueta que está dentro de <head>, cambia la codificación de windows-1252 a utf-8.