As I previously wrote in one of my articles, HTML is a simple language to use and is about presenting and describing our documents in the best possible way with the elements that HTML provides us. In HTML we have some common, regularly used elements, just as div, section, p and a for example. Today I’ll present to you some elements that are not so common:

dl - dd - dt

dl represents a descriptive list: a group containing a key or term (dt) and its descriptions or values (dd)

Some examples of groups are pairs of questions and answers, a glossary, a bibliography, a metadata representation of a key-value pair, among others.

Code:

<dl>
 <dt>Where are you from?</dt>
 <dd>Argentina 🇦🇷 </dd>
</dl>

Example:

Where are you from?

Argentina 🇦🇷

del - ins

del represents a text content that was deleted or changed in the document and is generally used with the ins element which represents a text that was added or updated, when you want to show the history of these changes in your webpage.

Some examples are when you updated a post and want to show those changes or when you want to show your changes in a git repository.

Code:

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

Example:

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

wbr

wbr represents a choice or an opportunity for the browser to break your text line.

Code:

<p>
Hey!, resize your window and check the different options 😱:
<wbr>super<wbr>cali<wbr>fragi<wbr>listic<wbr>expi<wbr>ali<wbr>docious
</p>

Example:

Hey!, resize your window and check the different options 😱: supercalifragilisticexpialidocious

kbd

kbd represents a user input. It is usually used to represent a keyboard input.

Code:

<p>
To copy a text you should select your text and then
<kbd><kbd>crtl</kbd>+<kbd>c</kbd></kbd>
</p>

Example:

To copy a text you should select your text and then crtl+c

details

details represents something that you want to hide, and display only when the user selects it. It is usually used with the summary element that will display the title or legend of your hidden content.

Code:

<details>
 <summary>
   Click here to hide/show the terms and conditions
 </summary>
 <p>
   Do your best, don't give up and continue learning and moving on 😺
 </p>
</details>

Example:

Click here to hide/show the terms and conditions

Do your best, don't give up and continue learning and moving on 😺

Conclusion

I hope this has been useful in some way 😊. Maybe you have discovered new elements to use in your projects, or maybe this article has made you curious to find new uncommon elements.