FCC Technical Documentation page error

Code Feedback
1

I wasn’t sure where to ask this but since it is a project I thought I’d start here.

I was going to reply to someone asking for feedback on their Tech Doc page about some validation errors. But that made me think, let’s see what the example looks like. So I went to the sample ’ Responsive Web Design Projects - Build a Technical Documentation Page’ at https://codepen.io/freeCodeCamp/full/NdrKKL and sure enough, the same error shows there.

The error is ‘The <a> element cannot be a child of the <ul> element.’ Why doesn’t the sample show the correct way of nesting? Something like;

<ul class="nav-links">
  <li>
    <a href="#top"><h3>HOME</h3></a>
  </li>
</ul>
2

All the tests are passing, so it’s ok.

3

Yes I know that browsers allow it. That’s not my question though. Thanks…

4

I was being sarcastic.

To answer your question: fcc is created by people and people make mistakes. Open issue on GitHub to notify fcc staff.

5

Oh sorry, I didn’t recognize the sarcasm.

Okay, I’ll take a look at opening an issue in GitHub. That’s the part I wasn’t sure about, how to report an error.

Thanks…

6

I wanted to mark this as solved since I’ve opened an issue but didn’t see how to do that.

Thanks again @jenovs

7

What is the correct way to nest the elements though?

8

Hi @Ameena, welcome to the forums.

As stated in the beginning, it doesn’t break anything the way it’s written. The only time you see an error/issue is when the code is run through a validator.
That being said, the sample code shows;

<ul> 
  <a class="nav-link" href="#Introduction" rel="internal">
  <li>Introduction</li></a>
</ul>

The correct way to nest these same elements is;

<ul>
  <li>
    <a class="nav-link" href="#Introduction" rel="internal"><p>Introduction</p></a>
  </li>
</ul>
1 Like