9. Detalhes e conteúdo editável.

Ainda mais formulários

Vejamos mais duas coisas que você certamente já fez mais de uma vez e foram simplificadas pelo HTML5.

Detalhes e sumário

Veja um exemplo de uso dos novos elementos details e summary:

<details>
  <summary>Copiando <progress max="39248" value="14718"> 37,5%</summary>
  <dl>
    <dt>Tamanho total:</dt>
    <dd>39.248KB</dd>
    <dt>Transferido:</dt>
    <dd>14.718</dd>
    <dt>Taxa de transferência:</dt>
    <dd>127KB/s</dd>
    <dt>Nome do arquivo:</dt>
    <dd>HTML5.mp4</dd>
  </dl>
</details>

Veja como um agente de usuário poderia renderizar isso:

Renderização das tags summary e details

E ao clicar:

Renderização expandida das tags summary e details

Conteúdo editável

Para tornar um elemento do HTML editável, basta incluir nele o atributo contenteditable, assim:

<div contenteditable="true">
  Edite-me...
</div>

Você pode ler e manipular os elementos editáveis normalmente usando os métodos do DOM. Isso permite, com facilidade, construir uma área de edição de HTML.