How to use the details semantic element

In this post we’ll see how to correctly use the details semantic element, which came with HTML5, and also a way to use it in real projects.

How to use the details semantic element?

The HTML5 details element is quite peculiar as it helps the user to create an accordion without JavaScript

Also, its main use is when we need additional information about some topic on the page.

So, for example, we can use it on an e-commerce product screen

Where attributes such as measurement table, description, production materials could be nested in details, cool right? 😀

Another important detail is that together with the details element, we also use the summary.

The final structure would be a <details> tag covering a <summary>, which is the title of what we want to give details.

And a <p> tag to explain what this section on our site is about.

Using details in practice:

We can use the details this way:

<details>
   <summary>Available sizes</summary>
   <p>P, M, G and GG</p>
</details>
<details>
   <summary>About the product</summary>
   <p>This product was manufactured in Brazil and the main material is synthetic leather</p>
</details>
<details>
   <summary>
</summary>
   <p>We care about animals and will never use leather from them</p>
</details>

Details results in the page

About the product

This product was manufactured in Brazil and the main material is synthetic leather 

About the company

We care about animals and will never use leather from them

Of course, some CSS is missing to style the elements, but that was my intention.

Note that without any tweaks we have a working accordion, we often used JavaScript libs for that.

So the power of details is displayed in just a few lines of code, see that we can use it to describe a product, as it was in this case.

Conclusion

With details, we can create accordions, but the main purpose of this tag is to give details about a subject.

And this subject has the title added in the summary tag.

The two elements complement each other and must be used together.

And that’s it for today, until the next post!

Also check our YouTube channel by clicking here!