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

используя 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> таким образом.

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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