La estructura básica de un documento HTML es fundamental para crear páginas web. Veamos en el caso de HTML5 cuáles son los elementos principales.
Ejemplo de un documento HTML5
<!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>
<link rel="stylesheet" href="styles.css"> <!-- Enlace a una hoja de estilos -->
</head>
<body>
<header>
<h1>Bienvenido a mi Página Web</h1>
</header>
<main>
<section>
<h2>Sección 1</h2>
<p>Este es un párrafo de ejemplo en la primera sección.</p>
</section>
<section>
<h2>Sección 2</h2>
<p>Este es un párrafo de ejemplo en la segunda sección.</p>
</section>
</main>
<footer>
<p>© 2025 Mi Página Web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Desglose de la Estructura
<!DOCTYPE html>: Declara que el documento es un archivo HTML5.<html>: La etiqueta<html>es el elemento raíz del documento. El atributolangespecifica el idioma del contenido (en este caso, español).<head>: Contiene metadatos sobre el documento, como el conjunto de caracteres, el título y enlaces a hojas de estilo.<meta charset="UTF-8">: Define 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 bien en dispositivos móviles.<title>: Establece el título de la página que aparece en la pestaña del navegador.<link rel="stylesheet" href="styles.css">: Enlaza una hoja de estilos externa.
<body>: Contiene el contenido visible de la página.<header>: Sección para encabezados y elementos de navegación.<main>: Contiene el contenido principal de la página.<section>: Secciones dentro del contenido principal.<footer>: Sección para información de pie de página, como derechos de autor.