Cómo escribí anteriormente, HTML no es un lenguaje complicado y se trata de presentar y describir tus documentos de la mejor manera con los elementos que tenemos. Hay elementos comunes y que usamos regularmente, div, section, p, a, por decir algunos, pero hay otros que no son tan conocidos y aquí van:

dl - dd - dt

dl representa una lista descriptiva que consta de grupos con una término o clave (dt) y su descripción o valor (dd).

Algunos grupos que pueden ser preguntas y respuestas, un glosario, bibliografía, representación de metadata de un par clave-valor, entre otras.

Código:

<dl>
  <dt>¿De donde eres?</dt>
  <dd>Argentina 🇦🇷 </dd>
</dl>

Ejemplo:

¿De donde eres?

Argentina 🇦🇷

del - ins

del representa que una parte de un texto fue eliminada o cambiada de un documento y por lo general se utiliza con ins que representa un texto que fue agregado a la página y queres mostrar la historia de esos cambios.

Un ejemplo es cuando actualizas una parte de una publicación y queres mostrar la actualización, mostrar los cambios de un código versionado.

Código:

<code>
  console.log(<del>"Hello World"</del><ins>"Hola Mundo"</ins>)
</code>

Ejemplo:

console.log("Hello World""Hola Mundo")

wbr

wbr representa una oportunidad para hacer un corte de línea y el browser es el que se encarga de aprovechar esa oportunidad.

Código:

<p>
Achicá la ventana para ver diferentes oportunidades u opciones 😱: <wbr>super<wbr>cali<wbr>fragi<wbr>listic<wbr>expi<wbr>ali<wbr>docious
</p>

Ejemplo:

Achicá la ventana para ver diferentes oportunidades u opciones 😱: supercalifragilisticexpialidocious

kbd

kbd representa una entrada del usuario, por lo general una entrada a través del teclado.

Código:

<p>
Para copiar una texto hay que seleccionar el texto y luego <kbd><kbd>crtl</kbd>+<kbd>c</kbd></kbd>
</p>

Ejemplo:

Para copiar una texto hay que seleccionar el texto y luego crtl + c

details

details representa un elemento para relevar información solamente cuando se lo selecciona, sino esa información está escondida y se generalmente se lo utiliza con el elemento summary que representará la leyenda o el título.

Código:

<details>
  <summary>
    Click aquí para mostrar/esconder condiciones
  </summary>
  <p>
    Dar el máximo, no darse por vencido y seguir adelante 😺 
  </p>
</details>

Ejemplo:

Click aquí para mostrar/esconder condiciones

Dar el máximo, no darse por vencido y seguir adelante 😺

Conclusión

Espero que les haya sido útil de alguna manera 😊 , que hayan conocido algún nuevo elemento y los puedan usar en sus proyectos o tal vez surgido curiosidad de encontrar nuevos elementos no tan cómunes.