# HTML faz isso?!

> Popover, dialog, accordion exclusivo, invoker commands, lazy loading: recursos dinâmicos que o HTML resolve hoje sozinho, sem uma linha de JavaScript.

URL: https://dpw.dev/html/html-faz-isso/  
Publicado em: 2026-09-10  
Categoria: html  
Tags: interface, basico-da-web  
Autor: Tárcio Zemel

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.

> Artigo baseado em [HTML Can Do That](https://chrisburnell.com/html-can-do-that/).

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 <a href="/javascript/baseline-menos-javascript/" target="_blank">como o Baseline ajuda a usar menos JavaScript</a>.

## `popover`

**Suporte nos navegadores:** <a href="https://caniuse.com/mdn-html_global_attributes_popover" target="_blank" rel="noopener noreferrer">popover →</a>

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. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover" target="_blank" rel="noopener noreferrer">MDN</a>)

> **Demonstração interativa:** popover controlado por botão. Disponível na versão HTML desta página.

```html
<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:** <a href="https://caniuse.com/dialog" target="_blank" rel="noopener noreferrer">dialog →</a>

A coisa funciona de modo parecido com o `popover`, só que desta vez com um elemento dedicado a caixas de diálogo modais. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog" target="_blank" rel="noopener noreferrer">MDN</a>)

Veja <a href="#command-e-commandfor" target="_blank">`command` e `commandfor`</a> 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 <a href="/css/usar-estilizar-dialog-html-css/" target="_blank">guia sobre usar e estilizar dialog</a>.

> **Demonstração interativa:** dialog aberto pelo atributo popover. Disponível na versão HTML desta página.

```html
<button popovertarget="exemplo-dialog">Alternar popover do &lt;dialog&gt;</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 interativa:** dialog aberto por JavaScript. Disponível na versão HTML desta página.

```html
<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:** <a href="https://caniuse.com/wf-invoker-commands" target="_blank" rel="noopener noreferrer">invoker commands →</a>

Botões HTML separados controlando _um_ popover. Sem script nenhum. (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API" target="_blank" rel="noopener noreferrer">MDN</a>)

> **Nota:** **Nota:** até agora só `show-modal`, `close`, `request-close`, `toggle-popover`, `show-popover` e `hide-popover` chegaram estáveis nos navegadores. Dá para esperar invokers que incrementem e decrementem valores, interajam com elementos de mídia, copiem texto e assim por diante.

> **Demonstração interativa:** dois botões controlando o mesmo popover. Disponível na versão HTML desta página.

```html
<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:** <a href="https://caniuse.com/loading-lazy-attr" target="_blank" rel="noopener noreferrer">loading-lazy-attr →</a>

A imagem abaixo adia o carregamento até chegar perto da viewport. Nenhum <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">`IntersectionObserver`</a> à vista. (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading" target="_blank" rel="noopener noreferrer">MDN</a>)

![Lousa escura com a palavra HTML em amarelo, cercada por desenhos de giz de código, telas, lâmpada e ícones de web design](/images/blog/html-faz-isso/html-faz-isso.webp)

*Esta imagem carregou com loading=&quot;lazy&quot;, atributo que o componente de imagem do blog aplica por padrão.*

```html
<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:** <a href="https://caniuse.com/mdn-html_global_attributes_hidden_until-found" target="_blank" rel="noopener noreferrer">hidden until-found →</a>

Navegar até o link de fragmento abaixo revela a seção escondida. O navegador remove o `hidden="until-found"` sozinho. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden#using_the_until-found_value" target="_blank" rel="noopener noreferrer">MDN</a>)

> **Nota:** **Nota:** este ainda é bem novo e só se dá bem com a busca padrão do navegador. Com as implementações de busca de leitores de tela, por exemplo, a conversa é outra. Mesmo assim, vale guardar na manga para mais adiante!

> **Demonstração interativa:** conteúdo revelado pela busca do navegador. Disponível na versão HTML desta página.

```html
<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":** <a href="https://caniuse.com/datalist" target="_blank" rel="noopener noreferrer">datalist →</a>

Sugestões de autocomplete nativas, sem precisar de biblioteca de dropdown. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist" target="_blank" rel="noopener noreferrer">MDN</a>)

> **Atenção:** **Atenção!** O suporte a isso entre os tipos de input ainda é bem irregular, e há também uma série de problemas na implementação dentro dos navegadores. Veja <a href="https://adrianroselli.com/2023/06/under-engineered-comboboxen.html" target="_blank" rel="noopener noreferrer">Under-Engineered Comboboxen</a>, de Adrian Roselli, para mais informação. Talvez valha até pular este por enquanto e ficar de olho para ver se ele melhora nos próximos anos.

> **Demonstração interativa:** autocomplete nativo com datalist. Disponível na versão HTML desta página.

```html
<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 <a href="https://chrisburnell.com/" target="_blank" rel="noopener noreferrer">Chris Burnell</a> para o <a href="https://2026.html.energy/" target="_blank" rel="noopener noreferrer">HTML Day 2026</a>, durante o <a href="https://zacharykai.net/events/htmlday" target="_blank" rel="noopener noreferrer">evento online</a> organizado por <a href="https://zacharykai.net/" target="_blank" rel="noopener noreferrer">Zachary Kai</a> no sábado, 8 de agosto de 2026.

<a href="https://chrisburnell.com/about/#contact" target="_blank" rel="noopener noreferrer">Correções e emendas à página são bem-vindas!</a> 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!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml