Ошибка проверки: ul не допускается как дочерний элемент span

Question

Я не понимаю, почему валидатор WC3 помечает этот HTML как недействительный, ошибка, о которой он сообщает...

'' Элемент ul не допускается как дочерний элемент span в этом контексте. (Подавление дальнейших ошибок из этого поддерева.)''

Я использую HTML5, и этот код для хлебных крошек.

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

Answer 1

<span> по определению это встроенный элемент (например, вы используете его внутри абзаца), в то время как <ul> является блочным элементом (который является его собственным небольшим фрагментом пространства, обычно с пробелом до / после, в отличие от <span>).

У других людей была такая же проблема, и в итоге они использовали <div> теги вместо. См. Можно ли поместить список в тег span?

Answer 2

Согласно рекомендациям HTML5 <span> элемент может содержать только phrasing-контент. <ul> Элемент отсутствует в списке фраз контента тегов. Механизм проверки HTML обеспечивает соблюдение этих правил.

Вы можете использовать <div> в качестве контейнера вместо.

Answer 3

Если вы используете div как display:inline, он должен номинально соответствовать правилу, в то же время ведя себя как span:)

Answer 4

Если вы используете его в качестве крошки, это навигационный элемент, поэтому <nav> имеет смысл в качестве контейнера вашего <ul>, В противном случае, дать UL класс "хлебных крошек" <ul class="breadcrumb"> и стиль его в зависимости от его класса.

Answer 5

ИСПОЛЬЗОВАНИЕ <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>