Estructura Ideal de un Documento HTML

< Anterior Siguiente >

Estructura Básica de un Documento HTML

Un documento HTML bien estructurado sigue una jerarquía clara que facilita su interpretación por navegadores, motores de búsqueda y tecnologías de asistencia. Aquí te mostramos la estructura ideal:

1. Declaración del Doctype

La primera línea del documento HTML debe ser la declaración del doctype, que indica al navegador que se trata de un documento HTML5:

<!DOCTYPE html>

2. Elemento `<html>`

El elemento <html> es el contenedor raíz de todo el contenido del documento. Incluye el atributo lang para especificar el idioma del contenido:

<html lang="es">
    ...
</html>

3. Elemento `<head>`

El elemento <head> contiene metadatos sobre el documento, como su título, enlaces a hojas de estilo, y metaetiquetas:

<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="css/editores.css">
</head>

4. Elemento `<body>`

Todo el contenido visible de la página web se coloca dentro del elemento <body>. Aquí es donde se insertan los encabezados, párrafos, imágenes, enlaces, y otros elementos de contenido:

<body>
    <header>
        <!-- Contenido del encabezado -->
    </header>

    <nav>
        <!-- Menú de navegación -->
    </nav>

    <main>
        <!-- Contenido principal de la página -->
    </main>

    <aside>
        <!-- Barra lateral o contenido relacionado -->
    </aside>
</body>

5. Elementos Semánticos

Utiliza elementos semánticos como <header>, <nav>, <main>, <article>, <section>, y <footer> para estructurar el contenido. Esto mejora la accesibilidad y SEO del documento:

<main>
    <article>
        <h1>Título del Artículo</h1>
        <p>Contenido del artículo...</p>
    </article>
</main>