Estructura del Documento

Etiquetas que forman el esqueleto de cualquier página HTML.

<!DOCTYPE html> Declaración

Declara que el documento usa HTML5. Sin esta línea el navegador puede entrar en Quirks Mode (emulación de bugs de IE6), lo que rompe el modelo de caja moderno y el espaciado CSS. Debe ser la primera línea absoluta del archivo, sin nada antes (ni espacios ni BOM). 

<!DOCTYPE html>
<html lang="es">
  ...
</html>
<html> Raíz

Elemento raíz del documento. El atributo lang es obligatorio para accesibilidad: permite que lectores de pantalla pronuncien el idioma correctamente y que los motores de búsqueda lo indexen. Usa códigos BCP 47: es, es-MX, en-US, pt-BR. 

<html lang="es">
  <head>...</head>
  <body>...</body>
</html>
<head> Metadatos

Contenedor de metadatos invisibles: título, charset, viewport, estilos, scripts, SEO y más. Nada de lo que está aquí se renderiza directamente en la página. El orden importa: charset y viewport deben ir primero. 

<head>
  <title>Mi Página</title>
  <meta charset="UTF-8">
</head>
<body> Contenido

Contiene todo el contenido visible al usuario. Solo puede existir uno por documento. El evento DOMContentLoaded se dispara cuando el parser termina de leer el <body>; load espera además a imágenes y recursos externos. 

<body>
  <h1>¡Hola mundo!</h1>
  <p>Contenido visible</p>
</body>
<title> Metadatos

Aparece en la pestaña del navegador, en marcadores y en resultados de Google. Recomendaciones SEO: 50–60 caracteres, incluye la palabra clave principal. Patrón habitual: Página — Sitio. Cada página debe tener un título único y descriptivo.

Haz clic para ver el efecto en la pestaña
<meta> Metadatos

Elemento vacío (sin cierre) para metadatos del documento. Los más importantes: charset="UTF-8" (obligatorio), name="viewport" (responsive), name="description" (150–160 chars para SEO), name="robots" (noindex, nofollow), name="theme-color" (color de la barra del navegador en móvil). 

<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width">
<meta name="description"
      content="Mi descripción">
<link> Metadatos

Vincula recursos externos. El atributo rel define la relación: stylesheet, icon, canonical (SEO sin duplicados), preload / prefetch / preconnect (optimización de carga), alternate (versiones en otros idiomas). Elemento vacío — sin type para CSS en HTML5. 

<link rel="stylesheet"
      href="styles.css">
<link rel="icon"
      href="favicon.ico">
<base> Metadatos

Establece la URL base y el target por defecto para todos los enlaces relativos del documento. Usar con cuidado: afecta también a los anclajes de fragmento (#seccion), lo que puede romper la navegación interna si no se calcula bien la URL base. 

<base href="https://ejemplo.com/">
<!-- Ahora todos los links
     relativos usan esa base -->
<style> Estilos

Permite incrustar CSS directamente en el documento HTML. Habitualmente se coloca en el <head>, aunque técnicamente puede aparecer en cualquier lugar del documento. El atributo media acepta una media query para aplicar los estilos solo bajo ciertas condiciones. A diferencia de <link rel="stylesheet">, no requiere una petición HTTP adicional, lo que lo hace ideal para CSS crítico de primer render.

Atributos principales mediastringMedia query: aplica los estilos solo si la condición es verdadera (ej. print, (max-width:600px))

La técnica de "Critical CSS" incrusta en un <style> solo los estilos necesarios para el contenido visible al cargar (above-the-fold). El CSS restante se carga de forma asíncrona con <link rel="stylesheet"> para no bloquear el render.

<style>
  body {
    background: #f0f0f0;
    font-family: sans-serif;
  }
</style>
<div> Contenedor

Contenedor genérico de bloque — ocupa todo el ancho disponible y genera un salto de línea. Sin significado semántico. Cuándo no usarlo: si el contenido tiene significado estructural, usa <section>, <article>, <main>, <header>, <nav>, <aside> o <footer>.

<span> Contenedor

Contenedor genérico en línea — fluye dentro del texto, sin salto de línea. Sin valor semántico. Antes de usarlo, pregunta: ¿el texto tiene significado? Usa <strong>, <em>, <mark> o <abbr>. Reserva <span> exclusivamente para aplicar estilos sin añadir semántica.

Texto con span rojo, span amarillo y span subrayado.

Block vs Inline — Playground Interactivo

Los elementos de bloque (div, p, h1…) ocupan todo el ancho y fuerzan salto de línea. Los en línea (span, a, strong…) fluyen dentro del texto sin interrumpirlo. CSS puede cambiar este comportamiento con display.

<div> — bloque inicial
<span> 1 <span> 2 en línea 
/* Bloque: nueva línea, ocupa todo el ancho disponible */
div, p, h1-h6, section, article, ul, ol  →  display: block

/* Línea: fluye dentro del texto */
span, a, strong, em, code, abbr          →  display: inline

/* Se puede cambiar con CSS */
span { display: block; }  /* convierte span en bloque */
div  { display: inline; } /* convierte div en línea */
Atributos globales Atributos

Atributos que pueden aplicarse a cualquier elemento HTML, independientemente del tipo de etiqueta. Se dividen en categorías: identificadores y clases (id, class), internacionalización (lang, dir, translate), accesibilidad (tabindex, hidden), datos personalizados (data-*) e interactividad (contenteditable, draggable, spellcheck). Conocerlos permite controlar el comportamiento de cualquier elemento sin importar su tipo.

idIdentificador único en el documento classLista de clases CSS separadas por espacio langIdioma del contenido del elemento dirltr | rtl | auto — dirección del texto hiddenOculta el elemento semánticamente tabindexOrden de foco con Tab (0 = natural, -1 = solo JS) data-*Datos personalizados accesibles por JS titleTooltip al pasar el cursor translateyes | no — si debe traducirse spellcheckRevisión ortográfica del navegador
SEO esencial en el <head> SEO

El <head> concentra las señales que los motores de búsqueda y las redes sociales usan para indexar, rankear y presentar tu página. Los elementos obligatorios son charset, viewport, title y description. La URL canónica evita penalizaciones por contenido duplicado. Las etiquetas Open Graph controlan la apariencia en Facebook, LinkedIn y WhatsApp. El favicon SVG es la recomendación moderna por ser vectorial y soportar modo oscuro. 

<head>
  <!-- Obligatorios -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página — Sitio</title>
  <meta name="description" content="Descripción 150-160 chars">

  <!-- Canónica (evita duplicados) -->
  <link rel="canonical" href="https://ejemplo.com/pagina">

  <!-- Open Graph (Facebook, LinkedIn…) -->
  <meta property="og:title"  content="Título">
  <meta property="og:image"  content="https://…/thumb.jpg">

  <!-- Twitter Card -->
  <meta name="twitter:card"  content="summary_large_image">

  <!-- Favicon moderno -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
Jerarquía de encabezados Estructura

Los encabezados h1–h6 forman el outline (esquema) del documento. Los lectores de pantalla ofrecen atajos de teclado para saltar entre encabezados del mismo nivel, lo que convierte la jerarquía correcta en una función de navegación crítica. Los motores de búsqueda les otorgan peso semántico, especialmente al h1. La regla principal: no saltar niveles (h1→h3 sin h2 intermedio) y no elegir un nivel de encabezado por su tamaño visual — eso se controla con CSS.

h1 — Título único de la página
h2 — Sección principal
h3 — Subsección
h2 — Otra sección
h3 — Subsección

❌ Evitar: saltar niveles (h1 → h3) o usar encabezados solo por el tamaño visual.