Outros elementos - Devs Channel
O elemento details
Simplesmente introduz uma quebra de linha. É um elemento vazio. O nome da sua tag é uma abreviação para break, que quer dizer quebra. É usado quando você precisa forçar a quebra de linha por algum motivo. De uma forma geral, é melhor deixar a quebra de linha ser feita naturalmente pelo browser. Caso contrário, você pode ter problemas de responsividade. A quebra de linha pode causar um efeito estético ruim em algumas resoluções.
Um caso de uso comum para o elemento <br> são versos de um poema ou letras de músicas:
Little boxes on the hillside<br>
Little boxes made of ticky tacky<br>
O elemento <hr> é um elemento vazio usado quando se quer fazer uma mudança temática, que é renderizado como uma linha horizontal. Ele é um elemento semântico. Portanto, ele não deve ser usado por motivos estéticos. Se esse for o objetivo, você pode usar bordas de CSS.
Esse elemento serve para marcar os detalhes de contato da pessoa que escreveu o documento no qual esse elemento se encontra (não precisa ser necessariamente o endereço da pessoa). Exemplo:
<li>Endereço: Rua XYZ, 9999, República, São Paulo-SP</li>
<li>Telefone: 11 99999-9999</li>
Esse elemento funciona como uma espécie de acordeão. Esse nome é usado por causa do comportamento do elemento, de expandir e retrair o seu conteúdo quando a label é clicada. O atributo booleano open pode ser usado caso o elemento deva começar com sua informação visível. O elemento <summary> é usado como filho do <details> para fornecer a label do elemento. Se esse elemento não for colocado, é usada a label padrão, que é Detalhes. Exemplo de uso: