O Que É HTML? Um Guia Simples da Linguagem por Trás de Toda Página Web

Toda página web que você já visitou, de um portal de notícias ao site do seu banco e a este artigo, chega ao seu aparelho como um arquivo de texto simples escrito em HTML. Dá para ver com os próprios olhos: num computador, abra qualquer site, clique com o botão direito num espaço vazio e escolha Ver código-fonte da página (ou aperte Ctrl+U no Windows, Option+Command+U no Mac, no Chrome). Aquele paredão de texto cheio de sinais de menor e maior é HTML.

HTML quer dizer HyperText Markup Language, ou linguagem de marcação de hipertexto. Parece técnico, mas a ideia é simples: o HTML é um jeito de etiquetar um texto para o navegador saber o que é cada parte. "Isto é um título." "Isto é um parágrafo." "Isto é um link para outra página." "Mostre uma imagem aqui." Este artigo explica, em linguagem simples, o que é o HTML, como ele funciona e como virou a base da web.

O que o nome quer dizer

• Hipertexto (HyperText) é texto com links. Você clica numa palavra e pula para outro documento. A ideia vem dos anos 1960, mas foi a web que a colocou no dia a dia.
• Marcação (Markup) é acrescentar etiquetas a um texto, como um revisor que marca um rascunho com notas do tipo "isto é um título" ou "ponha esta palavra em negrito".
• Linguagem (Language) quer dizer que há regras fixas para escrever essas etiquetas, e assim todo navegador as entende do mesmo jeito.

Ou seja, o HTML não é uma linguagem de programação. Ele não faz contas, não toma decisões e não repete passos. Ele descreve um documento: o que há nele e como as partes se encaixam. (Programadores adoram discutir isso, mas essa é a visão mais comum.)

Tags: as etiquetas do HTML

As etiquetas do HTML se chamam tags. Uma tag é uma palavra entre os sinais de menor e maior, como <p>, de parágrafo. A maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento, que tem uma barra, como </p>. O que fica entre elas é o conteúdo.

• A tag de abertura diz onde algo começa, e a tag de fechamento diz onde termina.
• Um atributo acrescenta uma informação extra dentro da tag de abertura. Num link, o atributo href diz para onde o link leva.
• A tag de abertura, o conteúdo e a tag de fechamento, juntos, se chamam elemento.
• Algumas tags, como <img> para imagens e <br> para quebra de linha, não têm conteúdo, então não têm tag de fechamento.

Repare no atributo alt da imagem. Ele é uma descrição curta da figura. Pessoas cegas que usam leitores de tela (programas que leem a página em voz alta) ouvem essa descrição no lugar da imagem, e ela também aparece se a imagem não carregar.

Sua primeira página web

Aqui está uma página web completa. Ela é só um arquivo de texto:

1<!DOCTYPE html>
2<html lang="pt-BR">
3  <head>
4    <meta charset="utf-8">
5    <title>Minha receita de panqueca</title>
6  </head>
7  <body>
8    <h1>Minha receita de panqueca</h1>
9    <p>O café da manhã <strong>mais fácil</strong> do mundo.</p>
10    <h2>Ingredientes</h2>
11    <ul>
12      <li>1 xícara de farinha</li>
13      <li>1 xícara de leite</li>
14      <li>1 ovo</li>
15    </ul>
16    <p>Saiba mais na
17      <a href="https://pt.wikipedia.org/wiki/Panqueca">Wikipédia</a>.
18    </p>
19    <button>Eu fiz!</button>
20  </body>
21</html>

Salvamos esse arquivo e o abrimos no Google Chrome. Foi exatamente isto que apareceu:

Vamos ler de cima para baixo:

• <!DOCTYPE html> avisa ao navegador: "esta é uma página HTML moderna".
• <html> envolve a página inteira. lang="pt-BR" diz que ela está em português do Brasil, o que ajuda os leitores de tela a pronunciar as palavras direito.
• <head> (cabeça) guarda informações sobre a página que não aparecem nela, como o <title>, que aparece na aba do navegador e nos resultados de busca.
• <body> (corpo) guarda tudo o que você de fato vê.
• <h1> é o título principal e <h2>, um título menor. Há seis níveis, até <h6>.
• <p> é um parágrafo, <strong> marca palavras importantes (mostradas em negrito), <ul> é uma lista com marcadores e cada <li> é um item dela.
• <a> é um link (o "a" vem de "anchor", âncora) e <button> é um botão. Este botão ainda não faz nada: fazê-lo reagir a um clique é trabalho do JavaScript.

A página parece simples porque não tem CSS, a linguagem que controla cores, fontes e layout. Sem ele, todo navegador usa o mesmo visual padrão: títulos grandes em negrito, marcadores e um botão cinza.

Experimente você mesmo

Você não precisa instalar nada:

1. Abra um editor de texto simples: o Bloco de Notas no Windows, ou o TextEdit no Mac (escolha Formatar e depois Converter em Texto Simples).
2. Copie o código acima para ele.
3. Salve como receita.html.
4. Dê um clique duplo no arquivo. Ele abre no seu navegador, e pronto, você fez uma página web.

Mude as palavras, salve e atualize o navegador para ver as mudanças.

A página é uma árvore

Quando o navegador lê o HTML, ele não o guarda como texto. Ele monta uma árvore a partir dele, como uma árvore genealógica: cada tag vira uma caixa, e as tags dentro dela viram as suas filhas.

Os programadores chamam essa árvore de DOM (Document Object Model, ou modelo de objetos do documento). É com ela que as outras duas linguagens da web trabalham. O CSS diz como cada caixa deve aparecer. O JavaScript pode acrescentar, remover ou mudar caixas a qualquer momento, e é assim que uma página mostra uma mensagem nova sem recarregar.

Um jeito comum de imaginar as três linguagens: o HTML é a estrutura de uma casa, o CSS é a pintura e a decoração, e o JavaScript é a eletricidade que faz as coisas funcionarem quando você aperta um interruptor.

Como o navegador mostra uma página

O arquivo HTML é sempre o primeiro a chegar. Imagens, vídeos, estilos e scripts são arquivos separados, e o HTML aponta para cada um deles com tags como <img>, <link> e <script>. Por isso, numa conexão lenta, às vezes você vê o texto de uma página antes das imagens ou do visual.

Tags que dizem o que é cada parte

Algumas tags não mudam a aparência de nada. Em vez disso, elas dizem o que é cada parte da página:

Isso se chama HTML semântico ("semântico" quer dizer "relativo ao significado"), e importa mais do que parece:

• Acessibilidade. Os leitores de tela usam essas tags para deixar visitantes cegos ou com baixa visão pularem direto para o menu ou para o conteúdo principal, em vez de ouvir a página inteira desde o começo.
• Buscadores. O Google e outros leem o HTML para entender do que uma página trata. Títulos e artigos ajudam.
• Modo leitura e outras ferramentas. O "modo leitura" do navegador, os tradutores e os assistentes de IA dependem do HTML para achar o conteúdo de verdade.

Daria para montar uma página inteira só com tags <div>, que são caixas genéricas, e ela poderia ficar idêntica. Mas, para um leitor de tela ou um buscador, seria uma página sem placas de sinalização.

O HTML perdoa erros

A maioria das linguagens de computador para com uma mensagem de erro se você digitar uma única coisa errada. O HTML não. Os navegadores são feitos para dar o seu melhor com o que recebem. Testamos com um arquivo bagunçado, em que esquecemos de fechar a tag do título:

O Chrome não mostrou erro nenhum. Ele deduziu que o título nunca terminou, colocou tudo dentro dele, e a página inteira virou um título gigante. E ainda fechou sozinho os parágrafos e os itens da lista.

Esse jeito tolerante foi uma escolha proposital, e é um dos motivos de a web ter crescido tão rápido: qualquer pessoa podia escrever uma página, e pequenos erros não a impediam de funcionar. Desde o HTML5, as regras dizem exatamente como os navegadores devem consertar páginas quebradas, então Chrome, Safari, Firefox e Edge as consertam do mesmo jeito.

As tags mais comuns

Dá para fazer muita coisa com um punhado de tags:

Por dentro de uma página web real

Como as páginas reais usam essas tags? Baixamos o arquivo HTML do artigo da Wikipédia em português sobre HTML e contamos cada tag:

• A página tem 2.387 tags de 49 tipos diferentes.
• A tag mais comum é o <span>, com 703, usado para estilizar pedaços de texto nos menus e nas referências. Logo atrás vem o link, <a>, com 568. Esse é o "hiper" de hipertexto: a Wikipédia é uma enorme teia de links.
• Só o arquivo HTML tem cerca de 242 KB, umas 109 vezes o tamanho do primeiro site da história.

O primeiro site ainda funciona

O HTML foi inventado por Tim Berners-Lee, um cientista britânico do CERN, o laboratório de física perto de Genebra, na Suíça. Em 1989 ele propôs um sistema para ajudar os cientistas a compartilhar documentos, e em 1991 já tinha construído o primeiro navegador, o primeiro servidor web e o primeiro site. O HTML se baseou numa linguagem de marcação mais antiga, o SGML, que o CERN já usava nos seus documentos.

O CERN ainda mantém uma cópia desse primeiro site no ar. Nós a abrimos no Chrome:

Ele tem só 2.217 bytes, menos que um e-mail curto. Não tem imagens, cores nem estilos, só títulos, texto e 25 links. Algumas das suas tags, como <NEXTID>, nem fazem mais parte do HTML, e mesmo assim um navegador de 2026 o abre sem problemas. Esse é um dos superpoderes discretos do HTML: páginas escritas há mais de 30 anos ainda funcionam.

O HTML não para de crescer

A primeira descrição do HTML, um documento de 1991 chamado "HTML Tags", listava menos de duas dúzias de tags. Contamos as tags na lista oficial de cada versão desde então:

No fim dos anos 1990, durante a "guerra dos navegadores" entre o Netscape e o Internet Explorer, da Microsoft, cada empresa inventava as próprias tags para ganhar usuários. O Netscape tinha o <blink>, que fazia o texto piscar, e o Internet Explorer tinha o <marquee>, que fazia o texto deslizar pela tela. Muitas páginas funcionavam num navegador e quebravam no outro.

As entidades de padronização entraram em cena. O World Wide Web Consortium (W3C), fundado por Berners-Lee em 1994, publicava as versões oficiais do HTML. Em 2004, a Apple, a Mozilla e a Opera, insatisfeitas com o rumo do W3C, formaram o seu próprio grupo, o WHATWG, e começaram o que viria a ser o HTML5. Ele trouxe vídeo e áudio sem plug-ins como o Flash, desenho com <canvas> e tags como <nav> e <article>. O HTML5 virou padrão oficial do W3C em 2014.

Hoje, o HTML é um "padrão vivo" (living standard): desde 2019 existe uma só versão, mantida pelo WHATWG junto com os fabricantes de navegadores, que recebe pequenas atualizações o tempo todo em vez de grandes versões numeradas. É por isso que ninguém fala em "HTML6".

Perguntas comuns

HTML é difícil de aprender? Não. Muitas vezes é a primeira coisa que as pessoas aprendem em desenvolvimento web. Dá para aprender as tags básicas numa tarde e fazer uma página de verdade no mesmo dia.

Preciso de HTML se uso um criador de sites? Não para começar. Ferramentas como WordPress, Wix ou Google Sites escrevem o HTML por você. Mas saber um pouco de HTML ajuda a consertar as coisas quando algo aparece errado.

O HTML ainda é usado, ou algo o substituiu? Toda página web ainda chega ao seu navegador como HTML. Muitos sites modernos são feitos com ferramentas e frameworks que o geram automaticamente, mas o que sai do outro lado é sempre HTML. Muitos apps de celular e até alguns programas de computador, como o VS Code, também são feitos com HTML por dentro.

Qual é a diferença entre HTML e um site? Um site normalmente é um conjunto de páginas HTML, mais CSS, JavaScript, imagens e um servidor que envia tudo isso. O HTML é a parte que guarda o conteúdo e a estrutura.

Glossário

• HTML: HyperText Markup Language (linguagem de marcação de hipertexto), a linguagem em que as páginas web são escritas.
• Tag: uma etiqueta entre os sinais de menor e maior, como <p>, que marca onde uma parte da página começa ou termina.
• Elemento: uma tag de abertura, o seu conteúdo e a tag de fechamento, juntos.
• Atributo: uma informação extra dentro da tag de abertura, como href num link ou alt numa imagem.
• Navegador: o app que você usa para visitar sites, como Chrome, Safari, Firefox ou Edge.
• DOM: a árvore de caixas que o navegador monta a partir do HTML.
• CSS: a linguagem que controla a aparência de uma página.
• JavaScript: a linguagem que deixa uma página interativa.
• HTML semântico: usar tags que descrevem o que é cada parte da página, como <nav> ou <article>.
• Leitor de tela: um programa que lê a página em voz alta para pessoas cegas ou com baixa visão.
• WHATWG: o grupo de fabricantes de navegadores que mantém o padrão HTML hoje.

Para encerrar

O HTML é a mais antiga e a mais simples das três linguagens da web, e aquela em que todo o resto se apoia. Ele é um conjunto de etiquetas que diz ao navegador o que é cada pedaço de texto: um título, um parágrafo, um link, uma imagem. Os navegadores transformam essas etiquetas numa árvore, enchem essa árvore de estilos e scripts e a desenham na sua tela, perdoando os seus erros pelo caminho.

O primeiro site tinha 2.217 bytes de HTML e ainda abre hoje. Se quiser experimentar, escreva a página da panqueca no Bloco de Notas, dê um clique duplo nela, e você terá construído o seu próprio pedacinho da web.