Learn HTML by Building a Cat Photo App - Step 56

I’m unsure of where I went wrong

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <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>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>

<!-- User Editable Region -->

            <input id="loving" type="checkbox"> <label> <for="loving"</for> Loving</label>

<!-- User Editable Region -->

          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Safari/605.1.15

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

Link to the challenge:

its asking for the atttribute “for” to be nesting in the label so I’m confused to why this isn’t correct

you are treating ‘for’ like an element, but it is an -attribute- (just href is an attribute and src is an attribute, and neither are elements).

The for -attribute- goes inside the label tag.

that’s what I’ve tried and its still incorrect for="loving id=“loving”

the code I was commenting on was treating the for like an element not an attribute.

If you have tried something different, please share the full line of code in a code block.
If you don’t know how to do that, please read below.


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 (').

<label> for="loving" id="loving" Loving</label>

[@hbar1st hbar1st] so I finally figured it out but I’d like to know how am I supposed to know when and not too use this symbol (>) after opening a label or other elements

all -elements- need the angled brackets
Elements you know include:

<p></p>
<input>
<label></label>
<img>
<a></a>

all -attributes- are written inside the opening tag of their respective elements
Attributes you know include:
href, src, id, type, for

You know which is which if someone tells you (like in the step it will say create a body element which means this <body></body> or it may say create a type attribute which means <input type="text">. Usually attributes have values (that’s what goes on the right hand side of the equal sign).

Elements don’t have values but they may have ‘value’ attributes.
Attributes don’t have text. But elements can have text such as this paragraph element:
<p>This is the text</p>

If you don’t know which is which you can always google.
For eg. in HTML what is an id attribute can be googled and give you good results.
or in HTML what is a anchor element etc.

thank you so much for taking the time to explain! Greatly appreciate it

1 Like