HTML faz isso?!
Fechar clicando fora, Esc para sair, accordion que fecha os irmãos por conta própria, imagem que só carrega quando chega perto da viewport: o HTML faz isso sem uma linha de JavaScript. Todos os exemplos abaixo funcionam nesta página, então dá para clicar e conferir.
O HTML vem engolindo grandes fatias do que antes era território do JavaScript. A lista abaixo reúne funcionalidades dinâmicas que hoje se resolvem apenas com marcação. Para auditar o que dá para tirar do seu projeto por causa disso, vale o guia sobre como o Baseline ajuda a usar menos JavaScript.
popover
Suporte nos navegadores: popover →
Fechamento ao clicar fora, Esc para fechar, nenhum z-index para administrar até levar o elemento à top layer. Tudo gerenciado pelos atributos popover e popovertarget (mais o popovertargetaction) no HTML. (MDN)
Demonstração: popover controlado por botão
Sem JavaScript, só mágica de navegador moderno, graças ao pessoal maravilhoso que especifica a web e constrói nossos navegadores!
<button popovertarget="exemplo-popover">Alternar popover</button><div id="exemplo-popover" popover> <p>Sem JavaScript, só mágica de navegador moderno, graças ao pessoal maravilhoso que especifica a web e constrói nossos navegadores!</p> <button popovertarget="exemplo-popover" popovertargetaction="hide">Fechar</button></div><dialog>
Suporte nos navegadores: dialog →
A coisa funciona de modo parecido com o popover, só que desta vez com um elemento dedicado a caixas de diálogo modais. (MDN)
Veja command e commandfor mais abaixo para outro recurso, de chegada bem mais recente, que permite abrir e fechar elementos dialog (e que será útil para um monte de outras funcionalidades sem JS, um dia!). Por aqui, o elemento já rendeu um guia sobre usar e estilizar dialog.
Demonstração: dialog aberto pelo atributo popover
<button popovertarget="exemplo-dialog">Alternar popover do <dialog></button><dialog id="exemplo-dialog" popover> <p>Mais uma vez o atributo <code>popover</code> está fazendo o trabalho pesado por aqui!</p> <button popovertarget="exemplo-dialog" popovertargetaction="hide">Fechar</button></dialog>Mesmo indo um pouco contra o espírito desta lista, vale incluir o trecho curto de como interagir com elementos dialog pelo JavaScript:
Demonstração: dialog aberto por JavaScript
<button id="exemplo-dialog-js-open">Abrir dialog</button><dialog id="exemplo-dialog-js"> <p>Este aqui é aberto com <code>.showModal()</code> e fechado com <code>.close()</code>, ambos chamados a partir do JavaScript.</p> <button id="exemplo-dialog-js-close">Fechar</button></dialog>document.getElementById("exemplo-dialog-js-open").addEventListener("click", () => { document.getElementById("exemplo-dialog-js").showModal()})document.getElementById("exemplo-dialog-js-close").addEventListener("click", () => { document.getElementById("exemplo-dialog-js").close()})<details> agrupado
Suporte nos navegadores: details name →
Um atributo name compartilhado transforma um grupo de <details> num accordion exclusivo. Abra um e os outros fecham automaticamente. Mágica! (MDN)
Demonstração: accordion exclusivo com details name
Primeiro
Abra o segundo e veja este fechar por conta própria.
Segundo
O primeiro já está escondido agora.
<details name="exemplo-grupo"> <summary>Primeiro</summary> <p>Abra o segundo e veja este fechar por conta própria.</p></details><details name="exemplo-grupo"> <summary>Segundo</summary> <p>O primeiro já está escondido agora.</p></details>command e commandfor
Suporte nos navegadores: invoker commands →
Botões HTML separados controlando um popover. Sem script nenhum. (MDN)
Demonstração: dois botões controlando o mesmo popover
<button command="show-popover" commandfor="exemplo-command-popover">Abrir</button><button command="hide-popover" commandfor="exemplo-command-popover">Fechar</button><dialog id="exemplo-command-popover" popover> <p>O <code>show-popover</code> abre isto e o <code>hide-popover</code> fecha!</p> <button command="hide-popover" commandfor="exemplo-command-popover">Fechar</button></dialog>loading="lazy"
Suporte nos navegadores: loading-lazy-attr →
A imagem abaixo adia o carregamento até chegar perto da viewport. Nenhum IntersectionObserver à vista. (MDN)
<img src="/images/blog/html-faz-isso/html-faz-isso.webp" loading="lazy" width="1000" height="525" alt="Lousa escura com a palavra HTML em amarelo, cercada por desenhos de giz">hidden="until-found"
Suporte nos navegadores: hidden until-found →
Navegar até o link de fragmento abaixo revela a seção escondida. O navegador remove o hidden="until-found" sozinho. (MDN)
Demonstração: conteúdo revelado pela busca do navegador
Yahaha! Você me achou!
<a href="#exemplo-until-found">Ir para o conteúdo escondido</a><div id="exemplo-until-found" hidden="until-found"> <p>Yahaha! Você me achou!</p></div>Mais elementos nativos
“Suporte nos navegadores”: input-color →, input-range →, input-datetime →, meter →, progress →
Seletores de cor, data e intervalo, medidores e barras de progresso embutidos no navegador. (MDN: input de cor, MDN: input de data, MDN: input de intervalo, MDN: meter, MDN: progress)
Demonstração: controles nativos de formulário
Progresso:
Medidor: baixo
<label>Cor <input type="color" value="#663399" autocomplete="off"></label><label>Data <input type="date" autocomplete="off"></label><label>Intervalo <input type="range" min="0" max="100" value="50" autocomplete="off"></label><progress value="42" max="100">42%</progress><meter min="0" value="50" max="100" low="20" high="80" optimum="90"></meter><datalist>
“Suporte nos navegadores”: datalist →
Sugestões de autocomplete nativas, sem precisar de biblioteca de dropdown. (MDN)
Demonstração: autocomplete nativo com datalist
<label>Elemento HTML favorito <input type="text" id="exemplo-datalist-input" list="exemplo-datalist" autocomplete="off"></label><datalist id="exemplo-datalist"> <option value="a"> <option value="abbr"> <option value="address"> <!-- ... --></datalist>Sobre a página original
A página foi escrita e construída por Chris Burnell para o HTML Day 2026, durante o evento online organizado por Zachary Kai no sábado, 8 de agosto de 2026.
Correções e emendas à página são bem-vindas! O autor não se considera especialista, mas tentou representar as coisas com honestidade. Não use aquela página para justificar decisões ao seu chefe. Nem a você mesmo. E não esqueça que nem todo mundo navega na web como você navega. Divirta-se com esses recursos novinhos do HTML!