Pinceladas da Web

Recentemente dois novos elementos HTML: summary e figcaption foram adicionados ao projeto do HTML5. A criação desses novos elementos visa a aceitação de que novos elementos são necessários para atuar como legendas para os elementos details e figure.

Elemento figcaption

Este novo elemento age como subitítulo opcional ou legenda para qualquer conteúdo contido dentro do elemento figure. Se houver um elemento figcaption ele deve ser o primeiro ou o último filho do elemento figure e só um figcaption irá representar a legenda.

O elemento figure é usado para marcar qualquer conteúdo auto-suficiente que possa ser referenciado a partir do fluxo principal de um documento, tendo a possibilidade de ser extraído de um conteúdo primário (por exemplo, um apêndice), sem afetar o seu fluxo. Isso o torna adequado para diversos tipos de conteúdos que vão desde gráficos e tabelas de dados e blocos de código:

<p>A Figura 1 mostra a extensão do colapso dos mercados e como a recuperação tem sido lenta.</p>
<figure id="fig-ftse">
   <figcaption>Figura 1. O valor do Índice FTSE 100 1999-2009.</figcaption>
   <img src="ftse-100-index-graph.jpg" alt="O índice atingiu um recorde de alta no final de 1999 e passou por duas quedas significativas na década passada."/>
</figure>

A criação do elemento figcaption é um passo importante para o projeto de especificação do HTML5, uma vez que fornece um meio confiável de marcação a legenda para o conteúdo que é marcado com figure. As tentativas anteriores de usar o elemento legend, elemento caption e os elementos dt e dd falharam devido a uma falta de compatibilidade com versões anteriores quando vieram a estilizar esses elementos com CSS.

O elemento summary

Este novo elemento representa um resumo, subitítulo ou legenda para qualquer conteúdo que tenha como pai o elemento details. O elemento summary deve ser o primeiro filho de um elemento details e, se não houver nenhum elemento summary presente, o agente de usuário deve fornecer seu próprio elemento. A razão para isso é porque o elemento details tem uma função específica – a marcação de informação adicional e permitir ao usuário alternar a visibilidade das informações adicionais. Embora ainda não esteja especificado, espera-se que o elemento summary atue como o controle que irá alternar entre o expandir e contair do conteúdo do elemento details:

<details>
   <summary>Detalhes técnicos.</summary>
   <dl>
      <dt>Bit rate:</dt> <dd>190KB/s</dd>
      <dt>Nome do arquivo:</dt> <dd>drum-and-bass-mix.mp3</dd>
      <dt>Duração:</dt> <dd>01:02:34</dd>
      <dt>Tamanho do arquivo:</dt> <dd>78.9MB</dd>
   </dl>
</details>

A introdução do elemento summary parece garantir o futuro do elemento details com esse comportamento permitido. Quando os user agents começarem a dar suporte ao elemento details você não irá precisar de JavaScript, ou até mesmo CSS, para ter a opção de expandir ou contrair conteúdo em um documento HTML.

Referências

• Hello, summary and figcaption elements.
• New HTML5 elements: summary & figcaption.