HTML Semântico e Acessível

No Starter, todo o seu código rodava em um único lugar: o terminal. Você escrevia TypeScript, o Node.js executava, e o resultado aparecia como texto no console.log. Era um ambiente previsível — sem telas, sem cliques, sem cores, sem layout. Agora isso muda. A partir deste módulo, seu código vai rodar dentro de um navegador, e o resultado não é mais uma linha de texto no terminal: é uma página inteira, visual, com a qual uma pessoa real vai interagir.

Antes de escrever a primeira tag HTML, vale entender o quadro geral: o que exatamente é uma página web, quais linguagens a compõem e o que o navegador faz, de fato, entre o momento em que ele recebe um arquivo e o momento em que você vê algo na tela. Esse entendimento vai te acompanhar durante todo o curso — inclusive quando, mais adiante, você estiver depurando um layout quebrado ou um componente React que não renderiza como esperado.

As três linguagens da web, e por que elas são separadas

Toda página web "tradicional" é construída com três linguagens, cada uma com uma responsabilidade bem definida:

• HTML (HyperText Markup Language) define a estrutura e o conteúdo da página: quais textos existem, onde estão os títulos, onde estão as imagens, onde existe um formulário. É o esqueleto.
• CSS (Cascading Style Sheets) define a apresentação: cores, espaçamentos, tamanhos, posicionamento, fontes. É a aparência.
• JavaScript define o comportamento: o que acontece quando alguém clica em um botão, o que acontece depois que os dados chegam de um servidor, o que muda na tela sem a página inteira recarregar. É a interatividade.

Essa separação não é acidental — é um princípio de design chamado separação de responsabilidades (separation of concerns), e ele existe por um motivo muito prático: cada uma dessas camadas pode mudar sem quebrar as outras. Você pode trocar completamente a paleta de cores de um site (CSS) sem tocar em uma linha do texto (HTML) ou da lógica (JavaScript). Pode reescrever a lógica de um formulário (JavaScript) sem mexer no visual. Pode reorganizar o conteúdo (HTML) sem que o site perca o estilo.

Pense em construir uma casa: o HTML é a planta e a alvenaria — paredes, cômodos, portas, onde cada coisa fica. O CSS é a pintura, o piso, a decoração — o que faz a casa parecer acolhedora ou moderna. O JavaScript é a parte elétrica e hidráulica — o que faz interruptores acenderem luzes e torneiras liberarem água. As três são necessárias, mas ninguém pinta a parede antes de erguê-la, e ninguém espera que a fiação elétrica defina onde fica a porta da cozinha.

Neste módulo, você vai focar nas duas primeiras camadas: HTML (estrutura) e CSS (apresentação). A terceira, JavaScript rodando no navegador, é o assunto do próximo módulo do curso.

De um arquivo de texto a pixels na tela

Um arquivo HTML é, no fundo, só texto puro — o mesmo tipo de arquivo que um .ts ou um .txt. Não existe mágica dentro dele. A mágica está no programa que o lê: o navegador. Quando você abre uma página, o navegador passa por um processo em várias etapas para transformar aquele texto em algo visível e interativo. Entender essas etapas, mesmo que de forma resumida, ajuda muito a entender por que certas coisas acontecem do jeito que acontecem (por que um CSS não carregado deixa a página "feia", por que um script no topo da página pode atrasar o carregamento, etc.).

De forma simplificada, o navegador faz o seguinte:

1. Recebe o HTML (baixado da internet ou lido do disco) e começa a interpretá-lo (parse), de cima para baixo.
2. Enquanto interpreta o HTML, constrói uma estrutura de dados na memória chamada DOM (Document Object Model) — uma representação em árvore de cada elemento da página.
3. Ao encontrar um <link rel="stylesheet"> ou uma tag <style>, o navegador interpreta o CSS e constrói uma estrutura parecida, chamada CSSOM (CSS Object Model).
4. O navegador combina DOM e CSSOM para calcular exatamente onde cada elemento vai ficar e qual tamanho vai ter — essa etapa se chama layout (ou reflow).
5. Por fim, o navegador pinta (paint) cada elemento na tela, na ordem e posição calculadas, respeitando cores, bordas, sombras e tudo mais.
6. Se houver JavaScript, ele é executado e pode alterar o DOM em tempo real — o que faz o navegador refazer partes desse processo (recalcular layout, repintar a tela) automaticamente.

