Livro Como escrever na internet
O problema real de colocar texto na web
A maioria das pessoas não percebe que escrever para internet é algo completamente diferente de escrever para papel ou para um documento word. Quando você coloca texto em uma página web, precisa pensar em HTML, em estrutura semântica, em como os navegadores interpretam o conteúdo e em como isso aparece em diferentes telas. Comecei a fazer isso há anos atrás, quando ainda tentava entender por que um artigo que eu escrevia ficava completamente diferente no Firefox e no Safari.
O primeiro erro comum é escrever apenas em `
` e `
`. Isso funciona, mas não funciona bem.
Como escrever internet usando HTML correto
A forma mais direta de começar é usando tags semânticas. A estrutura básica de um documento web exige ``, ``, `` com meta tags de charset e viewport, e `` com o conteúdo. Dentro do body, os elementos importam mais do que você imagina. Usar `` para conteúdo principal, `` para agrupamentos temáticos, `` para navegação, `` para conteúdo secundário — isso não é só estética, é o que permite que screen readers e mecanismos de busca entendam a hierarquia do que você escreveu.
Eu já perdi horas tentando debuggar um layout que quebrava em dispositivos móveis porque esqueci de fechar uma div dentro de uma section. O navegador ia tentando adivinhar onde a tag terminava e criava uma árvore DOM incorreta. A correção foi simples: validar o HTML com o W3C Markup Validation Service e corrigir as tags não fechadas. O serviço é gratuito em validator.w3.org.
Dentro do corpo do texto, use `` para ênfase real (não apenas visual), `` para itálico com peso semântico, e `` para trechos de código. Evite `` e `` — eles existem por razões históricas, mas não carregam significado.
Meta tags que fazem diferença prática
Muitos iniciantes ignoram completamente o ``, mas é ali que você define como seu conteúdo será exibido quando compartilhado. O `` aparece na aba do navegador e nos resultados de busca. O ` ` não afeta diretamente o ranking, mas controla o snippet que as pessoas veem antes de clicar. Eu já vi páginas que pareciam irrelevantes nos resultados simplesmente porque a descrição estava em branco ou repetia o título.
Para compartilhamento em redes sociais, adicione Open Graph tags (`og:title`, `og:description`, `og:image`, `og:url`). Sem elas, o Facebook, Twitter e LinkedIn vão adivinhar — e geralmente escolhem imagens erradas ou textos sem sentido. O Twitter usa cards específicos, então também vale adicionar `twitter:card` e `twitter:title`.
Performance e a questão do arquivo único
Cada recurso externo que você carrega — CSS, JavaScript, fontes — adiciona uma requisição HTTP. Num projeto pequeno isso não incomoda, mas quando você está otimizando uma página para carregar rápido, cada arquivo extra conta. A solução prática é concatenar folhas de estilo e scripts em arquivos únicos minificados. Fontes do Google Fonts podem ser hosteadas localmente se você souber quais pesos e conjuntos de caracteres realmente precisa — o que reduz uma requisição DNS e um download externo por família tipográfica.
Há um ponto que poucos mencionam: o atributo `rel="preload"` para fontes e CSS críticos. Ele diz ao navegador para priorizar aquele recurso antes que o parser chegue nele naturalmente. Em testes com Lighthouse, isso reduziu o tempo até o primeiro pint em cerca de 300 milissegundos em conexões 3G simuladas.
Estrutura de conteúdo que não quebra em telas pequenas
Escrever para internet significa escrever pensando em responsividade desde o início. Não é algo que se resolve depois com ajuste manual. Use unidades relativas (`rem`, `em`, `%`, `vw`) ao invés de pixels fixos para tamanhos de fonte e espaçamentos. Defina uma largura máxima para containers de texto — algo entre 65 e 75 caracteres por linha é o ideal para legibilidade. Eu costumo usar `max-width: 65ch` no container principal do artigo.
Tabelas são o pesadelo clássico. Uma tabela com dez colunas e quinze linhas em uma tela de celular vira um scroll horizontal frustrante. A solução prática é envolver a tabela em um `` com `overflow-x: auto` e dar a ela uma largura mínima. Funciona, mas o usuário ainda precisa arrastar. Se os dados forem complexos, considere transformar a tabela em cards verticais via CSS com media queries.
Um detalhe que quase ninguém considera
Acessibilidade não é só sobre leitores de tela. É sobre contraste de cores, foco visível em elementos interativos, e semântica correta. Eu já vi um formulário de contato inteiro quebrar porque o desenvolvedor usou `
` com `onclick` ao invés de `
` — o que significa que quem navega por teclado simplesmente não conseguia enviar o formulário. Correção: substituir o div por um button real e remover o handler inline. A página ficou 4 segundos mais rápida também, porque o JavaScript inline era executado a cada clique.
Validação visual com ferramentas como axe ou o lighthouse do Chrome mostra problemas de acessibilidade que passam despercebidos. Rodar essa verificação antes de publicar evita retrabalho e deixa o conteúdo realmente disponível para qualquer pessoa.
👉 Clique no botão abaixo para saber mais sobre o assunto!
SAIBA MAIS