Etiqueta body en HTML

Uno de los elementos fundamentales que conforman la estructura de una página web es la etiqueta <body> de HTML5.

En este artículo, exploraremos en profundidad la etiqueta <body> de HTML5, su función y sus atributos, así como su relación con otros elementos HTML, como las etiquetas semánticas, CSS y JavaScript.

Ya seas un principiante en el desarrollo web o un desarrollador experimentado, este artículo te proporcionará información valiosa y consejos útiles para aprovechar al máximo la etiqueta <body> en tus proyectos web. ¡Comencemos!

¿Qué es etiqueta <body> en HTML?

La etiqueta <body> es un elemento esencial en un documento HTML que define el área donde se coloca todo el contenido visible de la página web.

Es un contenedor que alberga texto, imágenes, enlaces, multimedia, formularios y otros elementos HTML que los visitantes pueden ver y con los que pueden interactuar.

La etiqueta <body> se encuentra dentro de la etiqueta <html> y sigue a la etiqueta <head> en la estructura de un documento HTML.

En términos simples, la etiqueta <body> es el “esqueleto” de una página web, y su contenido conforma la “carne” que le da forma y propósito. Los navegadores web utilizan la información contenida dentro de la etiqueta <body> para renderizar y mostrar el contenido de una página web a los usuarios.

Ejemplo de uso

Aquí tienes un ejemplo básico de cómo se ve la etiqueta <body> en un documento HTML:

Aquí hay un ejemplo de código HTML5 que muestra cómo usar la etiqueta <body>:


<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mi página web</title>
  </head>
  <body>
    <header>
      <h1>Bienvenido a Mi Página Web</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#sección1">Sección 1</a></li>
        <li><a href="#sección2">Sección 2</a></li>
        <li><a href="#sección3">Sección 3</a></li>
      </ul>
    </nav>
    <main>
      <section id="sección1">
        <h2>Sección 1</h2>
        <p>Contenido de la Sección 1</p>
      </section>
      <section id="sección2">
        <h2>Sección 2</h2>
        <p>Contenido de la Sección 2</p>
      </section>
      <section id="sección3">
        <h2>Sección 3</h2>
        <p>Contenido de la Sección 3</p>
      </section>
    </main>
    <footer>
      <p>Copyright &copy; 2021 - Mi Página Web</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la sección <body> contiene un encabezado, una barra de navegación, una sección principal y un pie de página. Todo el contenido que se muestra en la página web se encuentra dentro de la sección <body>.

Atributos de la etiqueta <body

Aunque la etiqueta <body> no tiene atributos específicos en HTML5, hay algunos atributos globales que son aplicables y comúnmente utilizados en este elemento, como id y class.

Estos atributos son útiles para asignar identificadores únicos o clases de estilo a la etiqueta <body>, lo que permite aplicar estilos CSS y manipular el contenido con JavaScript de manera más efectiva.

A continuación, se describen los atributos id y class y cómo utilizarlos con la etiqueta <body>:

Atributo `id`

El atributo id se utiliza para asignar un identificador único a un elemento HTML, incluida la etiqueta <body>. El valor del atributo id debe ser único dentro del documento HTML y puede utilizarse para aplicar estilos CSS específicos o para seleccionar y manipular el elemento con JavaScript.

Ejemplo de uso del atributo id en la etiqueta <body>:


<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #mi-pagina {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body id="mi-pagina">
  <!-- Contenido de la página -->
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se asigna el identificador único “mi-pagina” al elemento <body> utilizando el atributo id. Luego, se aplica un estilo CSS específico al elemento con ese identificador, cambiando el color de fondo y la fuente de todo el contenido dentro de la etiqueta <body>.

Atributo `class`

El atributo class se utiliza para asignar una o más clases de estilo a un elemento HTML, incluida la etiqueta <body>.

Las clases de estilo permiten aplicar estilos CSS a múltiples elementos que comparten la misma clase, lo que facilita la aplicación de estilos consistentes en todo el sitio web.

Ejemplo de uso del atributo class en la etiqueta <body>:


<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .tema-oscuro {
      background-color: #333;
      color: #fff;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body class="tema-oscuro">
  <!-- Contenido de la página -->
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se asigna la clase de estilo “tema-oscuro” al elemento <body> utilizando el atributo class. Luego, se aplica un estilo CSS a todos los elementos con esa clase, cambiando el color de fondo, el color del texto y la fuente de todo el contenido dentro de la etiqueta <body>.

NOTA: Al comprender cómo utilizar estos atributos en la etiqueta <body>, puedes personalizar y controlar fácilmente el aspecto y la funcionalidad de una página web en función de tus necesidades de diseño y desarrollo.

Atributos de eventos de la etiqueta <body>

La etiqueta <body> de HTML5 admite varios eventos que permiten a los desarrolladores ejecutar código JavaScript en respuesta a ciertas acciones del navegador o del usuario

onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload

A continuación, se describen los eventos mencionados junto con sus definiciones y ejemplos de funcionamiento:

onafterprint

El evento onafterprint se activa después de que un documento ha sido enviado a la cola de impresión. Este evento puede utilizarse para realizar acciones, como revertir los cambios realizados para la impresión o mostrar mensajes.

Ejemplo:


<body onafterprint="alert('El documento se ha enviado a la cola de impresión.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onbeforeprint

El evento onbeforeprint se activa antes de que un documento se envíe a la cola de impresión. Puede utilizarse para realizar acciones, como ajustar el estilo del documento para la impresión.

Ejemplo:


<body onbeforeprint="alert('Preparando el documento para imprimir...')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onbeforeunload

El evento onbeforeunload se activa cuando el usuario intenta salir de la página actual. Este evento puede utilizarse para mostrar un mensaje de confirmación o guardar datos antes de que el usuario abandone la página.

Ejemplo:


<body onbeforeunload="return confirm('¿Estás seguro de que quieres salir de la página?')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onhashchange

El evento onhashchange se activa cuando cambia el fragmento de la URL (la parte después del símbolo #). Este evento puede utilizarse para actualizar el contenido de la página en función del fragmento de la URL.

Ejemplo:


<body onhashchange="alert('La URL ha cambiado: ' + location.hash)">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onlanguagechange

El evento onlanguagechange se activa cuando cambia el idioma preferido del usuario. Este evento puede utilizarse para actualizar el contenido de la página en función del idioma seleccionado.

Ejemplo:


<body onlanguagechange="alert('El idioma preferido del usuario ha cambiado a: ' + navigator.language)">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onmessage

El evento onmessage se activa cuando se recibe un mensaje de otro contexto (como un iframe o un Web Worker). Este evento puede utilizarse para procesar y responder a mensajes entre diferentes contextos.

Ejemplo:


<body onmessage="alert('Mensaje recibido: ' + event.data)">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onmessageerror

El evento onmessageerror se activa cuando se produce un error al recibir un mensaje de otro contexto. Este evento puede utilizarse para manejar errores en la comunicación entre diferentes contextos.

Ejemplo:


<body onmessageerror="alert('Se produjo un error al recibir el mensaje.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onoffline

El evento onoffline se activa cuando el navegador detecta que la conexión a Internet se ha perdido. Este evento puede utilizarse para realizar acciones, como mostrar un mensaje o cambiar el contenido de la página para que funcione sin conexión.

Ejemplo:


<body onoffline="alert('La conexión a Internet se ha perdido.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

ononline

El evento ononline se activa cuando el navegador detecta que la conexión a Internet se ha restablecido. Este evento puede utilizarse para realizar acciones, como actualizar el contenido de la página o reanudar operaciones que requieran conexión a Internet.

Ejemplo:


<body ononline="alert('La conexión a Internet se ha restablecido.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onpagehide

El evento onpagehide se activa cuando el usuario navega fuera de la página actual. Puede utilizarse para realizar acciones, como guardar datos o detener procesos en segundo plano antes de que el usuario abandone la página.

Ejemplo:


<body onpagehide="alert('La página se está ocultando.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onpageshow

El evento onpageshow se activa cuando el usuario navega hacia la página actual. Puede utilizarse para realizar acciones, como actualizar el contenido de la página o iniciar procesos en segundo plano cuando el usuario llega a la página.

Ejemplo:


<body onpageshow="alert('La página se está mostrando.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onpopstate

El evento onpopstate se activa cuando el estado del historial del navegador cambia, como resultado de una acción de navegación hacia atrás o adelante. Este evento puede utilizarse para actualizar el contenido de la página en función del estado del historial.

Ejemplo:


<body onpopstate="alert('El estado del historial ha cambiado: ' + JSON.stringify(event.state))">
    <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onrejectionhandled

El evento onrejectionhandled se activa cuando una promesa de JavaScript es rechazada y se maneja correctamente con un controlador de rechazo. Este evento puede utilizarse para realizar acciones específicas cuando se maneja una promesa rechazada.

Ejemplo:


<body onrejectionhandled="alert('Una promesa rechazada ha sido manejada correctamente.')">
    <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onstorage

El evento onstorage se activa cuando un valor del almacenamiento local (localStorage) o de la sesión (sessionStorage) cambia. Este evento puede utilizarse para sincronizar el contenido de la página con los datos almacenados en el navegador.

Ejemplo:


<body onstorage="alert('El almacenamiento ha cambiado: ' + event.key + ' = ' + event.newValue)">
    <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onunhandledrejection

El evento onunhandledrejection se activa cuando una promesa de JavaScript es rechazada y no se maneja con un controlador de rechazo. Este evento puede utilizarse para manejar errores globales en promesas no controladas.

Ejemplo:


<body onunhandledrejection="alert('Se ha producido un error en una promesa no controlada: ' + event.reason)">
    <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

onunload

El evento onunload se activa cuando la página actual se está cerrando o actualizando. Puede utilizarse para realizar acciones, como guardar datos antes de que el usuario abandone la página o cerrar conexiones activas.

Ejemplo:


<body onunload="alert('La página se está cerrando.')">
  <!-- Contenido de la página -->
</body>

Lenguaje del código: HTML, XML (xml)

Estos eventos de la etiqueta <body> de HTML5 permiten a los desarrolladores responder a acciones específicas del navegador y del usuario, mejorando la experiencia del usuario y ofreciendo aplicaciones web más dinámicas y personalizadas.

Al aprender a utilizar estos eventos en conjunto con otros elementos HTML5 y JavaScript, puedes aprovechar al máximo las capacidades del navegador y desarrollar sitios web más interactivos y atractivos.

Más ejemplos

Aquí hay un ejemplo más de cómo utilizar la etiqueta <body> en HTML5:


<!DOCTYPE html>
<html>
  <head>
    <title>Mi Blog</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Bienvenido a Mi Blog</h1>
      <p>Aquí encontrarás artículos interesantes sobre tecnología y programación.</p>
    </main>
    <aside>
      <h2>Últimos Artículos</h2>
      <ul>
        <li><a href="#">Cómo crear una página web</a></li>
        <li><a href="#">Los mejores lenguajes de programación para aprender en 2021</a></li>
        <li><a href="#">Cómo crear una aplicación móvil</a></li>
      </ul>
    </aside>
    <footer>
      <p>&copy; 2021 Mi Blog</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se usa la etiqueta <body> para contener todo el contenido de la página web, incluyendo el encabezado, el contenido principal, la sección lateral y el pie de página.

Además, se utilizan etiquetas como <header>, <main>, <aside> y <footer> para estructurar y organizar el contenido de la página web.

Otro ejemplo:

Aquí hay otro ejemplo de código HTML5 utilizando la etiqueta <body>:


<!DOCTYPE html>
<html>
  <head>
    <title>Mi Tienda en Línea</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
  </head>
  <body>
    <header>
      <h1>Mi Tienda en Línea</h1>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Productos</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Productos Destacados</h2>
      <ul>
        <li>
          <h3>Smartphone Xiaomi Redmi Note 10 Pro</h3>
          <img src="smartphone.jpg" alt="Smartphone Xiaomi Redmi Note 10 Pro">
          <p>Precio: $999.00</p>
          <p><a href="#">Comprar Ahora</a></p>
        </li>
        <li>
          <h3>Tablet Samsung Galaxy Tab S7</h3>
          <img src="tablet.jpg" alt="Tablet Samsung Galaxy Tab S7">
          <p>Precio: $1,499.00</p>
          <p><a href="#">Comprar Ahora</a></p>
        </li>
        <li>
          <h3>Laptop Dell XPS 13</h3>
          <img src="laptop.jpg" alt="Laptop Dell XPS 13">
          <p>Precio: $2,499.00</p>
          <p><a href="#">Comprar Ahora</a></p>
        </li>
      </ul>
    </main>
    <aside>
      <h2>Información de Envío</h2>
      <p>Ofrecemos envío gratis a todo México.</p>
    </aside>
    <footer>
      <p>&copy; 2021 Mi Tienda en Línea</p>
    </footer>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <body> para contener todo el contenido de la página web de una tienda en línea.

Se incluye un encabezado con un título y una navegación, una sección principal con productos destacados, una sección lateral con información de envío y un pie de página con derechos de autor. Además, se enlaza una hoja de estilo CSS en la sección <head> para darle un diseño a la página web.

Referencias

Aquí tienes una lista de fuentes y recursos adicionales sobre la etiqueta <body> de HTML5. Estos recursos te ayudarán a profundizar en el tema y mejorar tus habilidades de desarrollo web.

Mozilla Developer Network (MDN) – <body>: La referencia más completa y actualizada sobre la etiqueta <body> de HTML5, proporcionada por la comunidad de desarrolladores de Mozilla.
W3Schools – HTML <body> Element: Una guía fácil de seguir sobre la etiqueta <body> de HTML5 con ejemplos y descripciones de los atributos soportados.
HTML5 – W3C <body>: Sitio oficial de HTML5 del World Wide Web Consortium (W3C) ofrece información detallada sobre los atributos de la etiqueta <body>.

Estos recursos te proporcionarán una base sólida para comprender cómo funciona la etiqueta <body> en HTML5 y mejorando tus habilidades en el desarrollo web.

Curso de HTML Desde Cero

Inscríbete Ahora

Etiqueta body en HTML

¿Qué es etiqueta <body> en HTML?

Ejemplo de uso

Atributos de la etiqueta <body

Atributo id

Atributo class

Atributos de eventos de la etiqueta <body>

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onmessageerror

onoffline

ononline

onpagehide

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

Más ejemplos

Referencias

Curso de HTML Desde Cero

Curso de HTML Desde Cero

Atributo `id`

Atributo `class`