Ordered List not getting created

i am getting this error…please help me…
You should have an ordered list for “Top 3 things cats hate:”

You should have an unordered list for “Things cats love:”

Your code so far


<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <ol>
    Top 3 things cats hate:
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ol>
  <ul>
    Things cats love:
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

It looks right, so I think it is something to do with the titles.

Try put the titles in some heading or paragraph tag, and if that doesnt work then also move it outside the ol/ul tags

Text content can’t be put directly inside <ul> or <ol> tags.Text content can’t be added directly into <ul> or <ol> tags.
Only <li> can be direct children of those tags.

So this is what your code should look like:

Top 3 things cats hate:
<ol>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
</ol>
Things cats love:
<ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
</ul>

@typicaljoe111 is right but, actually your code should look like this

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <ol>
    <p>Top 3 things cats hate:</p>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ol>
  <ul>
    <p>Things cats love:</p>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
</main>

Not sure why you removed the paragraph tags but, without those,it’s not sure what to do with that text.

Good luck.

The <p> tag cannot be placed directly inside ul or ol; it has to be placed outside of them.

Something like this:

<p>Top 3 things cats hate:</p>
<ol>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ol>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>

It can be okay outside FCC Assignments. They have some strict instructions…

1 Like

It can be okay, and most browsers will figure it out but, it’s probably not “best practice”.:wink:

Depends on if you are going for quick results or better compatibility.

1 Like

The browsers can figure out this small things but the code is still invalid.
It is recommended to always follow the standard practice.

2 Likes

Agreed. Especially for new coders. No need to start bad habits early.:slight_smile:

1 Like

It hurts your SEO score if you don’t follow HTML validation. I highly recommend you follow rules.