El head canónico completo
Este es el resumen de los 6 elementos que todo documento web debería tener en su <head>. El orden importa — seguilo tal como aparece acá:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Café Aroma — café de especialidad en el centro de la ciudad."
/>
<title>Café Aroma</title>
<link rel="stylesheet" href="estilos.css" />
<link rel="icon" href="favicon.ico" />
</head>
<body>
<h1>Bienvenidos a Café Aroma</h1>
</body>
</html>| Elemento | Para qué sirve |
|---|---|
<meta charset="UTF-8"> | Codificación de caracteres — primero en el head |
<meta name="viewport" ...> | Configuración del ancho para móviles |
<meta name="description" ...> | Descripción para buscadores — no visible en la página |
<title> | Texto de la pestaña y del resultado de búsqueda — obligatorio |
<link rel="stylesheet"> | Vincula la hoja de estilos CSS — el puente al Bloque II |
<link rel="icon"> | Define el favicon (ícono de la pestaña) |
Nota sobre el sandbox: el favicon no se muestra en el preview (no hay archivo favicon.ico real), la hoja de estilos no carga (no hay estilos.css), el <title> no cambia la pestaña del navegador (el preview es un iframe), y la description no aparece en la página. El sandbox valida que la estructura y los atributos del marcado sean correctos.
Tu turno: el starter ya tiene el boilerplate del documento completo con los 6 slots comentados. Completá cada uno con el elemento correspondiente. Prestá atención a los valores exactos que pide el enunciado — en especial el content del viewport (sin .0) y el em dash — en la descripción.
El head canónico completo
Configurá el `<head>` de la página de Café Aroma. El sandbox acepta el documento completo (`fullDocument`). Tu documento debe tener: 1. La declaración `<!DOCTYPE html>` y el elemento `<html lang="es">`. 2. Un `<head>` con estos 6 elementos (en este orden): - `<meta charset="UTF-8">` — primero en el head. - `<meta name="viewport" content="width=device-width, initial-scale=1">` — el valor del `content` debe ser **exactamente** ese string. - `<meta name="description" content="Café Aroma — café de especialidad en el centro de la ciudad.">` — el `content` debe ser **exactamente** ese string. - `<title>Café Aroma</title>` — el texto debe ser **exactamente** `Café Aroma`. - `<link rel="stylesheet" href="estilos.css">` — el `href` debe ser **exactamente** `estilos.css`. - `<link rel="icon" href="favicon.ico">` — el `href` debe ser **exactamente** `favicon.ico`. 3. Un `<body>` con al menos un `<h1>`.
Preview