Nenhuma dessas etapas exige que você escreva código para "mandar o navegador fazer isso" — ele faz isso sozinho, sempre, para qualquer página. O seu trabalho como desenvolvedor(a) é escrever um HTML e um CSS corretos, e o navegador se encarrega do resto.

A árvore DOM: o navegador enxerga estrutura, não texto solto

Um detalhe importante: o navegador não vê o HTML como uma sequência de caracteres — ele o interpreta como uma hierarquia, uma árvore de elementos aninhados uns dentro dos outros. Cada tag vira um nó dessa árvore, e tags dentro de outras tags viram nós "filhos".

Veja este HTML simples:

<body>
  <header>
    <h1>Meu Painel Financeiro</h1>
  </header>
  <main>
    <p>Saldo atual: R$ 1.240,00</p>
  </main>
</body>

O navegador enxerga isso, conceitualmente, como a árvore abaixo:

body
├── header
│   └── h1 ("Meu Painel Financeiro")
└── main
    └── p ("Saldo atual: R$ 1.240,00")

Essa árvore é exatamente o que o CSS usa para decidir onde aplicar cada estilo (por exemplo, uma regra que diz "todo p dentro de main") e é exatamente o que o JavaScript manipula quando precisa adicionar, remover ou alterar algo na página em tempo real — assunto que você vai explorar a fundo no próximo módulo. Por ora, o importante é internalizar essa ideia: HTML bem escrito gera uma árvore bem organizada, e uma árvore bem organizada é mais fácil de estilizar, de tornar acessível e, futuramente, de manipular com código.

Com esse quadro geral em mente, é hora de efetivamente escrever HTML. E a primeira coisa a deixar clara é: HTML não é sobre deixar a página "bonita" — isso é trabalho do CSS, que vem no próximo capítulo. HTML é sobre descrever o que cada pedaço de conteúdo é: isto é um título, isto é uma lista, isto é um formulário, isto é um link. O navegador (e, tão importante quanto, ferramentas como leitores de tela) usam essa descrição para decidir como exibir e como navegar pela página.

Escrever HTML "que funciona visualmente" é relativamente fácil. Escrever HTML semântico — que descreve corretamente o significado de cada parte — é a diferença entre uma página amadora e uma página profissional, acessível e bem indexada por buscadores. É esse padrão que você vai aprender aqui.

Anatomia de um documento HTML

Todo arquivo HTML válido segue uma estrutura mínima obrigatória. Veja o esqueleto mais simples possível de uma página:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard de Finanças</title>
  </head>
  <body>
    <h1>Bem-vindo ao seu painel financeiro</h1>
  </body>
</html>

Vamos entender cada peça:

• <!DOCTYPE html>: não é uma tag, é uma declaração que diz ao navegador "interprete este arquivo segundo as regras do HTML5". Sem ela, navegadores antigos podem entrar em um modo de compatibilidade estranho (quirks mode), então ela é sempre a primeira linha do arquivo.
• <html lang="pt-BR">: o elemento raiz, que envolve toda a página. O atributo lang declara o idioma principal do conteúdo — isso não é cosmético: leitores de tela usam essa informação para escolher a pronúncia correta, e buscadores usam para segmentar resultados por idioma.
• <head>: contém metadados — informações sobre a página que não aparecem diretamente no conteúdo visual, como o título da aba do navegador, o charset, a viewport e, mais adiante, o link para o arquivo CSS.
• <body>: contém tudo que é visível na página — todo o conteúdo real que a pessoa vai ler e interagir.

Dentro do <head>, duas tags <meta> aparecem quase sempre:

• <meta charset="UTF-8" />: declara a codificação de caracteres do arquivo. UTF-8 suporta acentos, cedilhas e caracteres especiais — essencial para qualquer página em português. Sem ela, palavras como "não" ou "opções" podem aparecer corrompidas.
• <meta name="viewport" ...>: instrui navegadores mobile a renderizar a página na largura real da tela do dispositivo, em vez de simular uma tela de desktop e depois encolher tudo. Você vai entender essa tag com mais profundidade no capítulo de layout, mas já é hora de sempre incluí-la.

Estruturando texto: headings, parágrafos e listas

Com o esqueleto pronto, o próximo passo é preencher o <body> com conteúdo textual. HTML oferece tags específicas para os padrões mais comuns de texto.

Headings (h1 a h6)

