Question

我正在标记一系列知识库，如何输入具有一系列步骤和相关屏幕截图的文章。在过去，我一直在段落标签中的列表项中包装文本，但我想知道在这种情况下这是否在语义上是正确的，或者我是否应该使用标题标签（甚至没有）。我很想把它标记如下：

<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元素在语义上更正确，我很想知道。

Answer 1

是的，这是有效的。 LI定义为

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

和%flow定义为

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

和%block自然包含P，因为它是块级元素。

Answer 2

我经常说，<p>标签是多余的，只有<li>标签就足够了，但这是一个很好的电话，我不认为你是什么做真的很有害。

Answer 3

以下是使用<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>

Answer 4

根据this answer，li可以包含块或内联元素（来自HTML4规范）。

在</p> <li>元素</li>中<p>语义正确

4 个答案: