Is <p> semantically correct within an <li> element
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.
Yes, it's valid. LI is defined as
<!ELEMENT LI - O (%flow;)* -- list item -->
and %flow
is defined as
<!ENTITY % flow "%block; | %inline;">
and %block
naturally contains P, as it's a block level element.
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.
According to this answer, li
's can contain block or inline elements (from the HTML4 spec).
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>
精彩评论