Является ли эта структура HTML действительной? UL> DIV> {LI, LI}, DIV> {LI, LI}, DIV> {LI, LI}

Является ли эта структура HTML действительной?

<ul class="blog-category">
  <div class="three column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
  </div>
  <div class="three column">
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
  </div>
  <div class="three column">
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
  </div>
</ul>

Я вставляю li внутри div, который находится внутри ul. Как вы думаете? Является ли эта структура семантически действительной и будет ли она распознана как единый список?

Ответ 1

Нет, div не допускается как прямой дочерний элемент ul. Всякий раз, когда вы сомневаетесь, проверяйте свою страницу с помощью W3C или проверяйте соответствующий статья о W3C:

4.5.6 Элемент ul

Категории
Содержимое потока.

Контексты, в которых этот элемент можно использовать:
Где ожидается содержимое потока.

Модель контента:
Ноль или более элементов li.

Атрибуты контента:
Глобальные атрибуты

Интерфейс DOM:
interface HTMLUListElement : HTMLElement {};

Вместо этого вы можете использовать

<ul class="blog-category">
    <li class="three column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="three column">
        <ul>
            <li>Item 4</li>
            ...
        </ul>
    </li>
</ul>

Ответ 2

<div> не являются технически допустимыми внутри <ul>. Валидатор W3 возвращает этот результат:

Элемент div не разрешен как дочерний элемент элемента ul в этом контексте

Было бы разумнее сгруппировать код, который у вас другой, например:

<div class="blog-category">
<ul class="three-column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
</ul>
</div>

Ответ 3

Нет, это неверно, ни в HTML4, ни в XHTML, ни в HTML5.

Если вы подтвердите это с помощью w3c markup validator, вы, вероятно, получите что-то вроде:

Элемент div не разрешен как дочерний элемент ul

Подробнее о списках можно найти здесь.

Ответ 4

Допустим также:

          <ul>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
        </ul>

Я проверил http://validator.w3.org/check

Ответ 5

Это допустимо HTML5:

<ul>
    <li class="col">
        <div>Title</div>
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
    <li class="col">
        <div>Title</div>
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>