Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

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.

like image 421
Michelle Avatar asked Oct 05 '11 11:10

Michelle


2 Answers

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.

like image 140
Dabbler Avatar answered Sep 20 '22 20:09

Dabbler


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.

like image 42
Alohci Avatar answered Sep 20 '22 20:09

Alohci