Semântica: outline HTML e estados que não mentem

h1/h2 de verdade, button vs link, warning ≠ error, draft ≠ approved. CSS bonito não conserta HTML oco.

Front-End

Que tipo de artigo é este? Semântica como produto: o outline do documento e o significado das cores de estado — o que o leitor de tela e o operador entendem sem “explicar a UI”.

Tese Visual-only (div clicável, título em span) é dívida. Estado colapsado em cor errada é mentira operacional.

Outline visual versus semantico — Figura 1 — CSS grande não conserta HTML vazio.

<!-- ERRADO -->
<div class="big-title">Pedidos</div>
<span class="linkish" onclick="go()">Abrir</span>

<!-- CERTO -->
<h1>Pedidos</h1>
<a href="/pedidos/123">Abrir</a>
<button type="button">Salvar rascunho</button>

Estados com significado

Warning não é error. Rascunho não é aprovado. Info não é “mais um azul”. No design system, cada tom tem contrato — Feedback outline (FILL 0), severidade alinhada ao SoT vivo, não ao feeling do card.

Quatro estados warning error draft success — Figura 2 — Quatro significados; zero carnaval de cor.

warning  → atenção (ainda age)
error    → bloqueia / crítico
draft    → neutro (ainda não enviou)
success  → só após critério real
info     ≠ “qualquer azul bonito”

label / field / error associados de verdade.
EmptyState: título e ícone no contrato do componente — não ng-content improvisado.
Copy de handoff: 2ª pessoa clara, não jargão de fila interna.

Estados com significado

Continuar lendo