<body> — Frontend Classroom

<body> es el segundo hijo directo de <html> y el contenedor de todo el contenido visible de la página: títulos, párrafos, imágenes, listas, enlaces, formularios, tablas — absolutamente todo lo que el usuario ve y con lo que interactúa vive dentro de <body>. Si <head> es “lo que el navegador necesita saber sobre la página”, <body> es “lo que el usuario ve”.

Cómo funciona

El navegador dibuja en pantalla el contenido que encuentra dentro de <body>, procesándolo en orden de arriba hacia abajo. Cada elemento hijo de <body> ocupa su espacio en el flujo del documento según su tipo (bloque o en línea).

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi página</title>
  </head>
  <body>
    <h1>Título de la página</h1>
    <p>Primer párrafo de contenido.</p>
    <img src="foto.jpg" alt="Una foto" />
  </body>
</html>

En este documento, <h1>, <p> e <img> son hijos directos de <body>. El navegador los renderiza en ese orden.

Un solo `<body>` por documento

Cada documento HTML tiene exactamente un <body>. Si por error escribís dos, el navegador fusiona su contenido en uno solo (el segundo <body> no crea una segunda “zona visible” — el HTML así no funciona).

Atributos

<body> no tiene atributos propios de uso frecuente hoy. En versiones antiguas de HTML existían atributos de presentación como bgcolor (color de fondo), text (color del texto), link (color de los enlaces) y marginwidth/marginheight (márgenes). Todos son legacy: hoy todo eso lo controlás con CSS.

Lo que sí podés encontrar en codebases modernas:

class / id: para aplicar estilos CSS específicos al <body> o hacer referencia desde JavaScript.
data-*: atributos de datos personalizados para JavaScript.

Un patrón común es aplicar una clase al <body> para controlar el tema visual del sitio (modo oscuro, etc.):

<body class="tema-oscuro">
  ...
</body>

Relación con CSS

El <body> es un elemento como cualquier otro desde la perspectiva de CSS. Podés aplicarle estilos directamente:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #f9fafb;
  color: #111827;
}

Muchas propiedades de CSS heredables (como font-family, color, font-size, line-height) se establecen en body para que se propaguen a todos los elementos hijos sin necesidad de repetirlas. Es la base de la cascada CSS.

Los resets de CSS modernos (como el de este sitio) arrancan normalizando body:

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

Ejemplo realista

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recetas de cocina</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <header>
      <h1>Mis recetas</h1>
      <nav>
        <a href="/desayunos">Desayunos</a>
        <a href="/almuerzos">Almuerzos</a>
      </nav>
    </header>

    <main>
      <h2>Recetas destacadas</h2>
      <p>Elegí una categoría para empezar.</p>
    </main>

    <footer>
      <p>© 2026 — Mis recetas</p>
    </footer>
  </body>
</html>

<header>, <main> y <footer> son elementos semánticos hijos directos de <body> que organizan el contenido en zonas con significado.

Notas, gotchas e interacción

El margen por defecto del navegador. La mayoría de los navegadores aplican margin: 8px al <body> por defecto. Esto crea un espacio alrededor del contenido que muchas veces no es el deseado. El reset estándar lo elimina con body { margin: 0; }.
body como punto de referencia para position: fixed: los elementos con position: fixed se posicionan relativo al viewport, no al <body>. Si <body> tiene transform o filter aplicados, position: fixed puede comportarse de forma inesperada (se ancla al <body> en vez del viewport).
JavaScript y document.body: document.body es la referencia en JavaScript al elemento <body>. Es el punto de entrada para agregar, modificar o eliminar contenido de la página desde código.
Todo lo visible va adentro. Si un elemento HTML aparece fuera de <body> (por error), el navegador lo mueve implícitamente al <body> o lo ignora. Siempre escribí el contenido visible dentro de <body>.

Vigente / legacy

<body> es parte de HTML desde las primeras especificaciones y está completamente vigente. Sus atributos de presentación históricos (bgcolor, text, link, vlink, alink, background, marginwidth, marginheight) son todos legacy desde HTML5 — reemplazados completamente por CSS.