Ficha 01 · HTML5 semântico e formulários

Parte I · Semântica

Exercício 1 · Corrigir markup (20 pts)

Reescreve este código usando HTML semântico:

<div class="topo">
  <div class="titulo">A Minha Loja</div>
  <div class="menu">
    <div class="link">Início</div>
    <div class="link">Produtos</div>
  </div>
</div>
<div class="conteudo">
  <div class="post">
    <div class="post-titulo">Novidades</div>
    <div class="post-texto">Texto...</div>
  </div>
</div>
<div class="rodape">© 2026</div>

Exercício 2 · Escolher tag (15 pts)

Qual o elemento semântico mais adequado?

a) Barra de navegação principal. ___

b) Notícia independente reutilizável. ___

c) Conteúdo lateral (publicidade, links relacionados). ___

d) Data de publicação de um artigo. ___

e) Imagem com legenda. ___

Parte II · Estrutura

Exercício 3 · Documento completo (15 pts)

Escreve a estrutura mínima de um documento HTML5 válido, com charset, viewport, título e lang em português.

Exercício 4 · Hierarquia de headings (10 pts)

Esta estrutura tem problemas de acessibilidade. Identifica e corrige:

<h1>Blog</h1>
<h3>Primeiro artigo</h3>
<h5>Subsecção</h5>
<h2>Segundo artigo</h2>
<h1>Rodapé</h1>

Parte III · Formulários

Exercício 5 · Formulário acessível (25 pts)

Constrói um formulário de registo com: - Nome (texto, obrigatório, mín. 2 caracteres). - Email (obrigatório). - Idade (número, 13-120). - Plano (rádio: Grátis/Pro). - Aceitar termos (checkbox obrigatório). - Botão submeter.

Todos os campos com labels associados.

Registar ```

Pontos avaliados: label for ligado a id; tipos correctos (email, number); validação HTML5 (required, min, max, minlength); fieldset/legend para os radios.

Exercício 6 · Tipos de input (15 pts)

Qual o tipo de input HTML5 ideal para cada caso (e que vantagem traz em mobile)?

a) Número de telefone. ___

b) Data de nascimento. ___

c) Pesquisa no site. ___

d) Avaliação de 1 a 10 (deslizante). ___

e) Cor de fundo preferida. ___