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
<!-- 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 -->
Your browser information:
User Agent is:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/18.104.22.168 Safari/537.36 Edg/111.0.1661.44
Challenge: Learn HTML by Building a Cat Photo App - Step 15
Link to the challenge:
You didn’t turn the
img into a link. Instead, you added an empty link above the
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
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.
<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
Also, a tag always begins with
< and ends with
>. Your opening
a tag is missing the ending
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
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
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!