Question

I want to write a simple quiz using HTML5.

So each question might have a format like the code below. The problem is I'm not sure how to semantically structure this when including the question title. I'm wondering if prior to each ul I should have the question as an h1-h6 element or if each question should be boxed in with its own section element … or … if the entire quiz should have it own section element etc.

I read a similar question here but that question is in relation to a one-off unordered list when the quiz below is a group of unordered lists.

<!-- 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>
Was it helpful?

Solution

Each question could get its own article element, as it’s an "independent item of content".

If there are several questions on the same page, you could use a section element to group them.

<section>
  <h1>Quiz</h1>

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

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

</section>

If the question should be the heading of the article? It’s certainly possible, but there might be cases where this not appropriate or even possible (e.g., when the question is rather complex, involving media, blockquotes, paragraphs, …). So either use the question as heading, or label the questions ("Question 1", "Question 2", …) or don’t use any heading (thanks to using article, the outline will be correct):

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

OTHER TIPS

I would do:

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top