<body> en HTML5El elemento <body> es uno de los elementos más fundamentales en HTML y HTML5. Representa el contenido principal del documento HTML y contiene todos los elementos que se mostrarán en el navegador, exceptuando el contenido de la etiqueta <head> que incluye metadatos , enlaces a estilos y scripts, entre otros.
<body>Globales: Los atributos globales son aplicables a todos los elementos HTML y ofrecen una gran versatilidad. Aquí algunos de los importantes:
class: Define una o más clases CSS asociadas al elemento.id: Un identificador único para el elemento, utilizado por CSS y JavaScript.style: Especifica el estilo en línea para el elemento.title: Proporciona información adicional sobre el elemento y se muestra como un tooltip (ayuda emergente).Específicos del elemento <body> (en HTML5):
onload: Define un script que se ejecutará cuando se haya cargado la página.onunload: Define un script que se ejecutará cuando se haya descargado la página.onafterprint: Define un script que se ejecutará después de que el documento se haya impreso.onbeforeprint: Define un script que se ejecutará antes de que el documento se imprima.onbeforeunload: Define un script que se ejecutará antes de que el documento se descargue.onhashchange: Define un script que se ejecutará cuando haya un cambio en la parte 'hash' de la URL.onlanguagechange: Define un script que se ejecutará cuando haya un cambio en el idioma del documento.onmessage: Define un script que se ejecutará cuando el documento recibe un mensaje a través del objeto window.postMessage.onoffline: Define un script que se ejecutará cuando el navegador entre en un estado off-line.ononline: Define un script que se ejecutará cuando el navegador entre en un estado on-line.onpopstate: Define un script que se ejecutará cuando el historial de navegación cambie.onrejectionhandled: Define un script que se ejecutará cuando una promesa de JavaScript sea rechazada.onstorage: Define un script que se ejecutará cuando se actualice el almacenamiento web.onunhandledrejection: Define un script que se ejecutará cuando una promesa de JavaScript sea rechazada sin gestionar.<body> en HTML5El uso principal del <body> en HTML5 es contener el contenido visible de la página web. Dentro del <body>, se incluye todo lo que se quiere mostrar en la pantalla del navegador, como texto, imágenes, enlaces, tablas, formularios, scripts y otros elementos interactivos.
Ejemplo Básico:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Básico</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Este es un ejemplo simple de una página HTML.</p>
</body>
</html>En este ejemplo, el contenido visual de la página se encuentra dentro del <body>.
Ejemplo con Atributos Específicos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo con Eventos</title>
<script>
function onLoadFunction() {
alert("La página ha cargado!");
}
function onUnloadFunction() {
alert("Estás saliendo de la página!");
}
</script>
</head>
<body onload="onLoadFunction()" onunload="onUnloadFunction()">
<h1>¡Hola Mundo!</h1>
<p>Se ejecutará una alerta al cargar y descargar la página.</p>
</body>
</html>En este ejemplo, se utilizan los atributos onload y onunload para ejecutar funciones JavaScript al cargar y descargar la página.
Ejemplo con Interactividad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactividad con Promesas</title>
<script>
window.addEventListener('unhandledrejection', function(event) {
console.warn('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ').');
});
function triggerPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => reject('Promesa rechazada!'), 1000);
});
}
</script>
</head>
<body>
<h1>Promesas en JavaScript</h1>
<button onclick="triggerPromise()">Rechazar Promesa</button>
</body>
</html>Este ejemplo demuestra el uso del atributo onunhandledrejection para manejar las promesas de JavaScript no controladas.
El elemento <body> es esencial en cualquier documento HTML, ya que sin él, el contenido visible no se renderizaría apropiadamente en el navegador, lo cual infringe las buenas prácticas y la estructura semántica recomendada en HTML.