Question

我想用HTML5写一个简单的测验。

因此每个问题的格式可能与下面的代码类似。问题是我不知道如何在包含问题标题时进行语义结构化。我想知道在每个ul之前我是否应该将问题作为h1 - h6元素，或者每个问题都应该用自己的section元素加入...或者...如果整个测验应该拥有它自己的section元素等。

我读了一个类似的问题here但是当下面的测验是一组无序列表时，这个问题与一次性无序列表有关。

<!-- How to add question titles semantically? -->
<ul>
    <li><input type="radio"> Answer1 </li>
    <li><input type="radio"> Answer2 </li>
    <li><input type="radio"> Answer3 </li>
</ul>

<ul>
    <li><input type="radio"> Answer1 </li>
    <li><input type="radio"> Answer2 </li>
    <li><input type="radio"> Answer3 </li>
</ul>

<ul>
    <li><input type="radio"> Answer1 </li>
    <li><input type="radio"> Answer2 </li>
    <li><input type="radio"> Answer3 </li>
</ul>

Answer 1

我愿意：

<div class="question">
  <h3>Question here</h3>
  <label><input type="radio" name="question[1]" value="1" /> Answer 1</label>
  <label><input type="radio" name="question[1]" value="2" /> Answer 2</label>
</div>

Answer 2

每个问题都可以获得自己的article element，因为它是“独立的内容项目”。

如果同一页面上有多个问题，您可以使用section元素对其进行分组。

<section>
  <h1>Quiz</h1>

  <article>
    <!-- question 1 -->
  </article>

  <article>
    <!-- question 2 -->
  </article>

</section>

如果问题应该是article的标题？这当然是可能的，但可能存在这种情况，这种情况不合适甚至不可能（例如，当问题相当复杂时，涉及媒体，块引用，段落......）。因此要么使用问题作为标题，要么标记问题（“问题1”，“问题2”，......）或不使用任何标题（感谢使用article，大纲将是正确的）：< / p>

<!-- question as heading -->
<article>
  <h1>Where was J. R. R. Tolkien born?</h1>
</article>

<!-- label as heading, question in p -->
<article>
  <h1>Question 1</h1>
  <p>Where was J. R. R. Tolkien born?</p>
</article>

<!-- implicit/no heading, question in p -->
<article>
  <p>Where was J. R. R. Tolkien born?</p>
</article>

构建HTML5测验应用程序标题的大多数语义方式

2 个答案: