Most semantic way to structure titles for an HTML5 quiz application

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>

Generally, questions about “semantically correct” markup are speculative and opinion-based. — Jukka K. Korpela, Feb 02 '14 at 09:18
I know but I didn't know any other way to phrase it. There are 'hard' case uses like screen readers but I didn't want to make it more complicated. I figure there are implicit assumptions that I may not have about the best way to do this which Stackoverflow doesn't really account for unless you just fire off a question and see what comes back...so I just asked anyway — William, Feb 02 '14 at 09:21
@JukkaK.Korpela - The question doesn't ask for "semantically correct" mark-up. It asks for the "Most semantic way" in HTML5. That should have one or more objective answers, even if the quality of the answers does not always provide them. — Alohci, Feb 02 '14 at 12:41
@Alohci, asking for “the most semantic way” is even more opinion-based. Everyone and his brother has his own meaning for “semantic”. The question is practically pointless; it would be much more meaningful to ask for an easily styleable way, or an accessible way, or a way that has good usability. Even then, the question would be too vague or or broad unless more specific criteria are given. — Jukka K. Korpela, Feb 02 '14 at 13:21
@JukkaK.Korpela - Not at all. HTML5 describes semantics, not styleability or accessibility. It is the role of semantics to provide a media independent interface that HTML producers can provide mark-up to, and HTML consumers can interpret appropriately for their users, including those that require particular accessibility or usability measures. The most semantic way is the way that provides the richest, conforming way that the content can supplied such that those consumers have the greatest opportunity to exploit that interface to its fullest extent. — Alohci, Feb 02 '14 at 18:03

rybo111 · Answer 1 · 2014-02-02T08:21:48.483

0

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>

edited Feb 02 '14 at 08:21

answered Feb 02 '14 at 08:16

rybo111

12,240
4
61
70

So would you not do an unordered list altogether? – William Feb 02 '14 at 08:17
I would use an ordered list if it requires numbering. Otherwise you can just style the label. – rybo111 Feb 02 '14 at 08:19
You should use labels anyway - it means the user can click the text and it checks the radio. – rybo111 Feb 02 '14 at 09:13

score 0 · Accepted Answer · answered Feb 02 '14 at 14:29

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>

Most semantic way to structure titles for an HTML5 quiz application

2 Answers2