Validator error ul > ul

Beginners
1

I have a ul with 2 li in it and a ul with 3 li inside the 1st url. Clarification what this error from https://validator.w3.org means please. (Thanks David @AllMediaLab for introducing me to this great resource.)

Screen Shot 2022-01-31 at 9.57.15 AM
Screen Shot 2022-01-31 at 9.57.15 AM438×530 39.6 KB

Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

From line 178, column 25; to line 178, column 28

<ul>↩

Contexts in which element ul may be used:

Where flow content is expected.

Content model for element ul :

Zero or more li and script-supporting elements

2

Hi @kat Kathleen,

You are nesting a list in a list here:

 <div class="pricing-box"><span class="price">Choose Your Option</span>
                    <h2>Tax Deductions</h2>
                    <ul>
                        <li>
                            <i class="far fa-arrow-alt-circle-right"></i> 
                            Once-a-year membership donation.
                        </li>
                        <li>
                            <i class="far fa-arrow-alt-circle-right"></i> A particular Poetry.LA series or a single episode for screen credit:
                        </li>
                        <ul>
                            <li>
                                <i class="far fa-hand-point-right"></i> Poetry.LA Interview Series hosted by Mariano Zaro
                            </li>
                            <li>
                                <i class="far fa-edit"></i> A Poem By hosted by Lisa Grove
                            </li>
                            <li>
                                <i class="far fa-moon"></i> They Write by Night hosted by Suzanne Lummis
                        </ul>                         
                    </ul><a class="btn" href="#"><b>Sign Up</b></a>

My advice is keep things simple and use one list and if needed style parts of the <li>.with padding.

Ecstatically I think your better of Aligning your list text and icons left (default settings of a list), what looks nice on paper doesn’t always look good on the web!

Regards,

David

1 Like
3

The other error about missing headings in a <section> is simple, just change the <section> part in <div>
So this:

 <!-- Mini menu -->
        <section class="mini-Menu">
            <div class="btnRead btn"><a href="#">17 Virtual Readings List</a>
            </div>
            <div class="btnLGBTQ btn"><a href="#">LGBTQ + Literary Connections</a>
            </div>
            <div class="Donate btn"><a href="#Donate">Donate</a>
            </div>
            <div class="social-icons">
                <span><a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></span>
                <span><a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a></span>
                <span><a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a></span>
                <span><a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a></span>
            </div>
        </section>
        <!-- End Mini menu -->

Becomes this:

 <!-- Mini menu -->
        <div class="mini-Menu">
            <div class="btnRead btn"><a href="#">17 Virtual Readings List</a>
            </div>
            <div class="btnLGBTQ btn"><a href="#">LGBTQ + Literary Connections</a>
            </div>
            <div class="Donate btn"><a href="#Donate">Donate</a>
            </div>
            <div class="social-icons">
                <span><a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></span>
                <span><a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a></span>
                <span><a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a></span>
                <span><a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a></span>
            </div>
        </div>
        <!-- End Mini menu -->
1 Like
4

If I use 1 ul is there a better way to align with :ninth childs on each li?

Actually I think the list icons look lousy. Any thoughts on better list styling?

5

I had thought sections needing headings was just a warning not a rule ; )
I’ll change them to divs.

6

Yes it’s a warning! But I always want to get rid of every waring and error. But that’s just me.

1 Like
7

This means ul cannot be direct child of ul, but ul can be inside li.

Your implementation should be something like this:

<ul>
    <li>...</li>
    <li>...</li>
    <li>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
</ul>
1 Like
8

Confused. Below is ok, or not ok.

 <div class="pricing-box"><span class="price">Choose Your Option</span>
                    <h2>Tax Deductions</h2>
                    <ul>
                        <li>
                            <i class="far fa-arrow-alt-circle-right"></i> 
                            Once-a-year membership donation.
                        </li>
                        <li>
                            <i class="far fa-arrow-alt-circle-right"></i> A particular Poetry.LA series or a single episode for screen credit:
                        </li>
                        <ul>
                            <li>
                                <i class="far fa-hand-point-right"></i> Poetry.LA Interview Series hosted by Mariano Zaro
                            </li>
                            <li>
                                <i class="far fa-edit"></i> A Poem By hosted by Lisa Grove
                            </li>
                            <li>
                                <i class="far fa-moon"></i> They Write by Night hosted by Suzanne Lummis
                        </ul>                         
                    </ul><a class="btn" href="#"><b>Sign Up</b></a>
9

This is what he means the nesting should be like that not like your example. But looking at what you want to achieve I would keep it simple. Don’t see a reason to use it for your example!

The <ul> is nested in the <li> but when you are a beginner it can be very confusing.

2 Likes
10

Your second ul should be inside a li
Like ul > li > ul > li

1 Like
11

Here some examples of lists with code like this cool one (click on the edit on code pen icon to see it):

When they have SCSS instead of CSS just covert the SCSS to CSS here:

1 Like
12

New list styles -exciting!.

I got rid of sections except in the youtube video section which is linked to css/FastEmbed.css and assets/FastEmbed.js.

13

@kat, based on your screenshot, your “sublist” provides detail to the second item in the main list. The way you create that relationship in the code is to insert the sublist inside the second item, after the text of the second item. It doesn’t make sense to have a sublist that’s not associated with a parent item, so HTML doesn’t allow it. And neither does writing in general.

1 Like
14

Originally I had it that way, but was advised to change it. I do agree that there should be a better relationship.

15

HTML lists are designed to be nested. Taking a shortcut like AllMediaLab suggested defeats the purpose of HTML, which is designed for defining the meaningful relationships between various chunks of content.

Styling is done separately using CSS. If you didn’t do any styling at all (used only HTML), the HTML should still show that the sublist provides detail for that item because it’ll be appropriately indented. Then you can use styling to fine-tune the precise look and position of the HTML elements.

2 Likes