O elemento HTML <body> contém todo o conteúdo visível de um documento HTML. Só pode existir uma única secção <body> por documento.

O que é a etiqueta HTML <body> e para que serve?

<body> em HTML é um elemento utilizado para mostrar o conteúdo de um documento. Todos os conteúdos visíveis, como títulos, blocos de texto, imagens, tabelas, hi­per­li­ga­ções, listas e outros elementos possíveis, são colocados dentro desta etiqueta HTML. Em cada documento, só pode haver um único <body>. Este encontra-se sempre abaixo da secção <head> e acima do rodapé HTML. A etiqueta <body> admite todos os atributos HTML.

<body> de HTML: sintaxe e fun­ci­o­na­mento

Antes de mostrar como funciona o HTML <body> através de alguns exemplos simples, vale a pena dar uma olhada na sintaxe básica do elemento. É a seguinte:

<body>Aquí se colocan todos los contenidos visibles de la página web.</body>
html

Apenas os conteúdos que se encontram entre a etiqueta de abertura (<body>) e a etiqueta de fecho (</body>) serão pos­te­ri­or­mente apre­sen­ta­dos na página web.

Exemplos de uti­li­za­ção da etiqueta <body> em HTML

Nos exemplos a seguir, você verá como a etiqueta <body> é utilizada na prática.

Documento HTML com um elemento <body> simples

Primeiro, criaremos um documento HTML simples com um título, um bloco de texto e uma imagem, todos colocados dentro do corpo. Este é o código cor­res­pon­dente:

<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

Criar uma barra de navegação com href

No exemplo a seguir, você verá como criar uma barra de navegação para o seu site usando a tag <body> do HTML e o atributo href. Este é o código cor­res­pon­dente:

<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

Inserir um vídeo no HTML <body>

Se quiser inserir um vídeo na sua página web, a área <body> é o local adequado para o fazer. Este é um código de exemplo para a inserção:

<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

Alterar o design através da etiqueta <body> do HTML

Com a ajuda do CSS, também pode usar a secção <body> para per­so­na­li­zar os seus conteúdos web. Aqui está um exemplo:

<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 fundos no HTML <body>

Se quiser apenas alterar o fundo HTML com CSS, isso também é feito no corpo do HTML. Mostramos-lhe como definir a cor de fundo:

<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

Se, por outro lado, desejar inserir uma imagem, este é o código adequado:

<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
Ir para o menu principal