Html <p> 在 <li> 元素中在语义上是否正确

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7660575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:57:40  来源:igfitidea点击:

Is <p> semantically correct within an <li> element

html

提问by Michelle

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.

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

采纳答案by Daniel Brockman

Here's one way you could mark it up using <figure>:

这是您可以使用<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>

回答by Dabbler

Yes, it's valid. LI is defined as

是的,它是有效的。LI 定义为

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

and %flowis defined as

并被%flow定义为

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

and %blocknaturally contains P, as it's a block level element.

并且%block自然包含 P,因为它是块级元素。

回答by Alohci

I'd say that more often than not, the <p>tags are superfluous and the <li>tags alone are sufficient, but it's a fine call, and I don't think what you're doing is really harmful.

我会说,通常情况下,<p>标签是多余的,<li>仅标签就足够了,但这是一个很好的选择,我认为您所做的并没有真正有害。

回答by whostolemyhat

According to this answer, li's can contain block or inline elements (from the HTML4 spec).

根据这个答案li's 可以包含块或内联元素(来自 HTML4 规范)。