HTML: a Estrutura do Documento

HTML (HyperText Markup Language) é a linguagem que define a estrutura de uma página web. Não é uma linguagem de programação — HTML não tem variáveis, condições ou loops. É uma linguagem de marcação: você descreve o que cada pedaço de conteúdo é (um parágrafo, um título, uma lista), e o navegador decide como exibir.

A unidade básica do HTML é o elemento. Um elemento é composto por uma tag de abertura, um conteúdo e uma tag de fechamento:

<p>Este é um parágrafo.</p>

A tag <p> diz ao navegador: “o conteúdo entre <p> e </p> é um parágrafo”. Existem dezenas de tags — <h1> a <h6> para títulos, <ul> e <li> para listas, <a> para links, <img> para imagens. Cada tag carrega significado semântico: um <button> não é um <div> estilizado. O navegador, leitores de tela e motores de busca tratam cada um de forma diferente.

Elementos podem ter atributos — informações adicionais na tag de abertura:

<a href="https://ufs.br">Site da UFS</a>
<img src="logo.png" alt="Logo do TamoJunto">

O href diz para onde o link aponta. O alt descreve a imagem para quem não pode vê-la (leitores de tela, conexões lentas). Atributos configuram o comportamento; o conteúdo entre as tags define o que aparece.

O esqueleto de uma página

Toda página HTML segue uma estrutura mínima:

Arquivo: web/index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>TamoJunto</title>
</head>
<body>
  <h1>Eventos</h1>
  <p>Conteúdo vai aqui.</p>
</body>
</html>

Código 6-1: Estrutura mínima de uma página HTML.

O <head> contém metadados — título da aba, codificação de caracteres, referências a arquivos CSS. Nada do <head> aparece na página em si. O <body> é o conteúdo visível.

Um card de evento

Vamos criar um card estático para um evento do TamoJunto. Por enquanto, os dados são escritos diretamente no HTML — depois conectamos na API.

Arquivo: web/index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>TamoJunto - Eventos</title>
</head>
<body>
  <h1>Eventos</h1>

  <article>
    <h2>Hackathon UFS</h2>
    <time datetime="2026-09-15T08:00">15/09/2026, 08:00</time>
    <p>Maratona de programação de 24h aberta a todos os cursos</p>
    <p>📍 Centro de Vivência - UFS</p>
    <p>Vagas: 50</p>
    <p>Organizado por Ana Silva</p>
    <button>RSVP</button>
  </article>
</body>
</html>

Código 6-2: Um card de evento com HTML semântico.

Abre esse arquivo no navegador (basta dar um duplo clique) e você verá algo feio. Texto preto sobre fundo branco, sem nenhuma separação visual entre os elementos. Tudo grudado. Mas a estrutura está correta:

<article> marca um bloco de conteúdo independente — faz sentido sozinho, fora do contexto da página.
<h2> é um título de segundo nível (o <h1> é “Eventos”, o título da página).
<time> associa um texto legível por humano (15/09/2026, 08:00) a um valor padronizado (datetime="2026-09-15T08:00") que máquinas entendem. Calendários e motores de busca usam esse atributo.
<button> é um botão nativo do navegador. Ele recebe foco pelo teclado, é ativado com Enter ou Espaço, e leitores de tela o anunciam como “botão”. Um <div> precisaria de código extra para fazer tudo isso.

A escolha dos elementos importa. O navegador já traz comportamento embutido para <button>, <a>, <form>, <input>. Usar as tags certas significa menos código e melhor acessibilidade.

Keyboard shortcuts

Programação B