As tags <h1> até <h6> representam títulos e subtítulos, em ordem decrescente de importância. <h1> é o título principal da página, <h2> são seções principais, <h3> subseções dentro delas, e assim por diante.

<h1>Dashboard de Finanças</h1>
<h2>Resumo do Mês</h2>
<h3>Gastos por Categoria</h3>

Parágrafos

A tag <p> representa um parágrafo de texto — o bloco básico de conteúdo textual corrido.

<p>
  Este mês você gastou R$ 1.850,00, distribuídos entre alimentação, transporte
  e lazer.
</p>

Listas

HTML tem duas tags principais de lista:

• <ul> (unordered list): uma lista sem ordem específica, onde cada item é marcado com um <li>. É usada quando a ordem dos itens não importa para o sentido do conteúdo.
• <ol> (ordered list): uma lista numerada, também com itens em <li>, usada quando a sequência importa (um passo a passo, um ranking).

<h3>Categorias de gastos</h3>
<ul>
  <li>Alimentação</li>
  <li>Transporte</li>
  <li>Moradia</li>
  <li>Lazer</li>
  <li>Saúde</li>
</ul>

<h3>Como registrar um novo gasto</h3>
<ol>
  <li>Clique em "Adicionar gasto"</li>
  <li>Preencha descrição, valor e categoria</li>
  <li>Confirme o registro</li>
</ol>

Repare que a categoria de gastos usa <ul> (a ordem em que as categorias aparecem não muda o significado), enquanto o passo a passo usa <ol> (a ordem importa: você não confirma antes de preencher).

Links e imagens

Links com <a>

A tag <a> (anchor) cria um link, usando o atributo href para definir o destino:

<a href="https://mbacademy.dev">Visite a MB Academy</a>
<a href="/relatorios">Ver relatórios</a>
<a href="#resumo">Ir para o resumo</a>

O href pode apontar para um site externo (URL completa), para outra página do mesmo site (caminho relativo, como /relatorios) ou para uma âncora dentro da própria página (#resumo, que aponta para um elemento com id="resumo").

Quando um link abre um site externo em uma nova aba, é boa prática usar target="_blank" junto com rel="noopener noreferrer":

<a href="https://mbacademy.dev" target="_blank" rel="noopener noreferrer">
  MB Academy
</a>

Imagens com <img>

A tag <img> é auto-fechada — não tem conteúdo interno nem tag de fechamento — e exige dois atributos essenciais: src (o caminho do arquivo de imagem) e alt (um texto alternativo).

<img src="/logo.png" alt="Logotipo do Dashboard de Finanças" />

O alt não é decoração: é o texto que aparece se a imagem não carregar, e é o texto que um leitor de tela vai ler em voz alta no lugar da imagem. Uma imagem sem alt é, para uma pessoa cega usando um leitor de tela, uma lacuna sem explicação nenhuma no meio do conteúdo.

HTML semântico: contando a história certa da página

Até aqui, você viu tags de conteúdo (headings, parágrafos, listas, links, imagens). Mas como organizar as regiões maiores de uma página — o cabeçalho, o menu de navegação, o conteúdo principal, o rodapé? Por muito tempo, a resposta padrão era usar <div> para tudo, diferenciando as regiões só por class ou id:

<!-- Como NÃO fazer -->
<div class="topo">...</div>
<div class="menu">...</div>
<div class="conteudo">...</div>
<div class="rodape">...</div>

Isso funciona visualmente, mas para o navegador (e para qualquer ferramenta ou pessoa lendo o código), todas essas <div> são genéricas e indistinguíveis — não carregam nenhum significado próprio. O HTML5 introduziu tags semânticas específicas para essas regiões, que descrevem o papel de cada uma:

Reescrevendo o exemplo anterior com tags semânticas:

<header>
  <h1>Dashboard de Finanças</h1>
  <nav>
    <a href="/">Início</a>
    <a href="/gastos">Gastos</a>
    <a href="/relatorios">Relatórios</a>
  </nav>
</header>

<main>
  <section>
    <h2>Resumo do Mês</h2>
    <p>Saldo atual: R$ 1.240,00</p>
  </section>

  <section>
    <h2>Últimos Gastos</h2>
    <article>
      <h3>Supermercado</h3>
      <p>R$ 320,00 — Alimentação</p>
    </article>
    <article>
      <h3>Uber</h3>
      <p>R$ 45,00 — Transporte</p>
    </article>
  </section>
</main>

<footer>
  <p>&copy; 2026 Dashboard de Finanças</p>
</footer>

Repare que cada tag agora diz o que é, sem precisar de um class="menu" para você entender que aquilo é a navegação. Isso traz três benefícios concretos:

1. Acessibilidade: leitores de tela reconhecem essas tags como "landmarks" (marcos de navegação), permitindo que a pessoa pule diretamente para <main> ou <nav> sem precisar ouvir a página inteira.
2. SEO: buscadores como o Google usam a semântica para entender a estrutura e a importância relativa do conteúdo.
3. Legibilidade para quem programa: outro desenvolvedor (ou você mesmo, seis meses depois) entende a estrutura da página só de olhar as tags, sem precisar ler nomes de classes.

Atributos importantes: id, class, href, alt

Você já viu href (em links) e alt (em imagens). Faltam dois atributos que você vai usar em praticamente toda tag daqui em diante:

• id: identifica um elemento de forma única na página — não pode haver dois elementos com o mesmo id. É usado para âncoras internas (href="#resumo"), para associar um <label> a um campo de formulário (você vai ver isso já já), e, mais adiante no curso, para ser encontrado por CSS ou JavaScript.
• class: identifica um elemento como pertencente a um grupo — o mesmo class pode (e geralmente deve) se repetir em vários elementos. É a principal forma de aplicar o mesmo estilo CSS a vários elementos ao mesmo tempo, como você verá no próximo capítulo.

<section id="resumo-mensal">
  <h2>Resumo do Mês</h2>
  <p class="valor-positivo">Saldo: R$ 1.240,00</p>
</section>

<a href="#resumo-mensal">Voltar ao resumo</a>

Formulários: coletando informações do usuário

Formulários são como uma página coleta dados de quem a está usando — e são especialmente importantes para o nosso projeto: é assim que o dashboard financeiro vai registrar um novo gasto.

A tag raiz de um formulário é <form>. Dentro dela, cada campo de entrada é geralmente um <input>, cujo comportamento muda conforme o atributo type:

<form>
  <label for="descricao">Descrição</label>
  <input type="text" id="descricao" name="descricao" placeholder="Ex.: Supermercado" required />

  <label for="valor">Valor (R$)</label>
  <input type="number" id="valor" name="valor" min="0" step="0.01" required />

  <label for="data">Data</label>
  <input type="date" id="data" name="data" required />

  <label for="categoria">Categoria</label>
  <select id="categoria" name="categoria">
    <option value="alimentacao">Alimentação</option>
    <option value="transporte">Transporte</option>
    <option value="moradia">Moradia</option>
    <option value="lazer">Lazer</option>
    <option value="saude">Saúde</option>
    <option value="outros">Outros</option>
  </select>

  <label for="observacoes">Observações</label>
  <textarea id="observacoes" name="observacoes" placeholder="Opcional"></textarea>

  <button type="submit">Adicionar gasto</button>
</form>

Vamos destrinchar os elementos novos:

• <label>: o texto que descreve um campo. O atributo for deve ter exatamente o mesmo valor do id do campo que ele descreve — essa ligação faz o rótulo ser clicável (clicar no texto foca o campo) e, mais importante, faz leitores de tela anunciarem o rótulo correto quando o campo recebe foco.
• type do <input>: define o tipo de dado esperado e, em muitos casos, a interface que o navegador mostra. Alguns dos mais usados:
  • text — texto livre
  • number — números, com teclado numérico em dispositivos móveis
  • email — valida formato de e-mail automaticamente
  • date — abre um seletor de data nativo
  • checkbox e radio — seleção de opções (única ou múltipla)
  • password — oculta o texto digitado
• placeholder: um texto de exemplo que aparece dentro do campo vazio, e desaparece ao digitar. Serve como dica, nunca como substituto de um <label>.
• required: impede o envio do formulário se o campo estiver vazio — validação nativa do navegador, sem precisar de JavaScript.
• <select> e <option>: cria uma lista suspensa. Cada <option> representa um valor possível; o atributo value é o que será efetivamente enviado (o texto entre as tags é só o que aparece visualmente).
• <textarea>: como um <input type="text">, mas para texto longo, com múltiplas linhas.
• <button type="submit">: o botão que envia o formulário. Existe também type="button" (não envia nada por padrão, usado quando o clique é tratado por JavaScript) e type="reset" (limpa o formulário).

Acessibilidade: por que a semântica não é só boa prática

Ao longo deste capítulo, "acessibilidade" apareceu várias vezes, e vale explicar concretamente o que ela significa: é a prática de construir páginas que qualquer pessoa consiga usar, independentemente de como ela interage com o computador. Isso inclui pessoas com deficiência visual (usando leitores de tela, que leem a página em voz alta), pessoas com dificuldades motoras (que navegam só pelo teclado, sem mouse), e pessoas com deficiências cognitivas (que se beneficiam de estrutura clara e previsível).

Um leitor de tela não "vê" a página como você vê. Ele percorre a árvore DOM e anuncia cada elemento pelo seu papel semântico: "cabeçalho", "link, Início", "campo de formulário, Descrição, obrigatório", "botão, Adicionar gasto". Tudo o que você aprendeu neste capítulo — usar <nav> em vez de <div class="menu">, usar <label> corretamente, manter uma hierarquia de headings sem pular níveis, usar alt em imagens — existe justamente para que essa leitura automática faça sentido.

Pense desta forma: HTML semântico é, ao mesmo tempo, a forma mais correta e a forma mais acessível de escrever HTML. Não são dois objetivos concorrentes — são o mesmo objetivo. Quando você escolhe a tag certa para cada conteúdo, você automaticamente torna a página mais acessível, sem esforço extra.

Para praticar

Cenário: você vai construir o esqueleto estático da página inicial do Dashboard de Finanças Pessoais — ainda sem nenhum CSS ou JavaScript, só a estrutura HTML semântica e o formulário de cadastro de gastos.

Requisitos:

1. Crie um arquivo index.html com a estrutura mínima obrigatória (<!DOCTYPE html>, <html lang="pt-BR">, <head> com charset, viewport e <title>, e <body>).
2. No <body>, crie um <header> contendo um <h1> com o título "Dashboard de Finanças" e uma <nav> com três links: "Início", "Gastos" e "Relatórios".
3. Crie um <main> com duas <section>, cada uma com seu próprio <h2>:
   • A primeira seção, "Resumo do Mês", com um parágrafo mostrando o saldo atual.
   • A segunda seção, "Adicionar Gasto", contendo um <form> com campos para descrição (texto), valor (número), categoria (<select> com pelo menos 4 categorias) e data, cada um com seu <label> corretamente associado, além de um botão de envio.
4. Crie um <footer> com um parágrafo de direitos autorais.
5. Garanta que não há nenhum salto de hierarquia entre headings (por exemplo, não pule de <h1> para <h3>).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard de Finanças</title>
  </head>
  <body>
    <header>
      <h1>Dashboard de Finanças</h1>
      <nav>
        <a href="/">Início</a>
        <a href="/gastos">Gastos</a>
        <a href="/relatorios">Relatórios</a>
      </nav>
    </header>

    <main>
      <section id="resumo">
        <h2>Resumo do Mês</h2>
        <p>Saldo atual: R$ 1.240,00</p>
      </section>

      <section id="novo-gasto">
        <h2>Adicionar Gasto</h2>
        <form>
          <label for="descricao">Descrição</label>
          <input
            type="text"
            id="descricao"
            name="descricao"
            placeholder="Ex.: Supermercado"
            required
          />

          <label for="valor">Valor (R$)</label>
          <input type="number" id="valor" name="valor" min="0" step="0.01" required />

          <label for="categoria">Categoria</label>
          <select id="categoria" name="categoria">
            <option value="alimentacao">Alimentação</option>
            <option value="transporte">Transporte</option>
            <option value="moradia">Moradia</option>
            <option value="lazer">Lazer</option>
            <option value="saude">Saúde</option>
            <option value="outros">Outros</option>
          </select>

          <label for="data">Data</label>
          <input type="date" id="data" name="data" required />

          <button type="submit">Adicionar gasto</button>
        </form>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Dashboard de Finanças</p>
    </footer>
  </body>
</html>

Você acabou de construir sua primeira página HTML de verdade: com estrutura semântica, formulário funcional (mesmo sem lógica ainda) e uma hierarquia de conteúdo que faz sentido tanto visualmente quanto para tecnologias assistivas. Repare que, se você abrir esse arquivo em um navegador agora, tudo funciona — só não tem nenhuma cor, espaçamento ou organização visual. É exatamente essa lacuna que o CSS, o assunto do próximo capítulo, vai preencher.