O elemento <body> representa toda a área visível de uma página HTML.
Todos os conteúdos apresentados ao usuário ficam dentro da tag <body>, como textos, imagens, vídeos, tabelas, formulários e links.
O elemento <body> fica após o elemento <head> dentro da estrutura HTML.
<html>
<head>
Configurações da página
</head>
<body>
Conteúdo visível
</body>
</html>
<!doctype html>
<html lang="pt-BR">
<head>
<title>
Minha Página
</title>
</head>
<body>
<h1>
Olá Mundo!
</h1>
<p>
Minha primeira página HTML.
</p>
</body>
</html>
| Elemento | Exemplo |
|---|---|
| Texto | Títulos e parágrafos |
| Imagens | Fotos e ilustrações |
| Links | Navegação entre páginas |
| Tabelas | Apresentação de dados |
| Formulários | Entrada de informações |
<body>
<h1>
Curso HTML
</h1>
<p>
Aprenda desenvolvimento Web.
</p>
<img src="imagem.png">
<a href="contato.html">
Contato
</a>
</body>
| Tag | Descrição |
|---|---|
| <h1> até <h6> | Títulos da página |
| <p> | Parágrafos |
| <img> | Inserção de imagens |
| <a> | Links |
| <table> | Tabelas |
| <form> | Formulários |
O HTML permite adicionar atributos aos elementos para modificar seu comportamento ou aparência.
<body bgcolor="blue">
</body>
Atualmente essas configurações são feitas preferencialmente utilizando CSS.
| Atributo | Função |
|---|---|
| bgcolor | Definia a cor de fundo |
| text | Definia a cor do texto |
| background | Definia imagem de fundo |
| link | Cor dos links |
A melhor prática atual é separar estrutura HTML e aparência utilizando CSS.
HTML:
<body>
Conteúdo da página
</body>
CSS:
body {
background: #f5f7fa;
font-family: Arial;
}
Em projetos profissionais o conteúdo do body costuma ser organizado com elementos semânticos.
<body>
<header>
Cabeçalho
</header>
<nav>
Menu
</nav>
<main>
Conteúdo principal
</main>
<footer>
Rodapé
</footer>
</body>