Learn HTML by Building a Cat Photo App - Step 14

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
Could someone please explain what I’m doing wrong?

  **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>
    <img <a> src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" </a> 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/103.0.0.0 Safari/537.36

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

Link to the challenge:

#2

Hello.

The problem here is that you’re putting your anchor element, <a></a>, inside your img element. In order to give your img element an address to direct to when clicked, you need to embed it within an anchor element.

Also:

This is incorrect. The src attribute belongs to the img element. You cannot place an element inside another element’s tag. Only attributes can be placed there.

You must embed your img element inside of an anchor element, and give that anchor element an href attribute set to the link they specify in the step.

#3

Is there any way that you could write it out so I can see what the problem is? I’m not really following…

#4

Sorry, I understand my reply is a bit messy. I’ll try to go in-depth without making it confusing.

First off, an img element is a self-closing element, so you have only one tag.

<img src="" alt=""/>

You cannot place an element inside of another element’s opening or closing tags. In this case, you can’t place your <a></a> element inside of your img element’s tag, because it is unrecognizable that way.

You can only put attributes inside of element’s tags, and only on their opening tags.

For example:

<img src="" alt=""/>

src and alt are attributes, so it is correct to put them inside your img element’s tag.

In order to complete this step, you must turn your img element into a link. To do this, you must follow the same process you followed when you turned your ‘cat photos’ text into a link.

Grab your existing element, and embed it inside an anchor element.

<a><img src="" alt=""/></a>

In order to give an anchor element an address to direct to, you must give it an href attribute, and set it to the desired address.

<a href=""><img src="" alt=""/></a>

I hope this helps.

1 Like
Learn HTML by Building a Cat Photo App - Step 14
#5

Yes! That worked. Thanks!