Can't nest <a> insude <ul>?

HTML-CSS
1

I just pasted the html for my “Technical Document” page into VisualStudio to print a copy to take with me.

VisualStudio (not the Code version) is giving me a HTML5 Validation error sating “Element ‘a’ cannot be nested within element ‘ul’.”

It runs ok. Even though I can’t pass Steps 10 and 12 yet.

Here’s the code:

  <nav id="navbar">
    <header>Sections</header>
    <ul>
           <a class="nav-link" href="#Show_Overview"><li>Show_Overview</a>       
           <a class="nav-link" href="#Bubbles" ><li>Bubbles</li></a>   
           <a class="nav-link" href="#Ricky"><li>Ricky</li></a>        
           <a class="nav-link" href="#Julian"><li>Julian</li></a>    
           <a class="nav-link" href="#Lucy"><li>Lucy</li></a>        
           <a class="nav-link" href="#Lahey"><li>Lahey</li></a>       
    </ul>
  </nav>

Thanks!

2

Semantically you would want your anchors inside of your li’s.

<li><a>LINK</a></li>

3

<ul>s and <ol>s have to take <li> elements as children, the validator is correct. It’ll still work, browsers will let you put any old crap in and still render out readable web pages, they are nice like that, but it’s still incorrect HTML.

Do what @4trio19 said, basically. Note also that you can nest either <li> or <a> tags as children of a <menu> tag but menu tags are a bit specialised (not just for generic nav menus) and have limited support.

1 Like
4

Just chirping up to add a reminder that you want to double-check that all your opening tags have closing tags. :wink:

2 Likes
5

Thank you. That’s what I always thought and have written it in the past. It makes sense to think of the < a > as one unit of the list.

I rewrote that section in my code to have the < li > inside the < a > because I’ve been having troubles with User Story #10 being wrong so I copied the arrangement in the sample page. I figured the teacher won’t mislead me. Apparently, I was misled.

I’ll switch the order back.

Thanks for your help.

6

Thanks.

I’ve found that out about browsers being able to “read my mind” about what I wanted not what I wrote. Until something I test under one or two browsers crashes when I proudly show it to my wife who’s using a third browser.

1 Like