HTML <body> Tag
A tag <body> contém o conteúdo visível da página. Saiba seu papel, substitutos CSS e eventos do body.
A tag <body> define o conteúdo de uma página web — tudo o que o visitante realmente vê, como texto, imagens, links, listas, tabelas e formulários. Ela é colocada dentro do elemento <html>, imediatamente após o elemento <head>. Um documento HTML pode conter apenas uma tag <body>.
O papel do <body> no documento
Todo documento HTML é dividido em duas partes dentro do elemento raiz <html>:
- O
<head>contém metadados sobre a página — seu título, conjunto de caracteres, folhas de estilo vinculadas e scripts. Nada no<head>é renderizado na área da página. - O
<body>contém o conteúdo renderizado da página — a parte que o navegador exibe na tela.
Portanto, o <body> é a área de conteúdo visível. Quando você escreve um cabeçalho, um parágrafo ou uma imagem que deve aparecer na página, ele vai dentro do <body>.
Classes CSS são comumente adicionadas ao elemento <body>, permitindo que desenvolvedores e designers direcionem toda uma página facilmente (por exemplo, uma classe theme-dark que reestiliza tudo abaixo dela). Mesmo que essas classes nunca sejam usadas, elas não causam problemas.
Sintaxe
A tag <body> vem em pares. O conteúdo é escrito entre as tags de abertura <body> e de fechamento </body>.
Exemplo da tag HTML <body>:
Tag HTML <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
</body>
</html>Resultado
Exemplo da tag HTML <body> usada com as propriedades CSS color e line-height:
Exemplo da tag HTML <body> com as propriedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: #444444;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>HTML body tag example</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Atributos obsoletos
No HTML antigo, a tag <body> carregava atributos de apresentação que definiam cores de toda a página e a imagem de fundo. Estes estão obsoletos no HTML5 — não os utilize. Cada um tem um substituto em CSS:
| Atributo | Valor | Finalidade | Equivalente CSS moderno |
|---|---|---|---|
| bgcolor | color | Cor de fundo da página | background-color |
| text | color | Cor padrão do texto | color |
| background | URL | Imagem de fundo | background-image |
| link | color | Cor de links não visitados | a:link { color: … } |
| vlink | color | Cor de links visitados | a:visited { color: … } |
| alink | color | Cor do link ativo (sendo clicado) | a:active { color: … } |
A forma com CSS
Em vez de atributos de apresentação, estilize o <body> com uma folha de estilo. Isso separa conteúdo de apresentação e mantém a marcação limpa:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<style>
body {
background-color: #f5f5f5;
color: #333333;
background-image: url("paper.png");
}
a:link { color: #0645ad; }
a:visited { color: #663399; }
a:active { color: #d04437; }
</style>
</head>
<body>
<p>Styled with CSS instead of deprecated <code><body></code> attributes.</p>
<p><a href="https://www.w3docs.com">A link</a></p>
</body>
</html>A tag <body> também suporta os Atributos Globais padrão (class, id, style, lang, entre outros) e os Atributos de Evento.
Atributos de evento específicos do body
A maioria dos atributos de evento (como onclick) se aplica a qualquer elemento, mas alguns são significativos apenas no <body> porque reagem a eventos em toda a janela/documento:
| Atributo | Disparado quando |
|---|---|
| onload | A página terminou de carregar (todo o conteúdo e recursos). |
| onunload | O usuário navega para fora e a página é descarregada. |
| onresize | A janela do navegador é redimensionada. |
Exemplo — executar código assim que a página estiver pronta e novamente sempre que a janela for redimensionada:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body onload="report('loaded')" onresize="report('resized')">
<p id="status">Waiting…</p>
<script>
function report(message) {
document.getElementById("status").textContent = "Window " + message;
}
</script>
</body>
</html>No código moderno, esses eventos são frequentemente associados com JavaScript, por exemplo window.addEventListener("load", …), o que mantém o comportamento fora da marcação.
Acessibilidade
O <body> é a raiz de todo o conteúdo renderizado, portanto define o contexto para tecnologias assistivas:
- O atributo
langno elemento<html>(por exemplolang="en") informa aos leitores de tela qual idioma usar ao anunciar tudo dentro do<body>. Defini-lo corretamente melhora a pronúncia. - Como o
<body>é onde a navegação e o conteúdo principal residem, forneça um link de pular navegação como o primeiro elemento focalizável, para que usuários de teclado e leitores de tela possam ir diretamente ao conteúdo principal:
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- site navigation --></nav>
<main id="main">
<h1>Page title</h1>
<p>Main content…</p>
</main>
</body>O link de pular é geralmente ocultado visualmente até receber o foco do teclado, mas permanece disponível para a tecnologia assistiva em todos os momentos.