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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With