Então, olha só: todo HTML começa com o famoso “esqueleto básico”, tipo o arroz com feijão do código, tá ligado? Esse esquema é fixo, não tem como fugir, sempre vai ser desse jeito. E se liga: toda vez que você for começar um HTML, vai ter que puxar essa estrutura. Mas relaxa, porque os editores como o Sublime Text já te dão uma moral, com uns atalhos que jogam isso pronto pra você. Ou seja, nem precisa esquentar a cabeça decorando. Mas, entre nós, vale a pena dar uma memorizada, só pra não passar perrengue ou dar aquela bancada de “manja dos paranauê” com a galera. 😎
Veja abaixo como ela se inicia:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título da resenha</title>
<meta charset="tá na moralzinha">
</head>
<body>
É aqui que rola o bonde do HTML e seu site ganha vida!
</body>
</html>Dá pra entender o esquema de um documento HTML de forma bem tranquilona, só pensando em “blocos” essenciais. Olha só como fica:
Definição do documento (doctype)
Essa parte é a primeira linha do documento HTML e serve para dizer ao navegador que tipo de documento ele está lidando. É basicamente a “declaração de identidade” do arquivo. A linha < !DOCTYPE html > é super importante porque ela diz ao navegador que esse documento segue as regras do HTML5 (a versão mais atual). Se você não incluir isso, o navegador pode interpretar o conteúdo de maneira errada, o que pode causar erros na exibição do site.
Em resumo: É o que garante que o navegador interprete seu código HTML corretamente, sem dar erro ou mostrar o conteúdo de forma esquisita.
Cabeça (head)
Essa é a parte “invisível” para o usuário final. Tudo o que está dentro da tag <head> é mais voltado para o funcionamento do site, e não tanto para o que aparece na tela. Aqui você define coisas como:
- Título da página: O que aparece na aba do navegador.
- Metadados: Informações sobre o site que não aparecem para o usuário, mas são úteis para mecanismos de busca (como o Google) e para o navegador saber mais sobre a página (tipo a codificação de caracteres, o idioma, entre outros).
- Links para arquivos externos: Como o CSS (para o estilo do site) e JavaScript (para as interações).
Um exemplo básico do que vai no <head>:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da página</title>
<link rel="stylesheet" href="styles.css">
</head>
Em resumo: O <head> é o “cérebro” do site, onde você coloca todas as informações e recursos necessários para o site funcionar da maneira correta.
Corpo (body)
Agora sim, é aqui que as coisas acontecem de verdade! Tudo o que você vê em uma página da web – texto, imagens, vídeos, botões, formulários – fica dentro da tag <body>. Quando você escreve um site, essa é a parte que vai ser exibida para os visitantes.
Dentro do <body>, você pode usar várias outras tags para organizar o conteúdo, como:
- Cabeçalhos: Para títulos e subtítulos (
<h1>,<h2>, etc.). - Parágrafos: Para blocos de texto (
<p>). - Imagens: Para adicionar imagens ao site (
<img>). - Links: Para adicionar hyperlinks que levam a outras páginas ou sites (
<a>). - Listas: Para listas numeradas ou com marcadores (
<ul>,<ol>).
Exemplo básico de um conteúdo dentro do <body>:
<body>
<h1>Bem-vindo ao meu site</h1>
<p>Aqui você encontra várias dicas sobre HTML.</p>
<img src="imagem.jpg" alt="Descrição da imagem">
</body>
Em resumo: O <body> é o “palco” onde todo o conteúdo visível da sua página aparece, é aqui que o usuário interage com o site.
Com essa base, você já pode mandar bem no seu HTML!
