Learn HTML by Building a Cat Photo App - Step 15

Describe your issue in detail here.

Hello everyone. I hope everyone’s day is going amazing.
I have a problem with adding tags. The website keeps saying that I need to add a closing “a” tag after the image, but whenever I do it says that I added too many. Could somebody tell me what I am doing wrong? Any help is appreciated. Thank you.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

<!-- User Editable Region -->

      <a href="https://freecatphotoapp.com"</a> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."</a>

<!-- User Editable Region -->

    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 15

Link to the challenge:

Look at how you turned the words “cat photos” into a link in the previous steps (shown above). Do you see how you wrapped the words “cat photos” in opening and closing a tags. That’s how you turn anything into a link, including an image.

So do just two things: put an opening a tag before the img and a closing a tag after the img. And don’t change anything in the img tag. That should remain exactly as is. You might want to restart the step to get the original HTML back if you can’t figure out how to fix the img tag.

Unfortunately when I tried to add the tags, the picture became words with a link. Should I just restart?

Restarting the step is never a bad idea. Try again and if it doesn’t work then you’ll need to paste your updated HTML in here so we can see what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

Thanks for the quick reply :smiley: I am going to try and paste the code.

 <a <img href="https://freecatphotoapp.com" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" </a> alt="A cute orange cat lying on its back."
1 Like

This isn’t valid HTML. Look again at how you created the “cat photos” link. Do you see how the entire opening a tag is before the words “cat photos”? And the closing </a> tag is after the words “cat photos”? That’s what you need to do to the img tag.

P.S. Do not change anything about the img tag. It is perfect just the way it is :slightly_smiling_face:

Okay after a bit of practice, I finally understood what you meant. I think I was over complicating it in my head. I also didn’t realize that the “alt” tag is a part of the img tag😂 Thank you so much for all your help

1 Like

I’m going to make a joke here. Don’t ever call it an “alt tag” in the presence of an accessibility professional. It’s an attribute. Calling it a tag is fighting words :slightly_smiling_face:

:sweat_smile: Okay. I will definitely remember that in the future. Thank you :hugs:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.