Quem já codou "na unha" entenderá a emoção da primeira tag body renderizada.
Para finalizar os estudos básicos de arquitetura do nosso curso de HTML, vamos apresentar a majestosa tag <body>. Ela, junto com a tag <html> e a tag <head>, formam a Santíssima Trindade das tags: a estrutura básica e essencial de absolutamente qualquer página que existe na Internet.
Ao final deste tutorial de Front-End, você fará um site completo (embora simples), pois já irá dominar como o navegador lê o DOM (Document Object Model) e como as informações são renderizadas na tela do usuário.
Como você irá entender como um site é feito, como funciona a semântica e já terá criado um projeto prático, já poderá bater no peito e se considerar um verdadeiro Webmaster! 🚀
A tag <body> - O corpo visual de um site
O que é a tag body? Resposta Direta: A tag body no HTML é o elemento estrutural onde fica todo o conteúdo visível de um site. Enquanto a tag head guarda as configurações ocultas, tudo o que o usuário interage, lê e clica (como textos, imagens, links e vídeos) deve ser inserido obrigatoriamente dentro da tag <body>.
Vamos fazer uma analogia pedagógica clássica: imagine que um site é como um livro que você pega em uma biblioteca.
- A tag <html> seria a capa (frente e verso). Ela define onde o livro começa e onde termina.
- A tag <head> seria a ficha catalográfica e o índice. São informações para a bibliotecária (no nosso caso, o robô do Google e os navegadores) saber qual o título, qual o idioma e qual a categoria do livro usando meta tags cruciais de SEO. Quem pega o livro na mão não lê a ficha catalográfica para se divertir.
Pronto, temos a capa e as informações técnicas. O que está faltando?
O principal: A História! O conteúdo!
É aí que entra a tag <body>. Como o próprio nome em inglês sugere, ela define o "corpo". Tudo o que você está lendo nesse exato momento — este texto, os links, a imagem lá em cima, as cores — está flutuando majestosamente dentro da tag <body> do código-fonte do Programação Progressiva.
Domine a Estrutura da Web sem depender da internet!
Chega de ficar travado caçando pedaços de código na web. A tag body é só a ponta do iceberg. Criamos um material premium para você estudar Front-End offline, construir seus próprios sites do zero e dominar as tecnologias que pagam os melhores salários do mercado.
"Estava travado tentando entender a semântica do HTML5 e como encaixar o CSS no body. Essa apostila simplesmente salvou os meus freelas!"
— Carlos, Desenvolvedor Front-End.
Como usar e onde colocar a tag <body>?
A tag body está aninhada (dentro) da tag <html>, posicionada logo após o fechamento da tag <head>. Assim como a grande maioria das tags na linguagem de marcação, ela possui abertura e fechamento estritos:
<body> e </body>
Se antes, nos primórdios da web, as pessoas escreviam texto solto no arquivo (gerando o que chamamos de Spaghetti Code), hoje você precisa encapsular tudo com semântica. Então, é com muito prazer e orgulho que apresento para você o código Boilerplate (molde padrão) HTML5 de um site completo, correto e bem estruturado!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Programação Progressiva - Aprendendo a tag body</title>
<meta name="description" content="Meu primeiro site completo usando as tags html, head e body.">
</head>
<body>
<h1>Olá, Mundo da Programação!</h1>
<p>Este é meu primeiro código completo de um site. O primeiro de muitos!</p>
<p>Tudo que eu digitar aqui dentro, o usuário poderá ver na tela do navegador.</p>
</body>
</html>Se você salvar esse código em um arquivo .html e abrir no seu navegador (Chrome, Edge, Firefox), ele não mostrará o código em si. O navegador irá "renderizar" o resultado visual, que ficará exatamente assim na sua tela (Viewport):
Olá, Mundo da Programação!
Este é meu primeiro código completo de um site. O primeiro de muitos!
Tudo que eu digitar aqui dentro, o usuário poderá ver na tela do navegador.
🛠️ Curiosidade de Desenvolvedor Sênior
Você sabia que o navegador perdoa erros? Se você esquecer de digitar a tag <body> e simplesmente jogar um texto no HTML, navegadores modernos como o Chrome criarão a tag body artificialmente por trás dos panos (no inspetor de elementos) para tentar consertar o seu erro e exibir o site mesmo assim! Mas claro, depender disso é uma péssima prática.
Quais as funções modernas da tag body? (Antes vs. Depois)
Quando pensamos em "conteúdo", logo nos vem à mente blocos de texto. Sim, os textos (geridos pelas tags <p> e <h1> a <h6>) são a base do SEO On-Page e da informação na internet. Porém, conteúdo não se limita a letras.
Imagens, vídeos (<video>), formulários, animações... tudo isso vive dentro do body. E é aqui que mora a grande revolução que separa os amadores dos Webmasters profissionais.
A Treta da Estilização (Não suje o seu HTML)
Antigamente (no obsoleto HTML 4), era muito comum usarmos atributos de aparência direto dentro da tag body, assim:
❌ <body bgcolor="black" text="white"> (Prática banida e ultrapassada)
Hoje, isso é um crime inafiançável na programação Front-End. O HTML serve apenas para marcação estrutural. Quem cuida de deixar a página bonita, alterar a cor de fundo, mudar a fonte e fazer o site se adaptar a celulares (Responsividade) é o nosso amigo CSS (Cascading Style Sheets).
Ao longo do nosso curso, você verá que o body se tornou um "container" gigante. Hoje, dentro dele, nós inserimos outras tags semânticas do HTML5 para dividir o site em partes lógicas:
<header>- Para colocar o logotipo e o menu de navegação.<main>- Onde fica o conteúdo principal e único da página.<footer>- O rodapé do site, com os direitos autorais.
💡 Hora de Praticar: Exercício de HTML
Sujar a mão de código é o único jeito de aprender! Crie um site completo usando seu editor de código (como o VS Code ou Bloco de Notas). Siga as regras:
- Estruture as tags fundamentais (
!DOCTYPE,html,head,body). - No Head: Crie as meta tags description e a tag title sobre o seu seriado favorito (Ex: Breaking Bad, The Office).
- No Body: Use uma tag
<h1>com o nome da série, faça um parágrafo (<p>) dizendo o porquê de você gostar dela, e insira um link real apontando para o site oficial ou a página da série na Wikipédia!
Idente (organize os espaços) seu código bonitinho. Boa sorte!
🎯 O Que Estudar a Seguir?
Você acabou de construir o alicerce do seu conhecimento Front-End. O próximo passo lógico para evoluir seu projeto é garantir uma navegação interna rica e dominar os links lógicos:
- A TAG P PARA PARÁGRAFOS — Aprenda a formatar seus textos corretamente dentro do body.
- INTRODUÇÃO AO CSS — Chegou a hora de dar vida e cores à sua tela branca!
- CURSO DE PHP PROGRESSIVO — O HTML constrói a casca, o PHP cria o cérebro. Aprenda a fazer sites dinâmicos conectados a banco de dados!
❓ Perguntas Frequentes sobre a Tag Body (FAQ)
Posso usar mais de uma tag body no mesmo documento HTML?
<html>, uma <head> e apenas uma tag <body>. Colocar dois corpos na mesma página quebrará completamente a leitura do seu site pelos navegadores.
Nenhum comentário:
Postar um comentário