September 19, 2019

Study Notes: HTML details Tag A Thing I Learned Today

The details tag encapsulates a summary and paragraph tag, that when the summary item is clicked, it reveals the paragraph text.

Study Notes: HTML details Tag
A Thing I Learned Today

Needed An Easy QA Solution

Looking for a way to make a simple Question and Answer solution for little quiz/reflection sections in my blog posts, I came across many CSS/JS solutions, but the simplest solution, was to use the HTML details tag. I could pose a questions, unveil an answer, just what I needed.

The details tag encapsulates a summary and paragraph tag, that when the summary item is clicked, it reveals the paragraph text. There is also an attribute which specifies if the paragraph details are visible to the user by default.

See the snippet below, as an example.

Screenshot of a HTML snippet of the Details Tag

Example of details tag

Item Title

Text to be Expanded

Resources:

Quackit

Screenshot of Quackit's page for the details tag

W3schools

Screenshot from W3school's details tag page.