No elemento HTML <body> estão contidos todos os conteúdos visíveis de um documento HTML. Em cada documento, pode existir apenas uma única área <body>.

O que é a tag HTML <body> e para que ela é usada?

A tag HTML <body> é um elemento HTML utilizado para exibir o conteúdo de um documento. Todos os conteúdos visíveis, como cabeçalhos, blocos de texto, imagens, tabelas, hiperlinks, listas e outros elementos possíveis, são armazenados dentro dessa tag HTML. Em cada documento, pode haver apenas uma tag <body>. Ela fica sempre abaixo do elemento <head> e acima do HTML footer. A tag <body> suporta todos os atributos globais HTML.

Hospedagem web com consultor pessoal

Rápido e escalável, confie na hospedagem da IONOS, que inclui domínio grátis no primeiro ano e endereço de e-mail!

  • Domínio
  • SSL Wildcard
  • Suporte 24 horas

HTML <body>: Sintaxe e funcionamento

Antes de mostrar como a tag HTML <body> funciona com alguns exemplos simples, vale a pena dar uma olhada na sintaxe básica desse elemento. Ela é a seguinte:

<body>Aqui ficam armazenados todos os conteúdos visíveis do site.</body>

Somente o conteúdo entre a tag de abertura (<body>) e a tag de fechamento (</body>) será exibido posteriormente na página.

Exemplos de uso da tag HTML <body>

Nos exemplos abaixo, mostramos como aplicar a tag HTML <body> na prática.

Documento HTML com um simples elemento <body>

Primeiro, criamos um documento HTML simples com um cabeçalho, um parágrafo de texto e uma imagem, todos inseridos dentro do corpo. O código correspondente é:

<html>
<head>
<title>HTML body em um documento</title>
</head>
<body>
<h1>Este é o seu cabeçalho</h1>
<p>Aqui está o conteúdo do seu site.</p>
<img src="exemplo.jpg" alt="Aqui é exibida uma imagem">
</body>
</html>
html

Criar barra de navegação com href

No próximo exemplo, mostramos como criar uma barra de navegação para seu site utilizando a tag HTML <body> e o atributo href. O código adequado é o seguinte:

<!DOCTYPE html>
<html>
<head>
<title>Site com barra de navegação</title>
</head>
<body>
<nav>
<a href="#home">Início</a> |
<a href="#about">Sobre</a> |
<a href="#contact">Contato</a>
</nav>
<section id="home"><h2>Início</h2></section>
<section id="about"><h2>Sobre</h2></section>
<section id="contact"><h2>Contato</h2></section>
</body>
</html>
html

Inserir vídeo pela tag HTML <body>

Se você deseja adicionar um vídeo ao seu site, o corpo do documento é o local apropriado para exibi-lo. Veja abaixo um exemplo de código para inclusão de vídeo:

<!DOCTYPE html>
<html>
<head>
<title>Site com um vídeo</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="exemplovideo.mp4" type="video/mp4">
</video>
</body>
</html>
html

Alterar design pela tag HTML <body>

Com o uso de CSS, você pode também usar a tag <body> para ajustar o design do conteúdo do seu site. Veja como fazer isso no exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
<title>HTML body com ajustes visuais</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p>Aqui está o conteúdo do seu site.</p>
</body>
</html>
html

Ajustando o fundo no HTML <body>

Se você deseja alterar apenas o background no HTML, isso também é feito no <body>. Veja como definir a cor de fundo:

<!DOCTYPE html>
<html>
<head>
<title>HTML body com nova cor de fundo</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p><a href="https://www.exemplosite.com">Visite o Exemplosite.com!</a></p>
</body>
</html>
html

Se você preferir adicionar uma imagem de fundo, use o código abaixo:

<!DOCTYPE html>
<html>
<head>
<title>HTML body com nova imagem de fundo</title>
<style>
body {
background-image: url(exemplo.png);
}
</style>
</head>
<body>
<h1>Aqui está o seu cabeçalho</h1>
<p><a href="https://www.exemplosite.com">Visite o Exemplosite.com!</a></p>
</body>
</html>
html
Registre um nome de domínio

Construa sua própria marca com um grande domínio, que inclui SSL e consultor pessoal!

  • Registro privado
  • Suporte 24 horas
  • E-mail
Este artigo foi útil?
Ir para o menu principal