プロゲート コンテンツ構造

Question

前提・実現したいこと

progateでコンテンツ構造を学習しています。

下記問題
contentsの中に<h3>要素を追加し、以下のテキストを入れてください。
学べるレッスン

contentsの中に<div>要素を4つ追加し、全てに
contents-item
というclassを与えてください。

4つのcontents-itemの中に<img>要素を追加し、
上から順に
https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg

https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg
を表示してください。

追加した４つの<img>要素の下にそれぞれ<p>要素を追加し、
上から順に
HTML & CSS
PHP
Ruby
Swift
というテキストを入れてください。

発生している問題・エラーメッセージ

各contents-itemの中に、img要素を追加してください

該当のソースコード

 <div class="contents">
        <h3>学べるレッスン</h3>
       
        <div class="contents-item"></div>
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        
        <div class="contents-item"></div>
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
          
        <div class="contents-item"></div>
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
           <p>Ruby</p>
           
        <div class="contents-item"></div>
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
         </div>
        <!-- <h3>要素を追加してください -->
        
         <h3>学べるレッスン</h3>
      
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item"></div>
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item"></div>
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item"></div>
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
          <p>Ruby</p>
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item"></div>
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
      </div>
      

試したこと

打ち直したりコピって貼り付けたりしましたが解決しません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

何が問題なのでしょうか。「解決しません」とおっしゃいますがそもそも解決したい問題が明示されいるようには見えません。
>各contents-itemの中に、img要素を追加してください
これはあくまでプロゲートの課題の文言ですよね。何を取り組んでどんな問題が起きているのでしょうか。

Answer 1

こんばんは。

4つのcontents-itemの中に<img>要素を追加し、

　

各contents-itemの中に、img要素を追加してください

とあるところ、

        <div class="contents-item"></div>
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">

中に入れていないからでは。

Answer 2

img要素にはalt属性が必須でそれがないから、
駄目なのだと思います。

あとは</div>の位置がおかしいです。

これが違うのであればプロゲートに問い合わせるのが早い気がします。