Historia y estructura básica del documento HTML

Conoce el origen de HTML y monta un documento mínimo con head y body bien definidos.

📘 Teoría

Un vistazo rápido a la historia de HTML

De un lenguaje académico a la web moderna.

HTML fue creado por Tim Berners-Lee para enlazar documentos en el CERN. Su simplicidad permitió que la web creciera de forma exponencial.

HTML5 (2014) integró multimedia, formularios avanzados y APIs modernas. Hoy el estándar es vivo y se actualiza continuamente para adaptarse a la evolución de la web.

1991

Nace HTML con etiquetas básicas y enlaces.

2014

HTML5 se convierte en recomendación oficial del W3C.

Hoy

El estándar se mantiene como Living Standard (WHATWG).

Estructura mínima

Lo imprescindible para que tu página sea válida y responsive.

El doctype activa el modo estándar del navegador. Luego se declara el idioma principal con lang.

En el head van metadatos, title y enlaces a estilos. En el body va el contenido visible de la página.

para HTML5.
para accesibilidad y SEO.
para codificación correcta.
para móviles.

Documento mínimo

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola HTML</h1>
    <p>Este es mi primer documento.</p>
  </body>
</html>

Head esencial

Metadatos clave para SEO, UX y rendimiento.

El head describe el documento: título, descripción, iconos y recursos externos.

Incluye estilos y scripts con buenas prácticas: CSS en y JS con defer para no bloquear la carga.

title claro y descriptivo.
meta description con 120–160 caracteres.
preconnect a dominios de fuentes.
script con defer para rendimiento.

Head completo

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Landing de Producto</title>
  <meta name="description" content="Landing para presentar el producto y captar leads." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="styles.css" />
  <script src="app.js" defer></script>
</head>

Atributos globales: base profesional

Estos atributos aparecen en casi cualquier proyecto real.

Atributos globales como `id`, `class`, `title`, `hidden` y `data-*` se pueden usar en la mayoría de etiquetas HTML. Son clave para conectar estructura, estilo y comportamiento.

`id` identifica nodos únicos. `class` agrupa elementos reutilizables. `data-*` guarda metadatos del dominio sin romper la semántica.

Usa nombres consistentes: `card-producto`, `btn-primario`, etc.
No abuses de IDs cuando una class basta.
Evita style inline salvo prototipos rápidos.

id

Identificador único para anclas o selección puntual.

class

Agrupa nodos para estilos y comportamiento compartido.

data-*

Metadatos de negocio para scripts y testing.

Ejemplo práctico

<article id="post-intro" class="card destacado" data-topic="html" data-level="basico" title="Lección de inicio">
  <h2 class="card-title">Estructura HTML</h2>
  <p>Aprende la base del documento web.</p>
  <button hidden>Accion oculta</button>
</article>

Body con jerarquía clara

El contenido visible se organiza con encabezados y bloques simples.

Empieza con un solo h1 y estructura el contenido con h2/h3. Usa párrafos y listas para facilitar lectura.

Antes de entrar en semántica avanzada, domina la jerarquía de contenido.

Jerarquía básica

<body>
  <h1>Guía de inicio</h1>
  <p>Una introducción breve al tema.</p>
  <h2>Pasos</h2>
  <ol>
    <li>Define el objetivo</li>
    <li>Escribe el contenido</li>
    <li>Revisa la estructura</li>
  </ol>
</body>