Ist semantisch korrekt innerhalb von an Element

Ich markiere eine Reihe von Wissensdatenbank-Artikeln mit Anleitungen, die eine Reihe von Schritten und zugehörigen Screenshots enthalten. In der Vergangenheit habe ich Text innerhalb eines Listenelements immer innerhalb von Absatz-Tags umbrochen, aber ich frage mich, ob dies in diesem Fall semantisch korrekt ist oder ob ich ein Überschriften-Tag (oder gar nichts) verwenden sollte. Ich bin versucht, es wie folgt zu markieren:

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

Wenn es HTML5-Elemente gibt, die semantisch korrekter wären, würde ich es gerne wissen.

Ja, es ist gültig. LI ist definiert als

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

und %flow ist definiert als

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

und %block enthält natürlich P, da es sich um ein Element auf Blockebene handelt.

Ich würde das öfter sagen, die <p> Tags sind überflüssig und die <li> Tags allein sind ausreichend, aber es ist eine gute Idee, und ich denke nicht, dass das, was Sie tun, wirklich schädlich ist.

Laut dieser Antwort li‘s können Block- oder Inline-Elemente (aus der HTML4-Spezifikation) enthalten.

Hier ist eine Möglichkeit, wie Sie es markieren können <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>