验证错误：ul不允许作为元素跨度的子元素

Question

我不明白为什么WC3验证器将此HTML标记为无效，它报告的错误是......

''元素ul在此上下文中不允许作为元素跨度的子元素。 （抑制此子树中的更多错误。）''

我正在使用HTML5，此代码用于面包屑。

<span class="bread">
    <ul>
        <li><a href="./index.php">HOME</a></li>
        <li>ABOUT</li>
    </ul>
</span>

Answer 1

根据定义，

<span>是一个内联元素（例如，你在段落中使用它），而<ul>是一个块元素（它是自己的一小块空间，通常是空格它之前/之后不像<span>）。

其他人遇到了同样的问题，最后使用了<div>代码。见Is it possible to put a list inside a span tag?

Answer 2

根据html5建议，<span>元素只能包含phrasing-content。 <ul>元素不在短语内容标记列表中。 html验证引擎正在执行这些规则。

您可以使用<div>代替容器。

Answer 3

如果你将div设置为'display：inline'，它应该名义上符合规则，同时表现得像一个span：）

Answer 4

如果您将它用作面包屑，那么它就是一个导航元素，因此<nav>最适合作为<ul>的容器。否则，给UL一个“breadcrumb”<ul class="breadcrumb">类，并根据它的类来设置它。

Answer 5

USE <div>

<div class="bread">
    <ul>
        <li><a href="./index.php">HOME</a></li>
        <li>ABOUT</li>
    </ul>
</div>

而不是<span>

<span class="bread">
    <ul>
        <li><a href="./index.php">HOME</a></li>
        <li>ABOUT</li>
    </ul>
</span>