Alternativa correta: B - <summary>

Tema central da questão: A questão aborda o uso de elementos semânticos do HTML5, especificamente aqueles que adicionam recursos interativos e melhoram a acessibilidade das páginas web. É fundamental conhecer os elementos que permitem criar áreas expansíveis de conteúdo, tornando a navegação mais dinâmica para o usuário.

Resumo teórico: No HTML5, o elemento <details> permite criar uma área que pode ser expandida ou recolhida pelo usuário. Para definir um resumo visível (ou título clicável) dessa área, utiliza-se o elemento <summary>. Ele aparece sempre visível e, ao ser clicado, exibe ou esconde o conteúdo adicional.

Exemplo prático:

<details>
  <summary>Clique aqui para ver mais</summary>
  Informações adicionais aparecem aqui.
</details>

Segundo a especificação oficial do HTML, <summary> é o elemento correto para resumir o conteúdo de <details>.

Justificativa da alternativa correta:

B - <summary> deve ser usada dentro do <details> para fornecer um título ou resumo visível, permitindo ao usuário expandir ou recolher o conteúdo.

Análise das alternativas incorretas:

 
• A - <source>: Usado para definir múltiplos recursos de mídia em <audio> ou <video>, não relacionado a resumos.
 
• C - <dialog>: Usado para caixas de diálogo/modal, não para resumo de conteúdo expansível.
 
• D - <meta>: Define metadados do documento, não conteúdos visíveis ou interativos.
 
• E: Mistura vários elementos sem relação com resumo ou interação esperada pelo <details>.

Dica para interpretação: Sempre busque palavras-chave como "resumo", "elemento HTML5" e "interação". Isso direciona à busca de elementos semânticos modernos do HTML. Cuidado com alternativas que tentam confundir por apresentar nomes conhecidos fora do contexto adequado!

Gostou do comentário? Deixe sua avaliação aqui embaixo!