CODEWITHSUNDEEP
htmlw3c-validation
user2177629
user2177629

Reputation: 167

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>

Upvotes: 4

Views: 17841

Answers (5)

maheshwaghmare
maheshwaghmare

Reputation: 2192

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>

Upvotes: 0

HundredVisionsGuy
HundredVisionsGuy

Reputation: 11

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.

Upvotes: 1

simon barnes
simon barnes

Reputation: 21

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

Upvotes: 2

Stephen Fischer
Stephen Fischer

Reputation: 2546

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

Upvotes: 4

user2985029
user2985029

Reputation:

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.

Upvotes: 3

Related Questions