HTML: Estructura de página
HTML 5: Estructura de página. Aprende a crear una estructura de página eficiente y actualizada según las recomendaciones oficiales de HTML 5 en 2024.
En el desarrollo web, la estructura de página en HTML 5 es fundamental para crear documentos bien organizados y accesibles. HTML 5 introduce una serie de elementos semánticos que mejoran la estructura y la legibilidad del código. En este módulo, exploraremos cómo utilizar estos elementos de manera eficiente y acorde a las recomendaciones actuales.
Elementos básicos de la estructura de página
Doctype
El primer paso para definir la estructura de una página HTML 5 es declarar el tipo de documento. Esto se hace con la declaración <!DOCTYPE html>, que informa al navegador que estamos utilizando HTML 5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de estructura de página</title>
</head>
<body>
<!-- El contenido de la página va aquí -->
</body>
</html>
Elemento html
El elemento <html> encapsula todo el contenido de la página. Es importante incluir el atributo lang para especificar el idioma del contenido, lo que mejora la accesibilidad y el SEO.
Elemento head
El elemento <head> contiene metadatos sobre el documento, como el conjunto de caracteres (<meta charset="UTF-8">), la configuración de la ventana gráfica (<meta name="viewport" content="width=device-width, initial-scale=1.0">) y el título de la página (<title>).
Elemento body
El elemento <body> contiene todo el contenido visible de la página. Aquí es donde se incluyen los elementos de encabezado, párrafos, imágenes, enlaces, etc.
Elementos semánticos
HTML 5 introduce varios elementos semánticos que ayudan a estructurar mejor el contenido. A continuación, se describen algunos de los más importantes:
header
El elemento <header> se utiliza para definir un encabezado para un documento o una sección. A menudo contiene logotipos, menús de navegación y otros elementos de introducción.
<header>
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
nav
El elemento <nav> define una sección de navegación. Es útil para agrupar enlaces de navegación importantes.
main
El elemento <main> especifica el contenido principal del documento. Solo debe haber un elemento <main> por página, y no debe estar anidado dentro de otros elementos semánticos como <header>, <footer> o <aside>.
<main>
<h2>Contenido principal</h2>
<p>Este es el contenido principal de la página.</p>
</main>
section
El elemento <section> representa una sección genérica de contenido. Es útil para dividir el contenido en partes lógicas.
article
El elemento <article> se utiliza para contener contenido independiente y auto-contenido, como artículos de blog, comentarios, etc.
footer
El elemento <footer> define un pie de página para un documento o una sección. Suele contener información de contacto, derechos de autor, enlaces a términos de servicio, etc.
<footer>
<p>© 2024 Mi sitio web. Todos los derechos reservados.</p>
</footer>
Ejemplo completo
A continuación, se muestra un ejemplo completo que incorpora todos los elementos discutidos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de estructura de página</title>
</head>
<body>
<header>
<h1>Bienvenido a mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#sobre-mi">Sobre mí</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sección principal</h2>
<p>Este es el contenido principal de la página.</p>
</section>
</main>
<footer>
<p>© 2024 Mi sitio web. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Lecciones de este módulo de HTML
Lecciones de programación del módulo Estructura de página del curso de HTML.
Ejercicios de programación en este módulo de HTML
Evalúa tus conocimientos en Estructura de página con ejercicios de programación Estructura de página de tipo Test, Puzzle, Código y Proyecto con VSCode.