Estructura Básica de HTML: Guía Completa con Ejemplos Prácticos

1. Anatomía de un documento HTML

Un archivo HTML estándar se compone de los siguientes bloques:

• <!DOCTYPE ...>: declara el tipo de documento.
• <html>: raíz del árbol DOM.
• <head>: metadatos, enlaces a CSS, scripts, etc.
• <body>: contenido visible para el usuario.

A continuación, el esqueleto mínimo para 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>
  </head>
  <body>
    <!-- Contenido aquí -->
  </body>
</html>

2. HTML4 vs HTML5: Principales diferencias

3. Ejemplos prácticos de estructura HTML

3.1 Página simple con cabecera y pie de página

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi sitio web</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  </head>
  <body>
    <header class="bg-primary text-white p-3">
      <h1 class="h3 mb-0">Bienvenido a mi sitio</h1>
    </header>

    <main class="container my-4">
      <section>
        <h2>Acerca de mí</h2>
        <p>Soy desarrollador web con pasión por HTML, CSS y JavaScript.</p>
      </section>
    </main>

    <footer class="bg-light text-center py-3">
      &copy; 2025 Mi Nombre. Todos los derechos reservados.
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

3.2 Uso de etiquetas semánticas y accesibilidad

<main role="main" class="container">
  <article>
    <header>
      <h1>Título del artículo</h1>
    </header>
    <section aria-labelledby="intro">
      <h2 id="intro">Introducción</h2>
      <p>Texto introductorio con buen contraste y tamaño legible.</p>
    </section>
    <footer>
      <p>Publicado el 13 de noviembre de 2025</p>
    </footer>
  </article>
</main>

4. Buenas prácticas, seguridad y rendimiento

• Declarar el idioma: siempre use lang="es" (u otro idioma) en la etiqueta <html> para mejorar accesibilidad y SEO.
• Meta viewport: esencial para dispositivos móviles (width=device-width, initial-scale=1).
• Encabezados jerárquicos: <h1> solo una vez por página, luego <h2>, <h3>…
• Escapar contenido dinámico: prevenga XSS usando funciones de escape en el servidor (p. ej., htmlspecialchars() en PHP).
• Minimizar el HTML: elimine comentarios y espacios en producción; herramientas como html-minifier pueden automatizarlo.
• Lazy‑loading de imágenes: añada loading="lazy" para ahorrar ancho de banda.
• Integridad de scripts: use integrity y crossorigin en <script> externos para evitar manipulación.

5. Solución de problemas comunes