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

Question

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

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

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

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

<span class="bread">

    <ul>

        <li><a href="./index.php">HOME</a></li>

        <li>ABOUT</li>

    </ul>

</span>

601 5

html5 html-validation

5 ответов:

Comments

Ничего не найдено.

Stephen Fischer · Accepted Answer · 2017-05-23 15:00:44

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

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

score 3 · Accepted Answer · 2013-04-05 02:05:08

В соответствии с рекомендациями html5<span> элемент может содержать только фразирование-содержание . Тот самый <ul> элемент отсутствует в списке тегов содержимого фразировки. Механизм проверки html применяет эти правила.

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

simon barnes · Accepted Answer · 2013-04-10 14:17:42

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

HundredVisionsGuy · Accepted Answer · 2014-03-05 23:21:07

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

maheshwaghmare · Accepted Answer · 2014-11-12 12:47:06

Использовать <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>