HTML

• <details> e <summary>

  Cria um acordeão colapsável nativo do HTML, sem JavaScript. O <summary> é o título clicável; o restante dentro do <details> é o conteúdo oculto.

  O atributo open faz o elemento começar expandido.

  <details open>

  <summary>Clique aqui</summary>

  <p>Conteúdo oculto</p>

  </details>

  Clique para expandir

  Este é o conteúdo escondido que aparece ao abrir o details. Tudo nativo, sem JS.

• <dialog>

  Modal nativo do HTML. Controlado via JavaScript com .showModal() e .close(). O atributo open o exibe inline (sem backdrop).

  Quando aberto com .showModal(), cria um backdrop automático estilizável via ::backdrop no CSS.

  <dialog id="modal">

  <p>Conteúdo do modal</p>

  <button onclick="modal.close()">Fechar</button>

  </dialog>

  
  

  modal.showModal()

  Abrir Modal

  Este é um <dialog> nativo do HTML!

  Fechar

  Clique no botão acima

• <datalist>

  Adiciona sugestões de autocomplete a um <input>. O usuário ainda pode digitar livremente — não é um select obrigatório.

  Vinculado ao input via atributo list que aponta para o id do datalist.

  <input list="frutas" />

  
  

  <datalist id="frutas">

  <option value="Maçã" />

  <option value="Banana" />

  </datalist>

  Digite uma fruta: Tente digitar "m"

• <progress> e <meter>

  <progress> — barra de progresso de uma tarefa. Use value e max. Sem value, fica em estado indeterminado (animado).

  <meter> — representa um valor dentro de um intervalo conhecido (ex: uso de disco). Muda de cor conforme low, high e optimum.

  <progress value="70" max="100"></progress>

  
  

  <meter value="0.8" low="0.3" high="0.7" optimum="0.5"></meter>

  progress (70%)

  progress (indeterminado)

  meter (0.8 — fora do otimum, fica vermelho)

  meter (0.5 — no otimum, fica verde)

• Tags Semânticas de Texto

  Tag	Uso	Exemplo visual
  <abbr>	Abreviação com tooltip ao passar o mouse (atributo title).	HTML
  <time>	Data/hora legível para máquinas via atributo datetime.	1º de Janeiro de 2025
  <mark>	Destaca texto com fundo amarelo (relevância/busca).	Resultado da busca aqui.
  <kbd>	Representa uma tecla do teclado.	Pressione Ctrl + C
  <sub> / <sup>	Texto subscrito e sobrescrito.	H2O  |  x2
  <del> / <ins>	Texto removido (riscado) e inserido (sublinhado). Semântico, não apenas visual.	R$ 99,90 R$ 59,90
  <figure> / <figcaption>	Envolve imagens, gráficos ou blocos de código com uma legenda semântica.	img

• Tipos do <input>

  O atributo type muda completamente o comportamento e a aparência do input — validação, teclado mobile, UI nativa do navegador.

  type="text"

  Texto livre. Padrão quando o type é omitido.

  type="password"

  Oculta os caracteres digitados.

  type="email"

  Valida formato de e-mail nativamente. Teclado mobile inclui @.

  type="number"

  Apenas números. Suporta min, max e step.

  type="range"

  Slider de intervalo. Atributos min, max e step.

  type="date"

  Seletor de data nativo do navegador.

  type="time"

  Seletor de horário nativo (hh:mm).

  type="color"

  Seletor de cor nativo. Retorna valor hexadecimal.

  Clique para abrir o color picker

  type="file"

  Upload de arquivo. Use accept para filtrar tipos e multiple para vários arquivos.

  type="checkbox"

  Caixa de seleção. checked define o estado inicial. Pode ter vários com o mesmo name.

  Opção marcada Opção desmarcada

  type="radio"

  Seleção única dentro de um grupo. Mesmo name = mesmo grupo.

  Opção A Opção B Opção C

  type="search"

  Igual ao text, mas o navegador adiciona um botão de limpar (×) e otimiza para buscas.

  type="tel"

  Campo de telefone. Não valida formato, mas abre teclado numérico no mobile.

  type="url"

  Valida formato de URL nativamente (precisa ter http/https).

  type="hidden"

  Invisível para o usuário. Usado para enviar dados extras junto ao formulário (ex: IDs, tokens). Não tem representação visual.

  <input type="hidden" name="user_id" value="42" />  ← invisível na tela

  Atributos Úteis do <input>

  Atributo	Descrição
  required	Torna o campo obrigatório — o form não envia sem ele preenchido.
  disabled	Desativa o campo — não pode ser editado nem enviado no form.
  readonly	Campo visível e enviado no form, mas não editável pelo usuário.
  placeholder	Texto de dica exibido quando o campo está vazio.
  autofocus	Foca automaticamente nesse campo ao carregar a página.
  pattern	Valida o valor com uma expressão regular. Ex: pattern="[0-9]{"{5}"}" para CEP.
  maxlength / minlength	Limita o número máximo/mínimo de caracteres permitidos.
  autocomplete	Controla o autopreenchimento do navegador. Ex: "off", "email", "new-password".