我正在标注一系列知识库,如何键入具有一系列步骤和相关屏幕截图的文章。在过去,我总是在段落标签中的列表项中包装文本,但我想知道在这种情况下这是否在语义上是正确的,或者我应该使用标题标签(甚至没有)。我很想把它标记如下:
<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>
另外,如果有任何HTML5元素在语法上更正确,我很想知道。
解决方法
这里有一种方法可以使用< 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>