HTML: HTML Básico
Dominar a estrutura padrão e as regras básicas de sintaxe de documentos HTML é o primeiro passo para escrever páginas web bem formadas.
1. Estrutura do Documento HTML
Todo documento HTML segue uma estrutura fixa. O navegador usa essa estrutura para entender os componentes de uma página. Um documento HTML completo contém as seguintes relações hierárquicas:
▶ Exemplo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
Conteúdo visível da página
</body>
</html>
(1) Explicação da Estrutura
As várias partes de um documento HTML são organizadas em uma estrutura em árvore chamada de DOM (Document Object Model — Modelo de Objetos do Documento). O navegador converte cada tag HTML em um "nó", e os nós formam relações de pai-filho e irmãos.
<!DOCTYPE html>— Declaração do tipo de documento, informa ao navegador que se trata de um documento HTML5. Deve ser escrita na primeira linha.<html>— Elemento raiz, o contêiner mais externo de todo o documento HTML. Todas as demais tags ficam dentro dele.<head>— Seção do cabeçalho, armazena metadados. O conteúdo aqui não é exibido diretamente na página, mas controla codificação, título, referências de estilo, etc.<meta charset="UTF-8">— Declara a codificação de caracteres do documento como UTF-8, garantindo que caracteres especiais sejam exibidos corretamente.<title>— Título da página, exibido na aba do navegador e como título nos resultados dos mecanismos de busca.<body>— Seção do corpo, onde todo conteúdo visível (texto, imagens, tabelas, etc.) é colocado.
Compreender essa estrutura de esqueleto é fundamental — todas as tags que você aprenderá daqui para frente serão colocadas dentro de <head> ou <body>.
<html> é o nó raiz, e <head> e <body> são seus nós filhos (irmãos entre si). Um DOM bem estruturado não apenas torna o código mais claro, mas também ajuda com SEO e acessibilidade.
2. Sintaxe Básica de Tags
O bloco de construção fundamental do HTML é a "tag". O navegador identifica o tipo e a estrutura do conteúdo por meio das tags. As tags são divididas em duas categorias: tags com par e tags vazias.
(1) Tags com Par
A maioria das tags HTML vêm em pares, envolvendo o conteúdo entre uma tag de abertura e uma tag de fechamento.
<p>Este é um parágrafo</p>
<h1>Este é um título de nível 1</h1>
<strong>Este é um texto em negrito</strong>
- Tag de abertura:
<tagname>— sinais de menor e maior envolvendo o nome da tag - Tag de fechamento:
</tagname>— uma barra inclinada antes do nome da tag - Conteúdo: o texto ou outras tags entre a tag de abertura e a de fechamento
(2) Tags Vazias (Self-Closing Tags)
Algumas tags não possuem conteúdo e não precisam de tag de fechamento. São chamadas de tags vazias.
<br> <!-- quebra de linha -->
<hr> <!-- linha horizontal -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Uma foto de exemplo"> <!-- imagem -->
No HTML5, a barra final nas tags vazias é opcional (tanto <br /> quanto <br> são válidos), mas é recomendado manter simples e omitir a barra.
(3) Regras de Aninhamento de Tags
As tags podem ser aninhadas umas dentro das outras, mas devem seguir o princípio "abre primeiro, fecha por último" — a tag aberta por último deve ser fechada primeiro. Não faça aninhamento cruzado.
<!-- Aninhamento correto -->
<p>Este é um <strong>texto importante</strong> exemplo</p>
<!-- Aninhamento incorreto (cruzado) -->
<p>Este é um <strong>texto importante</p> exemplo</strong>
- Sempre use letras minúsculas para os nomes das tags. Embora
<P>funcione no navegador, minúsculas é o padrão da indústria. - O aninhamento deve seguir rigorosamente a ordem hierárquica. O aninhamento cruzado incorreto pode fazer o navegador interpretar erroneamente, resultando em um layout de página quebrado.
- O aninhamento correto é a base de uma boa estrutura DOM, facilitando a manutenção e a estilização.
<!-- -->, não são exibidos na página e servem principalmente para notas do desenvolvedor.
❓ Perguntas Frequentes
<br> não precisam de tag de fechamento? Quando posso omitir a barra?<br> não tem "conteúdo da quebra", e o caminho de uma imagem é especificado pelo atributo src, não entre tags. No HTML5, a barra final é opcional (<br> e <br/> são válidos), mas manter simples sem a barra é preferível. Lembre-se: apenas elementos vazios podem omitir a tag de fechamento; elementos regulares como <p> e <div> devem ter.📖 Resumo
- Documentos HTML possuem um esqueleto fixo:
DOCTYPE—html(elemento raiz) —head+body - As tags vêm em dois tipos: tags com par (com abertura e fechamento) e tags vazias (sem conteúdo, sem fechamento)
- Regra de aninhamento: "abre primeiro, fecha por último", não faça aninhamento cruzado
- Sempre use letras minúsculas para os nomes das tags; cultive bons hábitos de codificação
📝 Exercícios
- Escreva uma página completa: Crie um arquivo HTML com a estrutura correta de
!DOCTYPE,html,head,body. No corpo, adicione um títuloh1, um parágrafop, uma quebra de linhabre um divisorhr. - Prática de aninhamento: Use as tags
pestrongpara escrever uma frase com aninhamento correto, depois escreva deliberadamente um exemplo com aninhamento cruzado incorreto. Observe como o navegador renderiza as duas versões de forma diferente.
