html - semantica - Es<p> semánticamente correcto dentro de un elemento<li>

section html5 ejemplos

Question

Estoy marcando una serie de artículos de procedimientos de tipo base de conocimientos que tienen una serie de pasos y capturas de pantalla asociadas. En el pasado, siempre envolví el texto dentro de un elemento de la lista dentro de las etiquetas de párrafo, pero me pregunto si esto es semánticamente correcto en este caso o si debería usar una etiqueta de encabezado (o incluso nada). Estoy tentado de marcarlo de la siguiente manera:

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

Además, si hay algún elemento de HTML5 que sea más correcto semánticamente, me encantaría saberlo.

Answer 1

Aquí hay una forma de marcarlo usando <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>

Answer 2

De acuerdo con esta respuesta , li ''s puede contener elementos de bloque o en línea (de la especificación HTML4).

Answer 3

Diría que la mayoría de las veces, las etiquetas <p> son superfluas y las etiquetas <li> solo son suficientes, pero es una buena opción, y no creo que lo que estás haciendo sea realmente perjudicial.

Answer 4

Si es valido LI se define como

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

y %flow se define como

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

y %block naturalmente contiene P, ya que es un elemento de nivel de bloque.