# Aula 1.2 - HTML semântico, formulários e acessibilidade

## Identificação

- **Duração:** 2 horas
- **Tipo:** teoria aplicada e laboratório
- **Entrega:** estrutura HTML completa da landing page Knowledge AI
- **Código de referência:** [`../exemplos/aula-1.2/index.html`](../exemplos/aula-1.2/index.html)

## Introdução

### O que é HTML?

HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. É a linguagem utilizada para descrever a estrutura e o conteúdo de uma página Web.

HTML não é responsável principalmente pela aparência e não é uma linguagem de programação tradicional. Ele informa ao navegador:

- isto é um título;
- isto é um parágrafo;
- isto é uma lista;
- isto é uma navegação;
- isto é um formulário;
- isto é um botão.

### O que significa “semântico”?

Semântica é significado. HTML semântico utiliza elementos que descrevem a função do conteúdo, em vez de criar uma coleção de caixas sem significado.

Compare:

```html
<div class="botao">Enviar</div>
```

Com:

```html
<button type="submit">Enviar</button>
```

Visualmente os dois podem parecer iguais, mas o segundo informa que existe uma ação. Navegadores, leitores de tela, mecanismos de busca e ferramentas de teste conseguem compreender melhor esse elemento.

### Por que aprender isso antes do CSS?

Uma página precisa continuar organizada mesmo sem aparência personalizada. Primeiro estruturamos o conteúdo; depois utilizamos CSS para apresentá-lo e JavaScript para adicionar comportamento.

```text
HTML -> estrutura e significado
CSS -> aparência e layout
JavaScript -> comportamento
```

## Objetivos

Ao final da aula, o aluno deverá conseguir:

1. explicar a função semântica dos principais elementos HTML;
2. organizar uma página com landmarks;
3. construir uma hierarquia coerente de títulos;
4. diferenciar links e botões;
5. criar um formulário associado corretamente a seus rótulos;
6. escrever textos alternativos adequados para imagens;
7. utilizar validações nativas sem prejudicar a experiência;
8. navegar pela página utilizando apenas o teclado.

## Pré-requisitos

- conclusão da Aula 1.1;
- arquivo `index.html` criado;
- noções de cliente, servidor, URL e HTTP;
- saber abrir o DevTools.

## Pergunta orientadora

> Como escrever uma página que possa ser compreendida por pessoas, navegadores, leitores de tela e mecanismos de busca?

## Roteiro sugerido

| Etapa | Duração |
|---|---:|
| Retomada da aula anterior | 10 min |
| Semântica, landmarks e títulos | 25 min |
| Links, botões e imagens | 20 min |
| Formulários acessíveis | 25 min |
| Laboratório guiado | 25 min |
| Teste por teclado e fechamento | 15 min |

## 1. O que é HTML

HTML descreve a estrutura e o significado do conteúdo de uma página.

O HTML não deve ser tratado apenas como uma ferramenta para posicionar elementos visualmente. Aparência será responsabilidade principal do CSS; comportamento será responsabilidade principal do JavaScript.

```text
HTML -> estrutura e significado
CSS -> apresentação
JavaScript -> comportamento
```

Essa separação não é absoluta, mas ajuda a manter o projeto compreensível e sustentável.

## 2. Elementos semânticos

Um elemento semântico comunica a função de seu conteúdo.

Compare:

```html
<div class="topo">
  <div class="titulo">Knowledge AI</div>
</div>
```

Com:

```html
<header>
  <h1>Knowledge AI</h1>
</header>
```

Os dois trechos podem receber a mesma aparência. O segundo, porém, descreve melhor a estrutura.

### Elementos importantes

| Elemento | Responsabilidade |
|---|---|
| `header` | Cabeçalho da página ou seção |
| `nav` | Conjunto principal de links de navegação |
| `main` | Conteúdo principal e único da página |
| `section` | Agrupamento temático com título |
| `article` | Conteúdo independente ou reutilizável |
| `aside` | Conteúdo complementar |
| `footer` | Rodapé da página ou seção |
| `address` | Informações de contato |

### Regra prática

Não escolha um elemento pelo visual padrão do navegador. Escolha pelo significado do conteúdo.

## 3. Landmarks

Landmarks são regiões que ajudam tecnologias assistivas e usuários a navegar pela página.

Uma estrutura comum:

```html
<header>
  <nav aria-label="Navegação principal">
    <!-- links -->
  </nav>
</header>

<main id="conteudo">
  <!-- conteúdo principal -->
</main>

<footer>
  <!-- informações finais -->
</footer>
```

O link para pular navegação permite ir diretamente ao conteúdo:

```html
<a href="#conteudo">Pular para o conteúdo</a>
```

Ele será estilizado na próxima aula para aparecer quando receber foco.

## 4. Hierarquia de títulos

Os títulos organizam o documento.

```text
h1 - assunto principal da página
  h2 - seção principal
    h3 - subseção
```

Para a landing page:

```text
h1 Knowledge AI
  h2 Conhecimento confiável para sua equipe
  h2 Como funciona
  h2 Recursos
    h3 Organize
    h3 Pergunte
    h3 Verifique
  h2 Entre na lista de espera
```

### Boas práticas

- mantenha um assunto principal claro;
- não escolha `h4` porque ele parece menor;
- não use título vazio;
- evite saltar níveis sem uma razão estrutural;
- utilize CSS para modificar tamanho e aparência.

## 5. Parágrafos, listas e ênfase

Utilize:

- `p` para parágrafos;
- `ul` para listas sem ordem;
- `ol` para etapas ordenadas;
- `strong` para importância;
- `em` para ênfase.

Não utilize vários elementos `br` para criar espaçamento. O espaçamento será controlado por CSS.

## 6. Links e botões

Uma das decisões mais importantes da interface:

- link leva o usuário para outro endereço ou região;
- botão executa uma ação.

```html
<a href="#lista-espera">Entrar na lista de espera</a>

<button type="submit">Quero participar</button>
```

Evite:

```html
<a href="#" onclick="salvar()">Salvar</a>
```

Se a intenção é salvar, o elemento correto é um botão.

### Tipos de botão

Dentro de formulários:

```html
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
<button type="button">Abrir ajuda</button>
```

Defina o tipo explicitamente para evitar envios acidentais.

## 7. Imagens

Toda imagem precisa de uma decisão sobre o texto alternativo.

### Imagem informativa

O texto alternativo comunica a informação essencial:

```html
<img
  src="assets/fluxo-conhecimento.svg"
  alt="Documentos são processados para gerar respostas acompanhadas de fontes"
>
```

### Imagem decorativa

Utilize texto alternativo vazio:

```html
<img src="assets/detalhe-decorativo.svg" alt="">
```

Não comece obrigatoriamente com “imagem de”. O leitor de tela já anuncia que se trata de uma imagem.

### Figura com legenda

```html
<figure>
  <img
    src="assets/fluxo-conhecimento.svg"
    alt="Documentos passam pela Knowledge AI antes da resposta"
  >
  <figcaption>
    A resposta mantém ligação com os documentos consultados.
  </figcaption>
</figure>
```

## 8. Formulários acessíveis

O formulário da lista de espera terá nome, e-mail, perfil e aceite.

### Rótulos

Cada campo precisa de um rótulo associado:

```html
<label for="email">E-mail profissional</label>
<input id="email" name="email" type="email" required>
```

O `for` do rótulo deve corresponder ao `id` do campo.

Placeholder não substitui rótulo:

```html
<!-- Evitar -->
<input type="email" placeholder="Digite seu e-mail">
```

O placeholder desaparece durante a digitação e normalmente apresenta contraste reduzido.

### Nome e propósito

```html
<input
  id="nome"
  name="nome"
  type="text"
  autocomplete="name"
  required
>

<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  required
>
```

- `id` relaciona o campo ao rótulo;
- `name` identifica o dado enviado;
- `type` informa o formato esperado;
- `autocomplete` ajuda o preenchimento;
- `required` aplica validação nativa.

### Ajuda adicional

```html
<label for="email">E-mail profissional</label>
<p id="ajuda-email">Enviaremos apenas atualizações sobre o projeto.</p>
<input
  id="email"
  name="email"
  type="email"
  aria-describedby="ajuda-email"
  required
>
```

`aria-describedby` relaciona o campo ao texto de ajuda.

### Agrupamento

Campos relacionados podem ser agrupados:

```html
<fieldset>
  <legend>Seu principal interesse</legend>

  <label>
    <input type="radio" name="interesse" value="estudo">
    Estudo
  </label>

  <label>
    <input type="radio" name="interesse" value="trabalho">
    Trabalho
  </label>
</fieldset>
```

### Checkbox de aceite

```html
<label>
  <input type="checkbox" name="aceite" required>
  Concordo em receber informações sobre o projeto.
</label>
```

O aceite deve ser claro. Não utilize uma opção pré-selecionada para obter consentimento.

## 9. Metadados essenciais

No `head`:

```html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
  name="description"
  content="Organize documentos e encontre respostas acompanhadas das fontes utilizadas."
>
<title>Knowledge AI - Conhecimento confiável para sua equipe</title>
```

O título deve identificar a página. A descrição deve resumir seu conteúdo de maneira honesta e útil.

## 10. Laboratório guiado

### Passo 1 - Estrutura global

Crie:

- link para pular ao conteúdo;
- `header`;
- `nav`;
- `main`;
- `footer`.

### Passo 2 - Navegação

Adicione links para:

- início;
- como funciona;
- recursos;
- lista de espera.

### Passo 3 - Seção principal

Inclua:

- título;
- proposta de valor;
- chamada para ação;
- figura explicativa.

