Tema 2 · Fundamentos

Estructura Básica y Doctype

Comprende el esqueleto indispensable de cualquier página web: <!DOCTYPE html>, la etiqueta raíz <html>, la cabecera <head> y el cuerpo <body>.

Introducción a HTML5 y la Web Elementos, Etiquetas y Atributos

El Esqueleto de un Documento HTML5

Todo documento web válido en HTML5 debe seguir una estructura estricta y ordenada. Aunque los navegadores son tolerantes con errores menores, omitir las etiquetas fundamentales puede provocar problemas graves de compatibilidad, renderizado y posicionamiento SEO. 

<!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>
    <h1>Contenido Visible</h1>
    <p>Párrafo de texto en la web.</p>
  </body>
</html>
Diagrama Técnico: El Árbol del Documento (DOM) en HTML5

Diagrama 2.1: Jerarquía del DOM: Nodo raíz document, ramas head y body, y relaciones parent-child.

Desglose de las Etiquetas Principales

Etiqueta / Declaración Función Principal
<!DOCTYPE html> Declaración del tipo de documento: No es una etiqueta HTML, sino una instrucción para el navegador. Informa que la página está escrita en HTML5 y activa el modo estándar de renderizado (evitando el quirks mode o modo de compatibilidad retroactivo). No distingue entre mayúsculas y minúsculas.
<html lang="es"> Elemento raíz: Contiene todo el código del documento. El atributo lang="es" especifica el idioma del contenido (en este caso español), lo cual es crítico para lectores de pantalla de personas con discapacidad visual y motores de búsqueda.
<head> Cabecera técnica del documento: Contiene metadatos, el título que aparece en la pestaña del navegador, enlaces a hojas de estilo CSS, fuentes web y scripts. Nada de lo colocado directamente en el <head> se visualiza en el lienzo de la página.
<meta charset="UTF-8"> Especifica el conjunto de caracteres UTF-8, que incluye tildes, la letra eñe (ñ), caracteres especiales y emojis sin que aparezcan símbolos corruptos.
<meta name="viewport" ...> Indispensable para el diseño web responsivo. Indica a los teléfonos móviles y tabletas que adapten el ancho del sitio al tamaño de la pantalla física del dispositivo.
<title> Define el título de la pestaña del navegador, el nombre al guardar en marcadores y el título mostrado en los resultados de Google.
<body> Cuerpo visible: Contiene todo lo que el usuario ve e interactúa: textos, imágenes, videos, tablas, botones, formularios y menús.

Regla de Oro: Minúsculas e Indentación

El estándar HTML5 no es sensible a mayúsculas/minúsculas (es decir, <P> y <p> funcionan igual), pero el W3C y las guías de estilo internacionales exigen escribir siempre las etiquetas y nombres de atributos en estricta minúscula por legibilidad y consistencia profesional.

⚡ Plantilla Completa de un Documento Web

Comprueba la estructura de un documento HTML5 completo con cabecera configurada y cuerpo formateado:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Primer Sitio Web Estructurado</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f8fafc;
      color: #334155;
    }
    header {
      background: #1e293b;
      color: #ffffff;
      padding: 16px 24px;
      border-radius: 8px;
    }
    main {
      background: #ffffff;
      padding: 24px;
      margin-top: 16px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
    }
    footer {
      margin-top: 20px;
      text-align: center;
      font-size: 0.85rem;
      color: #64748b;
    }
  </style>
</head>
<body>

  <header>
    <h2 style="margin: 0;">Kilopolis Academia</h2>
    <small>Aprende Desarrollo Web Moderno</small>
  </header>

  <main>
    <h1>Estructura HTML5 en Acción</h1>
    <p>
      Este documento contiene todos los elementos esenciales: una declaración <code>&lt;!DOCTYPE html&gt;</code>, una cabecera técnica con metadatos UTF-8 y un cuerpo dividido en encabezado, contenido principal y pie de página.
    </p>
    <p>
      ¡Prueba a cambiar el texto del encabezado o el contenido del párrafo para practicar!
    </p>
  </main>

  <footer>
    &copy; 2026 Kilopolis Academia · Todos los derechos reservados.
  </footer>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.