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.

Hosting
El hosting como nunca lo habías visto
  • Rápido, seguro, flexible y escalable
  • Certificado SSL/DDoS incluido
  • Dominio y asesor personal incluidos

<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>
html

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>
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>
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>
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>
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>
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>
html
Dominios web
Compra y registra tu dominio ideal
  • Domina el mercado con nuestra oferta 3x1 en dominios
  • Tu dominio protegido con SSL Wildcard gratis
  • 1 cuenta de correo electrónico por contrato
¿Le ha resultado útil este artículo?
Ir al menú principal