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

你必须每包内ULs的一个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>      

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

从技术上讲,这意味着只是包装<li>和</li>周围的<ul>元素.

但是,这通常表明存在设计缺陷.如果您只是希望某些项目更嵌套,那么您应该使用样式而不是标记来实现.包含与外部列表项无关的内部列表的列表相当混乱.

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>