Etiqueta HTML <body>
La etiqueta <body> contiene el contenido visible de la página. Aprende su función, los reemplazos CSS modernos y los eventos de body.
La etiqueta <body> define el contenido de una página web: todo lo que el visitante realmente ve, como texto, imágenes, enlaces, listas, tablas y formularios. Se coloca dentro del elemento <html>, inmediatamente después del elemento <head>. Un documento HTML solo puede contener una etiqueta <body>.
El papel de <body> en el documento
Todo documento HTML se divide en dos partes dentro del elemento raíz <html>:
- El
<head>contiene metadatos sobre la página: su título, conjunto de caracteres, hojas de estilo enlazadas y scripts. Nada dentro del<head>se renderiza en el área de la página. - El
<body>contiene el contenido renderizado de la página: la parte que el navegador pinta en pantalla.
Por tanto, el <body> es el área de contenido visible. Cuando escribes un encabezado, un párrafo o una imagen que debe aparecer en la página, va dentro del <body>.
Es habitual añadir clases CSS al elemento <body>, lo que permite a desarrolladores y diseñadores apuntar a una página completa fácilmente (por ejemplo, una clase theme-dark que reestiliza todo lo que hay debajo). Aunque estas clases nunca se usen, no causan ningún problema.
Sintaxis
La etiqueta <body> va en pares. El contenido se escribe entre las etiquetas de apertura <body> y de cierre </body>.
Ejemplo de la etiqueta HTML <body>:
Etiqueta HTML <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <body> usada con las propiedades CSS color y line-height:
Ejemplo de la etiqueta HTML <body> con las propiedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: #444444;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>HTML body tag example</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Atributos obsoletos
En HTML antiguo, la etiqueta <body> incluía atributos de presentación que definían los colores de toda la página y la imagen de fondo. Estos están obsoletos en HTML5: no los uses. Cada uno tiene un equivalente en CSS:
| Atributo | Valor | Propósito | Equivalente CSS moderno |
|---|---|---|---|
| bgcolor | color | Color de fondo de la página | background-color |
| text | color | Color de texto predeterminado | color |
| background | URL | Imagen de fondo | background-image |
| link | color | Color de los enlaces no visitados | a:link { color: … } |
| vlink | color | Color de los enlaces visitados | a:visited { color: … } |
| alink | color | Color del enlace activo (al hacer clic) | a:active { color: … } |
La forma con CSS
En lugar de atributos de presentación, aplica estilos al <body> mediante una hoja de estilos. Esto separa el contenido de la presentación y mantiene el marcado limpio:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<style>
body {
background-color: #f5f5f5;
color: #333333;
background-image: url("paper.png");
}
a:link { color: #0645ad; }
a:visited { color: #663399; }
a:active { color: #d04437; }
</style>
</head>
<body>
<p>Styled with CSS instead of deprecated <code><body></code> attributes.</p>
<p><a href="https://www.w3docs.com">A link</a></p>
</body>
</html>La etiqueta <body> también admite los Atributos Globales estándar (class, id, style, lang, etc.) y los Atributos de Evento.
Atributos de evento específicos de body
La mayoría de los atributos de evento (como onclick) se aplican a cualquier elemento, pero algunos son significativos únicamente en <body> porque reaccionan a eventos sobre toda la ventana o el documento:
| Atributo | Se activa cuando |
|---|---|
| onload | La página ha terminado de cargarse (todo el contenido y los recursos). |
| onunload | El usuario navega fuera y la página se descarga. |
| onresize | Se redimensiona la ventana del navegador. |
Ejemplo: ejecutar código una vez que la página esté lista y cada vez que la ventana cambie de tamaño:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body onload="report('loaded')" onresize="report('resized')">
<p id="status">Waiting…</p>
<script>
function report(message) {
document.getElementById("status").textContent = "Window " + message;
}
</script>
</body>
</html>En el código moderno, estos eventos suelen adjuntarse mediante JavaScript, por ejemplo window.addEventListener("load", …), lo que mantiene el comportamiento fuera del marcado.
Accesibilidad
El <body> es la raíz de todo el contenido renderizado, por lo que establece las bases para las tecnologías de asistencia:
- El atributo
langen el elemento<html>(por ejemplolang="en") indica a los lectores de pantalla qué idioma usar al anunciar todo lo que está dentro del<body>. Configurarlo correctamente mejora la pronunciación. - Dado que el
<body>es donde conviven la navegación y el contenido principal, incluye un enlace de salto de navegación como primer elemento enfocable para que los usuarios de teclado y lectores de pantalla puedan ir directamente al contenido principal:
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- site navigation --></nav>
<main id="main">
<h1>Page title</h1>
<p>Main content…</p>
</main>
</body>El enlace de salto suele estar oculto visualmente hasta que recibe el foco del teclado, pero permanece disponible para las tecnologías de asistencia en todo momento.