Meta charset e idioma de la página

Nivel: Intro · HTML · Head esencial · 12 minutos

Respuesta corta: declara <meta charset="UTF-8"> al inicio del <head> para que tildes y eñes se vean bien, y <html lang="es"> para indicar que la página está en español (accesibilidad, traducción, buscadores). Sin charset, a menudo aparece el famoso «página».

Es un detalle de dos líneas que evita horas de confusión. Aquí la idea, práctica y ejercicios.

Qué hace cada declaración

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Página con tildes</title>
  </head>
  <body>
    <p>¡Qué fácil se lee el español!</p>
  </body>
</html>

Práctica: provoca el error y corrígelo

1. Quita temporalmente el meta charset, guarda y recarga con tildes en el título.
2. Observa caracteres raros (según el editor/navegador).
3. Vuelve a poner <meta charset="UTF-8"> antes de otros metas y del title.
4. Confirma que el archivo del disco también esté guardado en UTF-8 (VS Code: esquina inferior derecha).

Ejercicios con solución

1. ¿Charset va en body?

No: en el head, lo antes posible.

2. ¿lang="es" arregla las tildes rotas solo?

No: eso es rol del charset (y del archivo UTF-8).

3. Escribe la apertura mínima correcta.

<html lang="es"> + head con meta charset UTF-8.

4. ¿ISO-8859-1 sigue siendo recomendable?

Para cursos nuevos: usa UTF-8.

5. Página bilingüe grande: ¿un solo lang?

El documento tiene un lang principal; tramos en otro idioma pueden usar lang en un elemento hijo.

6. El title dice «Educación». ¿Qué revisas primero?

Meta charset + encoding del archivo al guardar.

Errores frecuentes

• Poner el charset al final del head (demasiado tarde para algunos parsers).
• Guardar el .html en otra codificación mientras declaras UTF-8.
• Olvidar lang y dejar el default ambiguo.

Para seguir: cuando el calendario pase a CSS, estas bases del head ya no te sabotean el contenido en español.