Является ли <p>семантически правильным в элементе <li>

Я размещаю ряд статей о том, как создавать статьи, которые имеют ряд шагов и связанных скриншотов. Раньше я всегда завергал текст внутри элемента списка в тегах абзаца, но мне интересно, если это семантически корректно в этом случае или я должен использовать тег заголовка (или даже ничего). У меня возникает соблазн отметить это следующим образом:

<ol class="kbarticle">
        <li>
            <p>Download the Windows client software <a href="">here</a>.</p>
            <a href="#screenshot1"><img src="screen1.jpg" alt="Step 1" /></a>
        </li>
        <li>
            <p>Double click the downloaded file and click "Next" to continue.</p>
            <a href="#screenshot2"><img src="screen2.jpg" alt="Step 2" /></a>
        </li>
<ol>

Кроме того, если есть какие-либо элементы HTML5, которые были бы более семантически корректными, я хотел бы знать.

Ответ 1

Вот так вы можете отметить его, используя <figure>:

<ol class="kbarticle">
  <li>
    <figure>
      <a href="#screenshot1"><img src="screen1.jpg" alt="Step 1"></a>
      <figcaption>
        Download the Windows client software <a href="">here</a>.
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#screenshot2"><img src="screen2.jpg" alt="Step 2"></a>
      <figcaption>
        Double click the downloaded file and click "Next" to continue.
      </figcaption>
    </figure>
  </li>
</ol>

Ответ 2

Да, это действительно. LI определяется как

<!ELEMENT LI - O (%flow;)*             -- list item -->

и %flow определяется как

<!ENTITY % flow "%block; | %inline;">

и %block, естественно, содержит P, как элемент уровня блока.

Ответ 3

Я бы сказал, что чаще всего теги <p> являются излишними, а тегов <li> достаточно, но это прекрасный вызов, и я не думаю, что то, что вы делаете, действительно вредно.

Ответ 4

В соответствии с этим ответом li может содержать блок или встроенные элементы (из спецификации HTML4).