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
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.
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.
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
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
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
I am going to try and paste the code.
Okay. I will definitely remember that in the future. Thank you 