Validation error: ul not allowed as child of element span

Question

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>

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

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

Answer 3

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

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

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