Estructura del documento

25 min

Principiante

Una página no es solo lo que vemos

Una página HTML contiene información que el visitante ve, y otra información que solo necesita el navegador: configuración del documento, título de la pestaña, etc.

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
    ...
</body>
</html>

<!DOCTYPE html> le dice al navegador "esto es HTML moderno" — va siempre primero, sin excepción.
<html> envuelve todo el documento.
<head> contiene información que el navegador necesita pero que no se ve como contenido de la página (el título de la pestaña, por ejemplo).
<body> contiene todo el contenido visible: títulos, párrafos, imágenes, lo que sea que el visitante vea.

El título de la pestaña

El elemento <title>, dentro de <head>, indica el título del documento — el que aparece en la pestaña del navegador. No es lo mismo que un <h1>, que es el título principal visible dentro de la página:

<head>
    <title>Computación.uy</title>
</head>
<body>
    <h1>Bienvenidos</h1>
</body>

Acá la pestaña del navegador va a decir "Computación.uy", pero dentro de la página lo que el visitante va a leer como título principal es "Bienvenidos". Son dos cosas distintas, que suelen decir cosas parecidas pero no tienen por qué ser idénticas.

Ordená la estructura

Arrastrá (o usá las flechas ▲▼) para poner estas líneas en el orden correcto de un documento HTML válido.

Encontrá el error

Responde estas preguntas para verificar tu comprensión.

Pregunta 1

Este documento tiene un error de estructura:

<!DOCTYPE html>
<html>
<body>
<head>
    <title>Mi página</title>
</head>
<h1>Hola</h1>
</body>
</html>

¿Cuál es el problema?

El <head> está después del <body>, en el orden equivocado Falta el DOCTYPE El <title> no puede ir dentro de <head>