Questão de Programação — Web — INSTITUTO AOCP 2024
Programação›Web
Código
qg261791
Banca
INSTITUTO AOCP
Órgão
SANEPAR
Ano
2024
Nível
Superior
Cargo
Profissional - Analista de Informática
Como analista de informática da Sanepar, você está envolvido no desenvolvimento de um novo sistema web para o órgão. Durante o desenvolvimento, você precisa adicionar um recurso interativo à página para melhorar a experiência do usuário. Para isso, você deseja usar um elemento HTML que permita exibir um resumo visível para um conteúdo adicional. Nesse caso, considerando o HTML 5 (Hypertext Markup Language, versão 5), qual elemento você deve utilizar para definir esse resumo visível para um elemento <details>?
A<source>
B<summary>
C<dialog>
D<meta>
E<area>
Revelar gabarito e comentário▾
GabaritoB — <summary>
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Elemento HTML para resumo visível do <details>
Gabarito: letra B. O elemento <summary> é o único que define o resumo visível (cabeçalho clicável) de um bloco <details> no HTML5 — é ele que o usuário vê e clica para expandir ou recolher o conteúdo adicional. As demais alternativas têm funções completamente distintas (<source>, <dialog>, <meta>, <area>), nenhuma delas se relaciona com o par <details>/<summary>.
O HTML5 introduziu um conjunto de elementos semânticos para criar widgets interativos nativos, sem depender de JavaScript. O par <details> e <summary> é um dos mais úteis: o <details> define um bloco de conteúdo que pode ser expandido ou recolhido pelo usuário, e o <summary> é o rótulo visível que fica sempre à mostra, funcionando como o "cabeçalho" clicável. Sem o <summary>, o navegador exibe um texto padrão (geralmente "Detalhes"), mas a boa prática é sempre fornecer um resumo explícito.
Na prática, a estrutura é:
<details>
<summary>Clique para ver mais</summary>
<p>Conteúdo adicional que fica oculto até o clique.</p>
</details>
O atributo open no <details> faz com que o conteúdo já apareça expandido por padrão. Esse recurso é amplamente usado para FAQs, menus acordeão e seções de ajuda, melhorando a experiência do usuário sem scripts.
A pegadinha da banca está em confundir <summary> com outros elementos que também têm relação com mídia, diálogos ou metadados. O candidato que não conhece o par <details>/<summary> pode ser tentado por <dialog> (que cria uma janela modal) ou <source> (usado em <video> e <audio>). A distinção é clara: <summary> é o único que serve como resumo visível de um bloco expansível.
Guarde a função de cada elemento: <summary> = resumo clicável; <details> = conteúdo expansível; <dialog> = janela modal; <source> = mídia; <meta> = metadados; <area> = mapa de imagem. É exatamente essa fronteira que separa as alternativas.
Alternativa A — ❌ Incorreta
O elemento <source> é usado dentro de <video>, <audio> e <picture> para especificar múltiplas fontes de mídia. Ele não tem relação com resumo visível nem com <details>. Quem confunde pode estar pensando em "fonte" de conteúdo, mas a função é totalmente diversa.
Alternativa B — ✅ Correta ⟵ GABARITO
O <summary> é o elemento que define o resumo visível (cabeçalho) de um bloco <details>. Ele deve ser o primeiro filho do <details> e é o que o usuário vê e clica para expandir/recolher o conteúdo. Sem ele, o navegador usa um texto padrão, mas a especificação recomenda sempre usar <summary> para melhor acessibilidade e usabilidade.
Alternativa C — ❌ Incorreta
O <dialog> cria uma janela de diálogo ou modal, que pode ser aberta com o método show() ou showModal() via JavaScript. Não é um resumo visível e não tem relação com <details>. A confusão pode ocorrer porque ambos são elementos interativos, mas a finalidade é oposta: um expande conteúdo inline, o outro abre uma sobreposição.
Alternativa D — ❌ Incorreta
O <meta> fornece metadados sobre o documento HTML (charset, descrição, palavras-chave, autor, etc.). Ele fica no <head> e não é renderizado na página. Não tem nenhuma relação com resumo visível ou conteúdo interativo.
Alternativa E — ❌ Incorreta
O <area> define uma área clicável dentro de um mapa de imagem (<map>), usada para criar links em regiões específicas de uma imagem. Não tem relação com resumo visível nem com <details>. A confusão pode surgir pelo nome "área", mas a função é de mapeamento de imagem.
NÃO CAIA NESSA!
A banca explora a confusão entre elementos interativos do HTML5. O candidato que conhece <dialog> (janela modal) pode achá-lo parecido com <details>, mas a função é completamente diferente: <dialog> abre uma sobreposição, enquanto <details> expande conteúdo inline. Fique atento à função específica de cada tag — <summary> é o único que serve como resumo visível de um bloco expansível.
PEGA ESSA DICA!
Para memorizar, associe: <details> = "detalhes" (conteúdo oculto) e <summary> = "resumo" (o que aparece). Sempre que a questão falar em "resumo visível" ou "cabeçalho clicável" para um conteúdo expansível, a resposta é <summary>. Pratique com questões que misturam tags de mídia (<source>), diálogo (<dialog>) e metadados (<meta>) para fixar a diferença.