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?
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.
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.
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!