Etiqueta body en HTML

¿Qué es etiqueta <body> en HTML?

La etiqueta <body> en HTML5 es un elemento que define el contenido principal de un documento HTML. Todo lo que se muestra en una página web se encuentra dentro de la sección <body>. Esta sección incluye texto, imágenes, enlaces, formularios, tablas y cualquier otro tipo de contenido que desees incluir en tu página web.

Además de simplemente proporcionar contenido, la etiqueta <body> también permite establecer el estilo y la apariencia de la página a través de CSS y personalizar la interacción con el usuario a través de JavaScript.

Es importante tener en cuenta que la sección <body> es la única sección de un documento HTML que se muestra directamente en la página web. Por lo tanto, es importante tener en cuenta la estructura y organización de la sección <body> para garantizar una experiencia de usuario óptima y una presentación clara y fácil de usar para los usuarios.

Ejemplo de uso

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

<!DOCTYPE html> <html> <head> <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

La etiqueta <body> en HTML no tiene atributos específicos. Sin embargo, hay algunos atributos que pueden ser usados con la etiqueta <body> en HTML:

  • background: especifica una imagen de fondo para la página web.
  • bgcolor: especifica un color de fondo para la página web.
  • text: especifica el color del texto en la página web.
  • link: especifica el color de los enlaces en la página web.
  • alink: especifica el color de los enlaces activos en la página web.
  • vlink: especifica el color de los enlaces visitados en la página web.

OJO: Estos atributos son considerados obsoletos en HTML5 y se recomienda utilizar CSS en su lugar para estilizar la página web.

Por ejemplo:

Para agregar un color de fondo a la página web en HTML5, se puede utilizar CSS en lugar de los atributos antiguos:

<!DOCTYPE html> <html> <head> <title>Mi Página Web</title> <style> body { background-color: #F1F1F1; } </style> </head> <body> <header> <h1>Bienvenido a Mi Página Web</h1> </header> <!-- Contenido de la página web --> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se agrega una sección <style> dentro de la sección <head> para incluir las reglas CSS que estilizan la página web.

Se utiliza el selector body para estilizar el elemento <body> y se agrega la propiedad background-color para especificar el color de fondo de la página web.

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.