CODEWITHSUNDEEP
htmlcss
Learner
Learner

Reputation: 21445

HTML Semantics puzzle

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.

Upvotes: 4

Views: 9352

Answers (4)

Jorge Santos Neill
Jorge Santos Neill

Reputation: 1785

The correct response is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Semantics</title>
  </head>
  <body>
    <section>
      <h1>Lorem Ipsum</h1>

      <figure  class="image">
        <img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
        <figcaption  class="caption">Lorem Ipsum</figcaption >
      </figure >

      <details class="lorem-ipsum">
        <summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Mauris lacinia scelerisque nibh nec gravida. 
          Duis malesuada nec nibh sit amet pulvinar. 
          Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel. 
          Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros. 
          Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus. 
          Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum. 
          Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
      </details>
    </section>
  </body>
</html>

Upvotes: 2

Talie
Talie

Reputation: 51

While Madhukar's answer correctly provided the elements that TestDome is looking for to achieve a 100% score, it should be noted that the action of 'details' and 'summary' (toggling visibility of the 'p' element) does not work cross-browser (https://caniuse.com/#search=details) without the use of polyfils. These tests should be treated with caution - as the old saying goes 'there is more than one way to skin a cat'.

Upvotes: 0

Madhukar
Madhukar

Reputation: 81

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

Upvotes: 7

fab
fab

Reputation: 1259

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
  • ....

Upvotes: 7

Related Questions