Tienda
0
Alojamiento web cloud Terrassa Sabadell

Definición destacada

¿Como funciona el comando en HTML5: 'body'?

ABCDEFGHIJKLMNOPQRSTUVWXYZLinuxHTML5Dominios
La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra body

Última modificación: 2024-06-16

Descripción Detallada del Elemento <body> en HTML5

El 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.

Atributos del Elemento <body>

  1. 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).

  2. 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.

Uso del Elemento <body> en HTML5

El 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.

Ejemplos Sencillos

  1. 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>.

  2. 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.

  3. 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.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

Contribuye a mejorar esta definición.