I have tried many different combinations of adding href attribute in different places and I just cannot get this right. Question is:
Turn the image into a link by surrounding it with necessary element tags. Use https://freecatphotoapp.com as the anchor’s href attribute value.
**Your code so far**
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
<a img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
</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/101.0.4951.64 Safari/537.36 Edg/101.0.1210.53
When you surround (or wrap) an element with another element, you don’t want to change the original element (the image in this case), you only want to add the new wrapping element around it. You have changed the original image element from:
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
To:
<a img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
Images start with <img but you changed it to start with <a img. So you need to change it back. Then, you “wrap” a new link (or anchor) element around the image. You already have a link you can use as an example. It is the link for “cat photos” in the <p> above the image. The only difference is that the cat photos link wraps around text instead of another element, but the concept is still the same.
Hello, thank you for the advice. I am still quite confused as no matter where I place this, it is not correct. This is what I have so far. Thank you in advance. I truly appreciate it.
<img src=“https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg” <a href=“https://freecatphotoapp.com” alt=“A cute orange cat lying on its back.”
You are still making changes to the <img> element. The <img> element should remain exactly the same. You want to wrap it with a link. A link has an opening <a> and a closing </a> tag. So if you are wrapping an image with a link then you will put the opening link tag before the image and the closing link tag after the image.
I’m having the same trouble, could someone help me please? I added the link tags and it’s saying that I only need to add one and I should remove the rest. I don’t get it.
What I have so far is this:
