Learn HTML by Building a Cat Photo App - Step 15

Tell us what’s happening:
Hello! I have been stuck on step 14 for a long time now! It says I have more than 1 opening anchor tag for this step! I’m trying to turn the img of the cat into a link. I only had one opening anchor tag so I am not sure what to do?

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

<!-- User Editable Region -->

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.44

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

Link to the challenge:

SORRY! I meant step 15!

You didn’t turn the img into a link. Instead, you added an empty link above the img.

Look at how you turned the words cat photos into a link. You wrapped those words in a anchor element using opening and closing a tags. That’s how you turn anything into a link, including an img. So do that same thing to the img.

Thank you for your reply. When I try to wrap the img in an anchor element, the picture disappears. The way I did it before turned the image into a link (at least it told me it was working when I clicked the img) but it said I had too many opening tags. I am very confused.

You’ll need to show us what you tried so we can see exactly what you did. Otherwise, we can only guess as to what the problem is.

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.

Thank you for your help! I am so sorry but I don’t understand what back ticks are! I am sorry I am completely new to the world of coding and all things related! I have 0 computer knowledge as of now! If I figure out how to display my code here I will do it right away! Thanks again.

You don’t have to use back ticks. You can also use Ctrl + e or the </> button that is on the toolbar at the top of the text window you are typing into.

1 Like
<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.">

The above code turns the image of the cat into a link! But I am getting an error message saying I have more than 1 opening anchor tag! When I tried wrapping the img in an anchor tag, the img disappeared.

Perfect, now we can see what you did!

Look again at how you turned the words cat photos into a link. Do you see how the opening a tag is before those words and the closing a tag is after those words. You need to do the same thing for the img.

Also, a tag always begins with < and ends with >. Your opening a tag is missing the ending >.

1 Like

When I surround the img with the anchor tags the picture disappears and when I put > at the end of my opening tag all the links do not work. I’m so sorry for all the trouble but nothing seems to be working properly! When I do it the way I just showed the objective is met and the image works as a link! But it says I have too many opening anchor tags.

Again, you need to show us exactly what changes you made so we can see what you did. Please put your updated HTML in here, just like you did last time. It’s OK if it still doesn’t work. We just need to see what you changed so we can help you.

No, it is not. That’s why the tests are failing.

That is a good point. I guess the objective isn’t really met as I’m doing something wrong! But the image does turn into a link which is partly why I’m so confused! I will show you what it looks like when I try to wrap the img! Thanks for all your help!

Browsers will automatically try to fix broken HTML. That is probably what is going on here. This doesn’t mean that you have created the HTML properly, just that your browser can figure out what you intended to do and is fixing it for you automatically behind the scenes.

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

When I do it like this the image of the cat is gone.

You are getting closer. You have the closing </a> tag in the correct position now, but your opening a tag is still not correct. Remember, a tag always begins with a < and ends with a >. You are missing the closing >. Also, the instructions asked you to place the href attribute on the a tag, but you have put in on the img tag.

Again, look at the cat photos link you previously created. I will even include it here again for easy access:

<a href="https://freecatphotoapp.com">cat photos</a>

Do you see how you wrapped the words cat photos with an opening and closing a tag. Do you see how the href attribute is on the opening a tag. You want to do the same thing to turn the img into a link. Basically, you are just replacing the words cat photos with the img.

1 Like

Okay I think I understand! Thanks so much, I will give it a go and hopefully I can get it to work!! Thanks for taking so much time to help me out!!

IT WORKED THANK YOU!!! I really appreciate all the time you spent helping me out! :slight_smile:

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