### Passo 4 - Como funciona

Utilize uma lista ordenada:

1. envie os documentos;
2. faça uma pergunta;
3. confira a resposta e suas fontes.

### Passo 5 - Recursos

Crie três artigos:

- organize;
- pergunte;
- verifique.

Cada artigo deve possuir título e descrição.

### Passo 6 - Formulário

Inclua:

- nome;
- e-mail;
- perfil;
- aceite;
- botão de envio.

O formulário ainda não enviará dados para um servidor. O comportamento será adicionado em aulas posteriores.

## 11. Teste com teclado

Sem utilizar o mouse:

1. pressione `Tab`;
2. encontre o link para pular ao conteúdo;
3. percorra a navegação;
4. acesse a chamada para ação;
5. preencha todos os campos;
6. altere o campo de seleção;
7. marque o aceite;
8. ative o botão.

### Observe

- é possível identificar onde está o foco?
- a ordem de navegação é coerente?
- algum elemento interativo fica inacessível?
- clicar no rótulo ativa o campo correspondente?
- os erros nativos são compreensíveis?

O foco será estilizado na Aula 1.3. Não o remova.

## 12. Exercício de fixação

Acrescente uma seção de perguntas frequentes utilizando:

```html
<details>
  <summary>Meus documentos serão usados para treinar modelos?</summary>
  <p>
    O tratamento dos documentos dependerá da política e da configuração
    adotadas pelo serviço.
  </p>
</details>
```

Crie pelo menos três perguntas:

- privacidade;
- fontes das respostas;
- formatos aceitos.

## 13. Desafio individual

Crie uma página adicional chamada `privacidade.html`.

Ela deve conter:

- título da página;
- data de atualização;
- quais dados seriam coletados;
- finalidade da coleta;
- tempo de retenção;
- contato;
- link para retornar à página inicial.

O objetivo não é produzir um documento jurídico definitivo, mas praticar estrutura, navegação e clareza.

## 14. Erros comuns

### Utilizar `div` para tudo

`div` é útil quando nenhum elemento semântico representa corretamente o agrupamento. Não deve ser a escolha automática.

### Utilizar título por aparência

O nível do título representa hierarquia. O CSS definirá o tamanho visual.

### Remover o contorno de foco

```css
/* Não fazer sem criar uma alternativa visível */
*:focus {
  outline: none;
}
```

Sem indicação de foco, usuários de teclado podem perder sua posição.

### Usar placeholder como rótulo

Campos precisam de rótulos persistentes.

### Repetir o mesmo `id`

Cada `id` deve ser único na página.

### Colocar botão dentro de link

Não aninhe elementos interativos:

```html
<!-- Inválido e confuso -->
<a href="/cadastro"><button>Cadastrar</button></a>
```

Utilize somente o elemento que representa a intenção.

### Escrever texto alternativo excessivo

O texto alternativo deve comunicar a função ou informação essencial, não descrever cada detalhe visual.

## 15. Lista de verificação de entrega

- [ ] O documento declara `<!doctype html>`.
- [ ] O idioma está definido.
- [ ] O `head` possui charset, viewport, descrição e título.
- [ ] Existe um link para pular ao conteúdo.
- [ ] Existe apenas um `main`.
- [ ] A navegação possui nome acessível.
- [ ] Os títulos formam uma hierarquia coerente.
- [ ] Links navegam e botões executam ações.
- [ ] Imagens possuem texto alternativo adequado.
- [ ] Todos os campos possuem rótulos associados.
- [ ] Os campos possuem `name`.
- [ ] O botão do formulário possui tipo explícito.
- [ ] A página pode ser utilizada por teclado.
- [ ] Não existem IDs duplicados.

## 16. Critérios de aceite

A entrega será aceita quando:

1. a página possuir todas as regiões solicitadas;
2. a navegação interna funcionar;
3. a hierarquia de títulos representar o conteúdo;
4. o formulário puder ser preenchido somente com teclado;
5. rótulos e campos estiverem associados;
6. imagens tiverem alternativas coerentes;
7. o HTML estiver legível e organizado;
8. não houver elementos interativos aninhados;
9. o aluno justificar a escolha entre link e botão;
10. o aluno demonstrar pelo menos uma validação nativa.

## 17. Perguntas para revisão

1. Qual é a principal responsabilidade do HTML?
2. Quando devemos utilizar `section`?
3. Qual é a diferença entre link e botão?
4. Por que placeholder não substitui `label`?
5. Para que servem `fieldset` e `legend`?
6. Quando uma imagem deve possuir `alt=""`?
7. Por que não devemos remover o indicador de foco?
8. Qual é a diferença entre `id` e `name` em um campo?

## Próxima aula

Na Aula 1.3, a estrutura receberá identidade visual, layout responsivo, Flexbox, Grid, propriedades personalizadas e estados de foco, sem comprometer a semântica construída nesta aula.