Búsqueda avanzada

Cuál es la estructura básica de un documento HTML5

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

<code class="language-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>
    <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>&copy; 2025 Mi Página Web. Todos los derechos reservados.</p>
    </footer>
</body>
</html>code>

Desglose de la Estructura<code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">code>

  1. <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><!DOCTYPE html>code>: Declara que el documento es un archivo HTML5.
  2. <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><html>code>: La etiqueta <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><html>code> es el elemento raíz del documento. El atributo <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW">langcode> especifica el idioma del contenido (en este caso, español).
  3. <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><head>code>: Contiene metadatos sobre el documento, como el conjunto de caracteres, el título y enlaces a hojas de estilo.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><meta charset="UTF-8">code>: Define la codificación de caracteres del documento.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><meta name="viewport" content="width=device-width, initial-scale=1.0">code>: Asegura que la página se vea bien en dispositivos móviles.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><title>code>: Establece el título de la página que aparece en la pestaña del navegador.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><link rel="stylesheet" href="styles.css">code>: Enlaza una hoja de estilos externa.
  4. <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><body>code>: Contiene el contenido visible de la página.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><header>code>: Sección para encabezados y elementos de navegación.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><main>code>: Contiene el contenido principal de la página.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><section>code>: Secciones dentro del contenido principal.
    • <code class="qlv4I7skMF6Meluz0u8c wZ4JdaHxSAhGy1HoNVja _dJ357tkKXSh_Sup5xdW"><footer>code>: Sección para información de pie de página, como derechos de autor.

 

Valora esta FAQ

∅ 5 (1 voto)

Artículos relacionados