Семантически ли правильно вложить элемент <article>в элемент <li>?

Question

с использованием HTML5, будет ли семантически правильным поместить элемент <article> в элемент <li> Ситуация, в которой это может оказаться полезным, - это список последних или популярных статей в блоге. Учтите следующее:

<section id="popular">
  <div class="blurb">
    <h2>Popular Articles</h2>
    <p>The most popular posts from my blog.</p>
  </div>
  <ul>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
  </ul>
</section>

Что будет выглядеть следующим образом:

Популярные статьи

Самые популярные посты из моего блога.

• Статья

  Отрывок из статьи.

• Статья

  Отрывок из статьи.

• Статья

  Отрывок из статьи.

Мне кажется, это отличный способ разметки информации. Мой единственный вопрос: правильно ли размещать элемент <article> внутри элемента <li> таким образом.

Answer 1

В этом нет ничего семантически неверного, но в этом нет необходимости. Элементы <ul> и <li> на самом деле ничего здесь не добавляют, если только вы не используете их стиль по умолчанию. Достаточно просто поместить теги <article> непосредственно в <section id="popular">, что уменьшит сложность вашей страницы и ее размер.

Чтобы определить, является ли что-то семантически правильным и полезным в HTML, задайте себе несколько вопросов. Используете ли вы каждый элемент по назначению? Например, это не семантически правильно, если вы используете элемент <a> для кнопки, так как <a> для гиперссылок, <button> для кнопок. Вам нужен каждый элемент, который вы используете, чтобы передать всю семантическую информацию о вашем контенте (разделы, заголовки, ссылки и т. Д.)? Есть ли что-то значимое, что вы намереваетесь передать, что не выражено с помощью соответствующих элементов? Наличие большого количества лишенных смысла элементов обычно не является вредным, но это добавляет беспорядок, и это может означать, что существуют семантические различия, которые вы передаете визуально, но не кодируете так, как программа для чтения с экрана, автоматический бот или браузер, представляющий информацию может иметь смысл другой формат.

Answer 2

Если он отображается правильно во всех реализациях, я понятия не имею, почему это будет неправильно ... HTML5 должен быть гибким.Кроме того, документация гласит:

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

Что выглядит какконтекст большинства доступных элементов.