Lección 7: Estructura básica de una página HTML

Introducción

Cada página HTML tiene una estructura básica que define cómo se organiza el contenido. Entender esta estructura es fundamental para crear páginas web bien formadas y funcionales.

Elementos principales de una página HTML

Una página HTML típica consta de los siguientes elementos principales:

<!DOCTYPE html>: Declaración del tipo de documento
<html>: El elemento raíz
<head>: Metadatos y información sobre el documento
<body>: El contenido visible de la página

Estructura básica completa

HTML


                    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
</head>
<body>
    <h1>Bienvenido a mi página web</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

Explicación detallada

<!DOCTYPE html>

Esta declaración le dice al navegador que el documento es HTML5. Es necesaria para asegurar que el navegador interprete correctamente el código.

<html lang="es">

El elemento raíz de la página. El atributo lang especifica el idioma del contenido de la página, lo cual es importante para la accesibilidad y el SEO.

<head>

Contiene metadatos sobre el documento. No se muestra en la página, pero es crucial para su funcionamiento.

<meta charset="UTF-8">: Especifica la codificación de caracteres del documento.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Asegura que la página se vea correctamente en dispositivos móviles.
<title>: Define el título de la página que se muestra en la pestaña del navegador.

<body>

Contiene todo el contenido visible de la página, como texto, imágenes, enlaces, etc.

Ejercicio práctico

Crea la estructura básica de una página HTML que incluya:

Una declaración DOCTYPE correcta
Un elemento html con el atributo lang apropiado
Una sección head con un título y las etiquetas meta necesarias
Una sección body con un encabezado h1 y un párrafo

Nota: Para este ejercicio, debes escribir el código manualmente. La función de pegar está deshabilitada para fomentar el aprendizaje activo.