HTML Semantics puzzle

Question

I am working on a puzzle given in below link

Semantics

It has 3 questions:

Update the website's HTML to make use of semantic elements so that:

The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.

I tried adding class to outer div as <div class="header"> and <div class="container">. Adding a Div section to contain the image and caption and also other ways to solve the puzzle, but none of them are working, the test cases are not successful.

Can you please tell me what is the right approach for this puzzle.

Answer 1

Take a look at: https://www.w3schools.com/html/html5_new_elements.asp

for example:

• use <main> instant of the <div> over all elements
• use <figure> instant of the <div> for the image
• use <figcaption> instant of the <div> for the image caption
• ....

Answer 2

I used following semantic elements and it worked.

• use <main> instead of <div> over all elements
• use <figure> instead of <div> for the image
• use <figcaption> instead of <div> for the image caption
• use <details> instead of <div> for lorem-ipsum class
• use <summary> instead of <div> for description class