Fabrício Silva

Todo Site Começa com um Arquivo HTML

| Tempo de leitura ~6 minutos

HTML

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.

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:

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:

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:

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.

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

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:

  1. O Mercado Municipal.
  2. A Sala São Paulo.
  3. Os estádios de futebol.
  4. 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