Elemento body

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento body es el contenedor para todos los aspectos representables de un documento. Este es el lugar donde los autores arrojan todos los elementos y contenidos que sus visitantes alcanzarán. El elemento body es parte de la estructura básica de un documento.

El elemento body poseía varios atributos presentacionales en versiones previas de HTML. Estos atributos han sido desaprobados previamente en favor de las hojas de estilo, y son ahora obsoletos en HTML5. Se recomienda a los autores evitar su uso.

Ejemplos

El siguiente ejemplo muestra la estructura básica de una página web, incluyendo el bloque del cuerpo (body).

<!DOCTYPE html>
<html>
   <head>
      <title>La belleza de la vida</title>
   </head>
   <body>
      <h1>La belleza de la vida</h1>
      <p>Esta mañana me desperté sientiéndome diferente...</p>
   </body>
</html>

Atributos

Atributos específicos

text

El color predeterminado para el texto normal dentro del elemento.

Este atributo ha sido declarado obsoleto en HTML5 por ser de naturaleza enteramente presentacional. Su uso ya no es válido y se recomienda a los autores reemplazarlo con hojas de estilo.

Ejemplo

<body text="#222222">

bgcolor

Un color para rellenar el fondo del elemento.

El atributo bgcolor ha sido removido del estándar HTML5 debido a su naturaleza presentacional. Sus efectos pueden ser perfectamente logrados con hojas de estilo.

Ejemplo

<body bgcolor="#00ccee">

background

El URL de una imagen que será utilizada para cubrir el fondo del elemento.

Este atributo se ha vuelto obsoleto en HTML5 por ser de naturaleza presentacional y su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<body background="imagenes/fondo.png">

link

El color predeterminado del texto en todos los vínculos dentro del elemento.

El atributo link se ha vuelto obsoleto en HTML5 debido a su naturaleza presentacional. Los mismos resultados pueden ser logrados usando hojas de estilo.

Ejemplo

<body link="#0000ff">

vlink

El color por defecto para los vínculos dentro del elemento, que ya han sido visitados.

Este atributo se ha vuelto obsoleto en el estándar HTML5 por ser puramente presentacional. Sus resultados pueden ser fácilmente logrados mediante el uso de declaraciones de hojas de estilo.

Ejemplo

<body vlink="red">

alink

El color por defecto que todos los elementos a contenidos por el elemento tendrán cuando el puntero del mouse se encuentre sobre ellos.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza presentacional y, por lo tanto, su uso ya no es válido. Los autores debería reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<body alink="green">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos específicos

onafterprint

El usuario ha impreso el documento justo ahora.

Ejemplo

<body onafterprint="alert('El documento se ha impreso satisfactoriamente!');">

onbeforeprint

El usuario ha requerido que el documento sea impreso. Este evento es disparado exactamente antes de que el documento se imprima y puede ser utilizado para confirmar, retrasar o cancelar el proceso.

Ejemplo

<body onbeforeprint="alert('El documento está siendo enviado a la impresora!');">

onbeforeunload

El documento está a punto de ser removido o cerrado. Este evento es disparado exactamente antes de que el documento se cierre y puede ser utilizado para confirmar o retrasar el proceso.

Los navegadores habitualmente usarán el valor retornado por la función especificada en este atributo para construir la caja de diálogo que permitirá a los usuarios confirmar o cancelar el cierre del documento.

Ejemplo

<body onbeforeunload="return 'Los cambios realizados al formulario se perderán. Estás seguro que desas irte?';">

onhashchange

La parte del URL que se encuentra después del símbolo numeral ("#") ha cambiado.

La parte del URL que se encuentra después del símbolo numeral ("#") se refiere a una parte o sección del documento enlazado. Gracias a esta característica, los usuarios pueden, por ejemplo, seguir un vínculo directamente hacia una sección del documento.

Ejemplo

<body onhashchange="alert('Actualmente viendo la sección: ' + location.hash);">

onlanguagechange

El lenguaje preferido del usuario ha cambiado.

Ejemplo

<body onlanguagechange="adaptarseAlCambioDeLenguaje(); alert('El lenguaje del documento ha cambiado!');">

onmessage

El documento actual ha recibido un mensaje.

En HTML5, los documentos y los Web Workers tiene la posibilidad de enviarse y recibir mensajes entre sí. Esto abre un canal de comunicación entre documentos que puede ser muy útil en aplicaciones web.

Ejemplo

<body onmessage="alert('Mensaje recibido desde otro documento: ' + event.data);">

onmessageerror

El documento actual ha recibido un mensaje pero ésto no ha podido ser descifrado.

En HTML5, los documentos y los Web Workers tiene la posibilidad de enviarse y recibir mensajes entre sí. Esto abre un canal de comunicación entre documentos que puede ser muy útil en aplicaciones web.

Ejemplo

<body onmessageerror="alert('Ha ocurrido un error durante la recepción de un mensaje')">

onoffline

La conexión a la red se ha perdido.

Este evento puede ser muy útil en aplicaciones web que dependan de la conectividad de la red para funcionar correctamente. Estas aplicaciones pueden tomar medidas para mitigar los problemas causados por la pérdida de la conexión o informar al usuario acerca de tales inconvenientes.

Ejemplo

<body onoffline="alert('La conexión a Internet se ha perdido!');">

ononline

La conexión a la red ha sido reestablecida.

Este evento puede ser muy útil en aplicaciones web que dependan de la conectividad de la red para funcionar correctamente. Estas aplicaciones pueden retomar las operaciones al ser disparado este evento.

Ejemplo

<body ononline="alert('La conexión a Internet ha sido reestablecida!');">

onpagehide

El documento actual ha sido removido del área de visibilidad durante un recorrido por el historial de la sesión (una navegación hacia atrás/adelante).

Ejemplo

<body onpagehide="alert('Te has movido hacia otro documento');">

onpageshow

El documento ha sido mostrado durante un recorrido por el historial de la sesión (una navegación hacia atrás/adelante o una actualización).

Ejemplo

<body onpageshow="alert('Has arribado a este documento del historial de la sesión!');">

onpopstate

Ha ocurrido un cambio de documentos en el historial de la sesión. Este evento es comúnmente disparado por una navegación hacia atrás/adelante.

Ejemplo

<body onpopstate="alert('Te has trasladado de un documento a otro en el historial de la sesión!');">

onrejectionhandled

El rechazo de una promesa previamente desatendida es atendida.

onstorage

La información en el área de almacenamiento web (Web Storage) ha cambiado.

Web Storage es una funcionalidad que ha sido introducida en HTML5 como reemplazo de las cookies. Este sistema permite a los sitios web guardar información en la máquina del visitante y accederla desde cualquier otro documento del mismo sitio. Web Storage supera a las cookies en seguridad, velocidad y capacidad.

Ejemplo

<body onstorage="mostrarInfoAlmacenada();">

onunhandledrejection

El rechazo de una promesa pasa a estar desatendida.

onunload

El documento ha sido removido o cerrado.

Este evento es disparado cuando el documento ya ha comenzado el proceso de cierre, lo que impide demorarlo o pedir confirmaciones. Los autores que intenten prevenir el cierre de un documento deberían considerar utilizar el evento onbeforeunload.

Ejemplo

<body onunload="actualizarAlmacenamiento('Campos no salvados');">

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.

X

Estás buscando un lugar para alojar tu próximo sitio? Puedo ayudarte con eso!