Tell us what’s happening:
Describe your issue in detail here.
I just can’t figure out the problem it’s saying I have another (a) opening and should get rid of any extras
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 -->
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."
<a href="https://freecatphotoapp.com>"</a>
<!-- 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/112.0.0.0 Safari/537.36
Challenge: Learn HTML by Building a Cat Photo App - Step 15
Link to the challenge:
1 Like
You are missing the closing > at the end of your img
1 Like
like at the end of the line or at the img (sorry really new to coding)
After the last ". You can see here another example of the img
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
Notice after the 132 there is the >
copy thank u but it still isn’t working. Here is my code right now
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"> alt="A cute orange cat lying on its back."
<a herf="https://freecatphotoapp.com"</a>
and its saying this: You should only add one opening anchor (a ) tag. Please remove any extras.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Ill remember that for next time
Ok, now that I looked at the challenge can see where you are going wrong. You need to add the anchor tag around the img. Right now you just have it after the img.
Remember how you added the achor tag around the words “cat photos” in an earlier step? You need to do something very similar by wrapping the img in anchor tags
You still dont have the > at the end of your img. Your > needs to go after the alt not before, and your href is not spelled correctly
<img> src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"</img> alt="A cute orange cat lying on its back."> <a href="https://freecatphotoapp.com"</
I have a feeling I’m still not understanding this
You are still putting it after the img.
So when the challenge says it needs to surround the img that means you will have the first part of your anchor tag start at the beginning of your img like this
<a href="link"><img src="picture source">
The above example shows that I have the beginning of my link around the first part of the img. Now, in the example above the img is already inside the link it just needs to be finished. Taking the example I gave, and using the correct link for the href do you think you can complete what I didnt give you?
Remember that the alt also needs to come before your > at the end of the img
I think so but tbh this is my first time coding so this is gonna take a while
No worries, it can be tricky to get the hang of this. The example I gave you does 80% of what you need. You just need to enter the right values, and then add something so your anchor tag is closed
You can keep asking here if you are unsure
1 Like
thank and hopfully last question Am I thinking of the closing anchor wrong
<img>"...." </img>
That would be closing the img technically. Your img element is something called a self closing element. So you wont ever need to use </img> Using the > is what is used to close your img.
For the anchor tag, it is something different. Your opening anchor looks like this
<a href="link">
notice the very first thing after the < is the letter a. This is a anchor tag (or link tag). It starts with the letter a, and unlike the img it is not a self closing element so you will need to use the other closing tag which looks like
</a>
That is how you would close your link
1 Like
Thank been a big help I thought since I had to surround it. That it needed it on both sides or at the end and I forgot that img is a self closing so it doesn’t need one. Also is Alt is self closing too?
Alt is not considered an element, but it is an attribute. You can think of attributes as things that provide additional information about the element. For example, the alt attribute is used in case for some reason the img wont show on a webpage. When the img cant be shown then the alt text will be there for the user to see to show a description of what the img should be showing.
Attributes are used like the following:
<img src="src link" alt="img text">
Attributes will always go on the inside the opening tag of your element, never on the closing tags of non self closing elements
Sorry I’m prob gonna have more questions but I’m understanding more. So I’m trying to make src attribute vaule set and ik its Img src link before the alt link but I think I’m missing something
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg"alt "A slice of lasagna on a plate.">
No worries, ask as many questions as you want. Your img is looking good. The only thing is when you use an alt you always want that = sign before the first quote mark. So it should always look like
alt=“text here”
you should wrapped your image with anchor tag example ![]()
