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