Validation error: ul not allowed as child of element span

问题

I do not understand why the WC3 validator is flagging this HTML as invalid, the error it reports back is...

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

I'm using HTML5, and this code is for breadcrumbs.

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

回答1:

<span> by definition is an inline element (so you use it inside a paragraph, for example), while <ul> is a block element (which is its own little chunk of space, usually with space before/after it unlike <span>).

Other people have had the same issue, and end up using <div> tags instead. See Is it possible to put a list inside a span tag?

回答2:

According to the html5 recommendations the <span> element can only contain phrasing-content. The <ul> element is not in the list of phrasing content tags. The html validation engine is enforcing those rules.

You can use a <div> as the container instead.

回答3:

if you style the div as 'display:inline' it should nominally conform to the rule, whilst behaving exactly like a span :)

回答4:

If you're using it as a breadcrumb, it's a navigational element, so <nav> makes the most sense as the container of your <ul>. Otherwise, give the UL a class of "breadcrumb" <ul class="breadcrumb"> and style it based on its class.

回答5:

USE <div>

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

instead of <span>

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

来源：https://stackoverflow.com/questions/15823032/validation-error-ul-not-allowed-as-child-of-element-span