Curso de HTML
Construye la estructura de la web.
Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.
Dentro de head viven etiquetas que no se ven en pantalla pero que definen cómo se comporta y se encuentra tu página: los metadatos.
Explicación
Estas son las etiquetas de metadatos más comunes dentro de head:
<meta charset="UTF-8">Define la codificación de caracteres. Sin ella, tildes y la ñ pueden verse como símbolos raros.
<title>El texto que aparece en la pestaña del navegador y en los resultados de buscadores. No es un encabezado visible en la página.
<meta name="viewport" ...>Indica al navegador móvil que ajuste el ancho de la página al del dispositivo, en vez de mostrar una versión de escritorio reducida.
<meta name="description" ...>Un resumen breve de la página que los buscadores suelen mostrar debajo del título en los resultados de búsqueda.
<link rel="stylesheet" ...>Conecta un archivo CSS externo a la página. Lo verás en detalle en el curso de CSS.
Reto rápido
A este documento le faltan meta charset y viewport. Agrégalos dentro de head, y escribe una meta description con un resumen de una página inventada.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
El viewport es obligatorio en cualquier página moderna: sin él, tu diseño se verá diminuto en pantallas de celular.
Dato extra
El texto de meta description no mejora el posicionamiento en buscadores por sí solo, pero sí influye en si alguien hace clic en tu resultado, porque es lo primero que lee después del título.
Error común
Olvidar meta charset (los acentos se rompen), o escribir mal el nombre del atributo (por ejemplo "unicode" en vez de "UTF-8").
Siguiente paso
Terminaste el módulo de estructura del documento. El siguiente módulo se enfoca en el contenido de texto: títulos, párrafos y formato.
Ir a la siguiente lección