HTML: a estrutura da página

HTML é a única tecnologia desta lista que você usa sem instalar nada. Um arquivo de texto salvo no disco, aberto no navegador, já é uma página. É por isso que ele é o primeiro passo de qualquer caminho no desenvolvimento web.

O que o HTML resolve

Um navegador recebe texto e precisa saber o que fazer com ele. Sem marcação, tudo é a mesma coisa: título, parágrafo, item de lista e endereço de link viram um bloco só, indistinguível. O HTML resolve isso marcando o papel de cada pedaço do conteúdo.

Repare que o problema não é aparência. HTML não serve pra deixar bonito, e quando você tenta usá-lo pra isso, o resultado é frágil. Ele serve pra dizer o que é o quê. Quem cuida da aparência é o CSS, e essa separação é a ideia mais importante da página inteira.

As quatro ideias que sustentam qualquer página

• Elemento e tag. Um elemento é um pedaço de conteúdo com um papel: um parágrafo, um título, uma imagem. Você marca com tags, quase sempre em par, uma abrindo e uma fechando: <p>texto</p>.
• Aninhamento. Elementos moram dentro de elementos, e isso forma uma árvore. Um item de lista mora dentro de uma lista, que mora dentro do corpo da página. Quem abre por último fecha primeiro, sempre.
• Atributo. Informação extra sobre o elemento, escrita na tag de abertura: o endereço de um link em href, o texto alternativo de uma imagem em alt. Nem toda informação é conteúdo visível.
• Semântica. Existe tag certa pra cada papel. Um título de seção é <h2>, não um parágrafo em negrito. Isso importa porque leitor de tela, buscador e o próprio navegador leem essa marcação pra entender a página. Marcação errada continua aparecendo na tela e mesmo assim está errada.

A linguagem por dentro: elementos, atributos e a árvore

Antes de tudo, o que o HTML não tem: variável, condição, laço, função. Ele é linguagem de marcação, não de programação: descreve o que cada pedaço do conteúdo É, e quem decide o que fazer com isso são o navegador, o CSS e o JavaScript.

• Elemento é a unidade: tag de abrir, conteúdo, tag de fechar. <p>Olá</p>. Alguns não têm conteúdo e fecham em si (<img>, <br>).
• Atributo é informação extra na tag de abrir: <img src="foto.jpg" alt="descrição">. Dois deles são ganchos pro resto da stack: class (pro CSS estilizar) e id (pro JavaScript encontrar).
• Aninhamento vira árvore: elemento dentro de elemento cria a hierarquia que o navegador monta na memória, a mesma árvore que a página de JavaScript chama de DOM. Tag fechada fora de ordem quebra essa árvore.
• Semântica é escolher a tag pelo significado: <header>, <main>, <article>, <button>. Leitor de tela, buscador e o seu colega entendem a página por essas tags, não pela aparência.

<article class="card">
  <h2>Título do artigo</h2>
  <p>Um parágrafo com um <a href="/aprenda/">link</a> dentro.</p>
  <img src="capa.jpg" alt="capa do artigo" />
  <button type="button">Ler depois</button>
</article>

Cinco tags e você já leu a estrutura inteira sem ver a página. Esse é o teste de um HTML bom: dar pra entender o conteúdo só pela marcação.

Não precisa de editor especial, nem de servidor, nem de conexão. Precisa de um editor de texto e de um navegador, que você já tem.

1. Abra um editor de texto simples. No Windows serve o Bloco de Notas, no Mac o TextEdit em modo texto puro (menu Formatar, opção "Converter para texto simples"), no Linux qualquer editor. Se você já usa VS Code ou parecido, melhor ainda.

2. Cole isto:

   <!DOCTYPE html>
   <html lang="pt-BR">
     <head>
       <meta charset="UTF-8" />
       <title>Minha primeira página</title>
     </head>
     <body>
       <h1>Olá, mundo</h1>
       <p>Esta página está no meu computador e o navegador entendeu a estrutura dela.</p>
       <ul>
         <li>Um item</li>
         <li>Outro item</li>
       </ul>
       <p><a href="https://xentory.com.br/aprenda/stack-web/">Voltar para o mapa</a></p>
     </body>
   </html>

3. Salve como ola.html, numa pasta que você ache depois. A extensão precisa ser .html, não .txt. No Bloco de Notas, escolha "Todos os arquivos" no tipo antes de salvar, senão ele acrescenta .txt no fim sem avisar.

4. Dê dois cliques no arquivo. Ele abre no seu navegador padrão.

Uma coisa pra experimentar antes de sair

Troque o <h1> por <h2>, salve e recarregue a página com F5. O texto encolhe. Você não mudou nada de aparência, mudou o papel do elemento, e a aparência veio junto. É esse encadeamento que o CSS vai assumir depois, quando você quiser um título pequeno sem mentir sobre a hierarquia da página.

O que o HTML não é

HTML não é linguagem de programação. Não tem condição, não tem repetição, não tem variável, não calcula nada. É linguagem de marcação: ela descreve, não decide. Quem decide é o JavaScript.

Essa distinção não é preciosismo de vocabulário. Ela explica por que "sei HTML" não responde a uma vaga de programação, e por que ainda assim ninguém programa pra web sem saber HTML.

Fontes

• MDN Web Docs, HTML, a referência que os próprios fabricantes de navegador mantêm. Conferida em 15/08/2026.
• HTML Living Standard (WHATWG), a especificação em si, onde o comportamento do <!DOCTYPE html> e o aninhamento válido estão definidos. Conferida em 15/08/2026.

O hello world desta página foi escrito e aberto no navegador em 15/08/2026, e a prova descrita acima é o que apareceu na tela.

Para continuar

O próximo passo natural é CSS: pegar exatamente este arquivo e mudar a aparência dele sem tocar no conteúdo. Depois, JavaScript, pra página passar a reagir. Os três juntos são a base de tudo que vem depois no mapa.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.