是 <p>在 <li> 中语义正确元素 [英] Is <p> semantically correct within an <li> element

问题描述

我正在标记一系列知识库操作方法文章，其中包含一系列步骤和相关的屏幕截图.过去，我总是将文本包裹在段落标签内的列表项中，但我想知道在这种情况下这在语义上是否正确，或者我是否应该使用标题标签(甚至什么都不使用).我很想将其标记如下:

<li><p>在<a href="">此处</a>下载 Windows 客户端软件.</p><a href="#screenshot1"><img src="screen1.jpg" alt="Step 1"/></a><li><p>双击下载的文件，然后单击下一步"继续.</p><a href="#screenshot2"><img src="screen2.jpg" alt="Step 2"/></a><ol>

此外，如果有任何 HTML5 元素在语义上更正确，我很想知道.

解决方案

这是一种使用

标记它的方法:

<li><图><a href="#screenshot1"><img src="screen1.jpg" alt="步骤 1"></a><图说明>在<a href="">此处</a>下载 Windows 客户端软件.</figcaption></图><li><图><a href="#screenshot2"><img src="screen2.jpg" alt="步骤 2"></a><图说明>双击下载的文件，然后单击下一步"继续.</figcaption></图></ol>

I'm marking up a series of knowledge base how-to type articles which have a series of steps and associated screenshots. In the past I have always wrapped text within a list item within paragraph tags but I'm wondering if this is semantically correct in this case or if I should be using a heading tag (or even nothing). I'm tempted to mark it up as follows:

<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>

Additionally, if there are any HTML5 elements which would be more semantically correct, I'd love to know.

解决方案

Here’s one way you could mark it up using <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>

这篇关于是 <p>在 <li> 中语义正确元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！