Правильная семантика для ul в ul

Я пишу ul внутри ul, чтобы создать меню аккордеона. Но когда я проверяю свой код ниже в html validator, он дает мне эти ошибки.

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

Как я могу написать семантически правильный html для ul в этом случае?

Вот мой html

<nav class="row">
            <ul class="menu">
                <li>
                    <a href="">Uutiset</a>
                </li>
                <ul class="inside">
                    <li><a href="">Fringilla Condimentum</a></li>
                    <li><a href="">Lorem</a></li>
                    <li><a href="">Fringillau</a></li>
                    <li><a href="">Curabitur</a></li>
                    <li><a href="">Mollis</a></li>
                    <li><a href="">Ipsum</a></li>
                    <li><a href="">Lorem</a></li>
                    <li><a href="">Fringillau</a></li>
                    <li><a href="">Curabitur</a></li>
                    <li><a href="">Mollis</a></li>
                    <li><a href="">Ipsum</a></li>
                </ul>
                <li><a href="">Foorumi</a></li>
                <li><a href="">Kauppa</a></li>
                <li><a href="">Messut</a></li>
                <li>
                    <a href="">Asiakaspalvelu</a>
                </li>
                <ul class="inside">
                    <li><a href="">Tilaa lehti</a></li>
                    <li><a href="">Muutos tilaukseen</a></li>
                    <li><a href="">Lähetä uutisvinkki</a></li>
                    <li><a href="">Anna palautetta</a></li>
                </ul>
                <li><a href="">Nakoislehti</a></li>
                <li><a href="">Nae meidat</a></li>
            </ul>
        </nav>

Ответ 1

Вы должны обернуть каждый внутренний UL с помощью LI, i.e.

<ul class="menu">
    <li>
        <a href="">Uutiset</a>
    </li>
    <li> <----
        <ul class="inside">
            <li><a href="">Fringilla Condimentum</a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li> <----
 </ul>

Ответ 2

Дети (прямые потомки) элемента ul должны быть li элементами. Это чисто синтаксическое требование.

Однако способ исправления ошибки зависит от семантики. Если внутренние списки соответствуют подтемам темы предыдущего li, тогда вы должны обернуть внутренний список внутри li, например.

            <li>
                <a href="">Asiakaspalvelu</a>
                <ul class="inside">
                    <li><a href="">Tilaa lehti</a></li>
                    <li><a href="">Muutos tilaukseen</a></li>
                    <li><a href="">Lähetä uutisvinkki</a></li>
                    <li><a href="">Anna palautetta</a></li>
                </ul>
            </li>

Технически это означает, что вы перемещаете один тег </li> вперед. Однако вы можете изменить вложенность, чтобы отразить структуру, но это только для чтения HTML.

Если, с другой стороны, внутренний список - это просто элементы на более низком уровне в некотором смысле, не подчиняясь элементу более высокого уровня, вы можете обернуть их внутри <li>, который не содержит ничего больше, например

        <ul class="menu">
            <li>
                <a href="">Uutiset</a>
            </li>
            <li>
                <ul class="inside">
                    <li><a href="">Fringilla Condimentum</a></li>
                    <li><a href="">Lorem</a></li>
                    ...
                </ul>
            </li>
        ...

Технически это означает просто обертывание <li> и </li> вокруг элемента <ul>.

Однако это обычно указывает на недостаток дизайна. Если вы хотите, чтобы некоторые элементы были более вложенными, вы должны сделать это с помощью стиля, а не разметки. И список, содержащий внутренние списки без отношения к элементам внешнего списка, довольно запутан.

Ответ 3

Вам нужно поместить внутренний ul внутри элемента li.

Ответ 4

Мне потребовалось немного времени, чтобы понять, потому что я завернул свою внутреннюю ul в свой собственный тег li, а не в тег li, к которому привязана моя внутренняя ul. Если вы завернете свою внутреннюю ul в свой собственный тег li, вы получите дополнительную ненужную пулю.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>item 3</li>
 <li>Item 4</li>
 <li>Item 5 has sub items:
      <ul>
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
      </ul>
 </li>
 <li>Item 6</li>
 <li>Item 7</li>
</ul>