Como usar os elementos <details> e <summary> do HTML5

As tags <details>  e <summary> foram implementadas no HTML5 com o intuito de poder criar um widget interativo com o usuário, assim podendo exibir ou ocultar sob demanda o seu conteúdo.

A tag <summary> é usada para dar um título para o widget.

• Exemplo:

• Código:

<details>
    <summary>Widget</summary>
    Conteúdo exibido para teste
</details>

Para a tag <details> pode-se acrescentar o atributo “open”, assim o conteúdo do widget inicialmente é mostrado.

• Exemplo:

• Código:

<details open>
    <summary>Widget</summary>
    Conteúdo exibido para teste
</details>

Como tornar um conteúdo editável

Para tornar um conteúdo HTML editável, deve-se incluir um atributo chamado “contenteditable“.

• Código:

<div contenteditable='true'>
    Conteúdo exibido a ser editado
</div>

Com este artigo pode-se concluir que no HTML5 houve a implementação de novas tags das quais trarão diversas utilidades para o desenvolvimento web, assim tornando-se uma ferramenta poderosa juntamente com o JavaScript.

Referências:

1. Usar os elementos details e summary
2. Tag <details>
3. Tag <summary>
4. Atributo contenteditable

Navegação:    <— Anterior   |   Próximo—>