Etiqueta <body> HTML

Definición y uso

<body> La etiqueta define el cuerpo del documento.

Los metadatos y la información del documento del documento HTML se encapsulan en el elemento head, y el contenido del documento se encapsula en el elemento body.

El elemento body siempre sigue al elemento head, es el segundo hijo del elemento html.

<body> El elemento contiene todo el contenido del documento HTML, como títulos, párrafos, imágenes, enlaces, tablas, listas, etc.

Nota:En un documento HTML solo puede haber un <body> Elemento.

Ejemplo

Un documento HTML simple pero completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo del documento</title>
  </head>
  <body>
    <h1>Este es un título</h1>
    <p>Este es un párrafo.</p>
  </body>
</html>

Prueba personalmente

Consejo:Más ejemplos en la parte inferior de la página.

Atributos globales

<body> Los elementos también admiten Atributos globales en HTML.

Atributos de eventos

<body> Los elementos también admiten Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados: <body> Elemento:

body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}

Prueba personalmente

Más ejemplos

Ejemplo 1

Añadir una imagen de fondo al documento (usando CSS):

<html>
<head>
<style>
body {
  background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="">¡Accede a codew3c.com!</a></p>
</body>

Prueba personalmente

Ejemplo 2

Establecer el color de fondo del documento (usando CSS):

<html>
<head>
<style>
body {
  background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.codew3c.com">¡Accede a codew3c.com!</a></p>
</body>

Prueba personalmente

Ejemplo 3

Establecer el color del texto del documento (usando CSS):

<html>
<head>
<style>
body {
  color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Esto es un texto.</p>
<p><a href="">¡Accede a codew3c.com!</a></p>
</body>
</html>

Prueba personalmente

Ejemplo 4

Establecer el color de los enlaces no visitados en el documento (usando CSS):

<html>
<head>
<style>
a:link {
  color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">Tutoriales de HTML</a></p>
</body>
</html>

Prueba personalmente

Ejemplo 5

Establecer el color de los enlaces activos en el documento (usando CSS):

<html>
<head>
<style>
a:active {
  color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">Tutoriales de HTML</a></p>
</body>
</html>

Prueba personalmente

Ejemplo 6

Establecer el color de los enlaces visitados en el documento (usando CSS):

<html>
<head>
<style>
a:visited {
  color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.codew3c.com">codew3c.com</a></p>
<p><a href="https://www.codew3c.com/html/">Tutoriales de HTML</a></p>
</body>
</html>

Prueba personalmente

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte