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 atributolang
especifica 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.