ul中ul的正确语义

Question

我正在编写ul中的ul来制作一个手风琴类型的菜单。但是，当我在html验证器中检查下面的代码时，它会给出以下错误

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

在这种情况下，我如何为ul编写语义正确的html？

这是我的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>

Answer 1

您必须用LI包装每个内部UL，即

<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>      

Answer 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>
        ...

从技术上讲，这意味着只需在<ul>元素周围包装<li>和</li>即可。

但是，这通常表示存在设计缺陷。如果你只是想让一些项目更加嵌套，你应该使用样式而不是标记来实现。并且包含内部列表而不与外部列表的项目相关的列表是相当混乱的。

Answer 3

我花了一些时间才明白这一点，因为我将我的内部ul包装在它自己的li标记中，而不是在我的内部ul附加到的li标记中。如果您将内部的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>