Tag Body
A tag <body> é um dos elementos centrais do HTML - ela representa todo o conteúdo visível da página web. Ou seja, tudo que aparece para o usuário no navegador (como textos, imagens, vídeos, botões, links e outros elementos gráficos) deve estar dentro dela.
Veja a estrutura básica do corpo de um site em tempo real
header
content
sidebar
Agora que já sabemos para que essa tag serve, vamos entender mais um pouco sobre ela.
O que é exatamente a tag <body>?
O <body> - que traduzido do inglês significa corpo - é uma tag de estrutura, assim como <head> e <html>.
.png)
Seu objetivo é renderizar, ou mostrar, todo o conteúdo na tela do seu computador, diferente da tag <head>, que serve para armazenar metadados e configurações de uma página web.
Saiba um pouco mais sobre a tag <head> bem aqui
Uma informação importante, é que, cada documento HTML só pode ter uma única tag <body>.
Principais características:
Obrigatória - no HTML moderno (HTML5), ela pode ser inferida (reconhecida) pelo navegador mesmo que não a escreva explicitamente no código principal, mas a boa prática é sempre usar.
Estilização - Você pode aplicar CSS diretamente nela para controlar o layout geral.
Exemplo:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
Eventos globais - a tag <body> pode receber eventos JavaScript como onload, onresize ou onunload:
Exemplo:
<body onload="alert('Página carregada')">
NOTA: Apesar disso, se é recomendado usar JavaScript separado do HTML.
Histórico
No HTML2.0 (1995), a tag <body> ja existia, mas permitia atributos como bgcolor, text e link para definir cores deratamente no HTML.
Com o avança do HTML4 e HTML5, esses atributos foram descontinuados e substituídos pelo uso de CSS, tornando o código mais limpo e separado entre conteúdo e estilo.
Comparação da tag body: HTML Antigo vs. HTML Moderno
| Aspecto | HTML Antigo (antes do HTML5) | HTML Moderno (HTML5) |
|---|---|---|
| Definição de cor de fundo | <body bgcolor="yellow"> | body { background-color: yellow; } |
| Cor do texto | <body text="black"> | body { color: black; } |
| Cor de links | <body link="blue" vlink="purple" alink="red"> |
a { color: blue; } a:visited { color: purple; } a:active { color: red; } |
| Imagem de fundo | <body background="imagem.jpg"> | body { background-image: url('imagem.jpg'); } |
| Eventos (ex.: ao carregar) | <body onload="funcao()"> | window.addEventListener('load', funcao); |
| Organização do código | Mistura conteúdo + estilo | HTML para conteúdo, CSS para estilo, JS para comportamento |
| Status atual | Obsoleto (não recomendado) | Padrão (boa prática) |
Vamos ver se entendeu:
- Qual é a função do HTML?
Armazenar todo o conteúdo visível do site.
- Qual é sua posição dentro do código HTML?
Ela deve ficar dentro da tag <html> e após a tag <head>.
- Cite uma boa prática ao usar a tag BODY
Usar CSS para estilo e evitar atributos antigos como bgcolor, text e link.
Bem, agora que já estamos familiarizados com a tag <body>, vamos dar continuidade aos nossos estudos falando um pouco sobre a organização de código utilizando um outro atributo tão importante quanto a tag <body>, a sintaxe comment ou comentário
Comments
Post a Comment
E ai Dev! deixe sua opinião!