Todo Site Começa com um Arquivo HTML

Ilustração de uma mesa de desenvolvedor com um notebook mostrando código HTML, cercado de post-its sobre semântica, acessibilidade e performance, livros de programação e uma caneca escrita "café + código + foco"

A Folha em Branco e o Primeiro Caractere

A primeira vez que abri um arquivo .html em branco, achei que era só o começo — uma etapa que eu passaria rapidamente para chegar ao “conteúdo real”: JavaScript, React, os frameworks que eu via todo mundo usando.

Demorei um tempo para perceber que tinha entendido errado o problema.

Todo framework moderno, todo CMS e praticamente toda aplicação web acabam gerando HTML.

React gera HTML
Angular gera HTML
Next.js gera HTML
WordPress gera HTML

No fim do caminho, o navegador sempre recebe a mesma coisa: um documento HTML. Conhecer essa linguagem não é um pré-requisito que você cumpre e esquece. É o chão em que tudo o mais está assentado.

Sobre a Escolha das Ferramentas

Hoje praticamente todo desenvolvedor usa VS Code, Cursor, Windsurf ou outro editor moderno. Eles oferecem autocomplete, depuração e integração com IA — e isso é ótimo.

Mas existe algo que acontece quando você escreve um arquivo HTML à mão, sem sugestões automáticas. Cada tag mal fechada quebra o layout. Cada atributo esquecido tem uma consequência visível. Você começa a entender o código não como texto que o editor formata, mas como instruções que o navegador vai executar literalmente.

Isso não é nostalgia por dificuldade. É a diferença entre saber dirigir e entender como o motor funciona. Você não precisa do segundo para o primeiro, mas quando o carro estranha, faz diferença.

O Esqueleto Padrão

Todo arquivo HTML segue uma estrutura com relação de pai e filho que define a hierarquia da página. Imagine que estamos construindo um guia de viagem para São Paulo: precisamos de um contêiner que segure tudo, de um lugar para as configurações que o leitor não vê e de um lugar para o conteúdo que ele vê.

A indentação não é só estética. Ela revela a hierarquia. Código sem recuo transforma uma estrutura lógica em ruído.

O esqueleto fundamental:

<!DOCTYPE html>: Informa ao navegador qual versão do HTML está sendo usada. Sem isso, alguns navegadores entram em “modo de compatibilidade” e renderizam a página de forma imprevisível.
<html lang="pt-BR">: O elemento raiz. O atributo lang permite que leitores de tela pronunciem o texto corretamente e que mecanismos de busca identifiquem o idioma.
<head>: Os metadados, configurações que não aparecem na tela mas controlam o comportamento da página.
<body>: Tudo o que o usuário vê está aqui.

Essa estrutura existe há décadas e vai continuar existindo. Vale a pena entendê-la de verdade, não decorá-la.

O que Vai no `<head>`

O <head> é onde você faz promessas ao navegador. Você diz o idioma do conteúdo, o tamanho esperado da tela, como interpretar os caracteres.

No HTML5, algumas dessas promessas ficaram mais simples: não precisamos mais informar type="text/css" em links nem type="text/javascript" em scripts. O navegador já assume esses padrões.

O que não pode faltar:

<meta charset="UTF-8">: Sem isso, acentos e símbolos aparecem como caracteres quebrados. Um bug que parece absurdo mas ainda confunde quem está começando.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Permite ao site responder ao tamanho da tela. Antes disso, todo site mobile parecia uma versão desktop comprimida.
<title>: O texto que aparece na aba do navegador, no histórico e nos favoritos. É mais importante do que parece.
<meta name="description" content="...">: O trecho que o Google pode exibir nos resultados de busca. Mantenha em torno de 160 caracteres.
<link rel="stylesheet" href="style.css">: A conexão com a folha de estilos.

Cada linha aqui tem uma função específica. Não é burocracia, é comunicação com o ambiente onde seu código vai rodar.

Hierarquia de Conteúdo

HTML não é só marcação visual. É a estrutura lógica do documento.

O HTML oferece tags do <h1> ao <h6>. A tentação é usá-las pelo tamanho que produzem no browser. Mas o que elas comunicam é hierarquia: este é o título principal, este é um subtítulo, este está dois níveis abaixo. Um leitor de tela navega pelo documento usando essa hierarquia. Um robô de busca a usa para entender o que é mais importante.

No nosso guia de São Paulo, o <h1> seria “Guia de São Paulo”. Os bairros seriam <h2>. Os pontos dentro de cada bairro, <h3>.

A tag <p> delimita parágrafos. Para ênfase, use tags que carregam significado:

<strong>: Indica importância, renderizado em negrito.
<em>: Indica ênfase, renderizado em itálico.

A diferença entre usar <strong> e aplicar font-weight: bold no CSS é que o primeiro carrega intenção semântica. O segundo é só aparência.

Links e Imagens

A web é construída sobre dois elementos simples: links e imagens.

<a>: A tag de âncora usa o atributo href para definir o destino. URLs absolutas apontam para outros domínios; URLs relativas navegam internamente no mesmo site. Use target="_blank" para abrir links externos em novas abas, sempre acompanhado de rel="noopener". Sem ele, a página de destino pode acessar informações da janela original.
<img>: Exige o atributo src (caminho) e o alt (texto alternativo). O alt não é opcional: é o que aparece quando a imagem falha e o que leitores de tela descrevem para usuários com deficiência visual.

Sobre performance: Imagens são o principal motivo de sites lentos.

Comprima seus arquivos antes de publicar. Se você usa Mac, o Image-Optim resolve bem. Defina width e height no HTML para que o navegador reserve o espaço da imagem e evite o salto de conteúdo durante o carregamento.

Prefira formatos modernos como WebP ou AVIF quando possível.

Listas e Tabelas

Para o guia de São Paulo, uma lista ordenada funcionaria bem para destacar os pontos que não se pode perder:

O Mercado Municipal.
A Sala São Paulo.
Os estádios de futebol.
Museus (Memorial da América Latina, Museu da Língua Portuguesa).

<ul> serve para listas sem ordem definida; <ol> para quando a sequência importa.

Tabelas seguem a hierarquia <table>, <tr> (linha), <th> (cabeçalho) e <td> (dado). O atributo colspan permite que uma célula ocupe múltiplas colunas. Use tabelas para dados tabulares, não para layout. Esse foi um vício dos anos 90 do qual o HTML ainda se recupera.

Semântica

Por muito tempo, o HTML era uma coleção de <div> com classes descritivas. Funcionava, mas o código não se explicava: <div class="header"> e <div class="footer"> diziam a mesma coisa que <header> e <footer>, só que com mais caracteres e menos clareza.

O HTML5 trouxe tags que carregam significado:

Tag Genérica	Tag Semântica	Propósito
`<div>`	`<header>`	Cabeçalho da página ou de uma seção específica.
`<div>`	`<nav>`	Bloco de links de navegação principal.
`<div>`	`<main>`	O conteúdo central e único do documento.
`<div>`	`<section>`	Agrupamento temático de conteúdo.
`<div>`	`<article>`	Conteúdo independente (ex: um post sobre a Vila Madalena).
`<div>`	`<aside>`	Conteúdo secundário ou lateral (como uma nota de rodapé).
`<div>`	`<footer>`	Rodapé com informações de autoria e direitos.

O benefício não é só para mecanismos de busca. É para o próximo desenvolvedor que abrir o arquivo, possivelmente você mesmo, seis meses depois.

Formulários e Interatividade

<form> e <input> são onde o HTML encontra o usuário de verdade. Dá para capturar textos, senhas, escolhas múltiplas (checkbox) ou únicas (radio).

O HTML5 trouxe os Atributos Personalizados (com o prefixo data-), que armazenam metadados para serem lidos por scripts sem invalidar o código. É uma forma limpa de passar informação entre HTML e JavaScript sem gambiarra.

Para incorporar conteúdos externos, como vídeos, usamos o <iframe>. Um detalhe de segurança que costuma surpreender: grandes sites como a Amazon bloqueiam seus domínios em iframes para evitar ataques de phishing. Sempre verifique se o site de destino permite essa conexão.

No fluxo completo, o HTML estrutura os dados, o JavaScript reage a eles e o servidor os processa. Cada camada com sua responsabilidade.

Conclusão

Quando comecei a estudar desenvolvimento web, queria aprender frameworks. Com o tempo percebi que eles mudam muito mais rápido do que os fundamentos.

HTML continua praticamente o mesmo há décadas. Entender sua estrutura não é cumprir um pré-requisito: é construir uma base que não vai ficar obsoleta na próxima versão de algum framework.

Frameworks aparecem e somem. O HTML que você aprende hoje vai continuar funcionando daqui a dez anos.

Referências

Inspirado no conteúdo do Frontend Roadmap.