HTML body: el elemento HTML para el contenido
En el elemento HTML <body> se encuentran todos los contenidos visibles de un documento HTML. Solo puede existir una única sección <body> por documento.
¿Qué es la etiqueta HTML <body> y para qué se utiliza?
<body> de HTML es un elemento que se utiliza para mostrar los contenidos de un documento. Todos los contenidos visibles como titulares, bloques de texto, imágenes, tablas, hipervínculos, listas y otros elementos posibles se colocan dentro de esta etiqueta HTML. En cada documento solo puede haber un único <body>. Este siempre se encuentra debajo de la sección <head> y sobre el footer HTML. La etiqueta <body> admite todos los atributos HTML.
- Tiempo de actividad de 99.99 % y seguridad garantizada
- Aumenta el rendimiento según el tráfico de tu página web
- Incluye dominio, SSL, e-mail y soporte 24/7
<body> de HTML: sintaxis y funcionamiento
Antes de mostrarte cómo funciona <body> de HTML mediante algunos ejemplos simples, vale la pena echar un vistazo a la sintaxis básica del elemento. Es la siguiente:
<body>Aquí se colocan todos los contenidos visibles de la página web.</body>Solo los contenidos que se encuentran entre la etiqueta de apertura (<body>) y la etiqueta de cierre (</body>) se mostrarán más tarde en la página web.
Ejemplos de uso de la etiqueta <body> en HTML
En los siguientes ejemplos, verás cómo se utiliza la etiqueta <body> en la práctica.
Documento HTML con un elemento <body> simple
Primero crearemos un documento HTML simple con un titular, un bloque de texto y una imagen, todos colocados dentro del cuerpo. Este es el código correspondiente:
<html>
<head>
<title>Cuerpo HTML en un documento</title>
</head>
<body>
<h1>Este es el titular</h1>
<p>Aquí se encuentra el contenido de la página web.</p>
<img src="ejemplo.jpg" alt="Aquí se muestra una imagen">
</body>
</html>Crear una barra de navegación con href
En el siguiente ejemplo, verás cómo crear una barra de navegación para tu página web utilizando la etiqueta <body> de HTML y el atributo href. Este es el código correspondiente:
<!DOCTYPE html>
<html>
<head>
<title>Página web con una barra de navegación</title>
</head>
<body>
<nav>
<a href="#home">Inicio</a> |
<a href="#about">Acerca de</a> |
<a href="#contact">Contacto</a>
</nav>
<section id="home"><h2>Inicio</h2></section>
<section id="about"><h2>Acerca de</h2></section>
<section id="contact"><h2>Contacto</h2></section>
</body>
</html>Insertar un vídeo en el <body> de HTML
Si quieres insertar un vídeo en tu página web, el área <body> es el lugar para ello. Este es un código de ejemplo para la inserción:
<!DOCTYPE html>
<html>
<head>
<title>Página web con un vídeo</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="ejemplovideo.mp4" type="video/mp4">
</video>
</body>
</html>Cambiar el diseño mediante la etiqueta <body> de HTML
Con la ayuda de CSS, también puedes usar la sección <body> para personalizar tus contenidos web. Te mostramos un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Cuerpo HTML con ajustes visuales</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Aquí está el título</h1>
<p>Aquí se encuentra el contenido de la página web.</p>
</body>
</html>Ajustar fondos en el <body> de HTML
Si solo quieres cambiar el fondo HTML con CSS, también se realiza en el cuerpo de HTML. Te mostramos cómo establecer el color de fondo:
<!DOCTYPE html>
<html>
<head>
<title>Cuerpo HTML con nuevo color de fondo</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Aquí está el título</h1>
<p><a href="https://www.paginaejemplo.com">¡Visita PaginaEjemplo.com!</a></p>
</body>
</html>Si en cambio, deseas insertar una imagen, este es el código adecuado:
<!DOCTYPE html>
<html>
<head>
<title>Cuerpo HTML con nueva imagen de fondo</title>
<style>
body {
background-image: url(ejemplo.png);
}
</style>
</head>
<body>
<h1>Aquí está el título</h1>
<p><a href="https://www.paginaejemplo.com">¡Visita PaginaEjemplo.com!</a></p>
</body>
</html>- Gratis SSL Wildcard para transferencias de datos más seguras
- Gratis registro privado para más privacidad