Most suitable HTML5 element for this business statement

Question

A strange question, but I'm struggling over semantics vs accessibility vs appearance. Please note this question isn't related to CSS, but the underlying HTML5 code. Usually I wouldn't post this type of question, but this has really erupted into a debate.

I have a business statement on a website that defines why my organisation is the best (actually a sample statement...):

TL;DR What is the best HTML5 element used to display this, from a semantics/accessibility perspective?

Our initial guess was that a simple list would suffice:

<ul>
    <li>Footballs:</li>
    <li>Rounder</li>
    <li>Better</li>
    <li>Stronger</li>
</ul>

But then the argument is that sentence structure was more important, so perhaps:

<div>
    <span>Footballs:</span>
    <span>Rounder,</span>
    <span>Better,</span>
    <span>Stronger</span>
</div>

However, this approach then renders in the commas, which is unsightly. However, the counter-argument in my mind says commas should be there for screen readers...

We've even considered the DataList, but it doesn't feel quite right...

<dl>
    <dt>Footballs:</dt>
    <dd>
        <span>Rounder</span>
        <span>Better</span>
        <span>Stronger</span>
    </dd>
</dl>

Is there a specific HTML5 element that covers this type of statement?

Answer 1

You have a list of something (in this case, the benefits), and HTML offers four ways to convey this. You cover three ways, and the fourth is using ol, but this is only appropriate if the order is relevant, which doesn’t seem to be the case here, so we can ignore it.

Natural language

Just a sentence with punctuation:

<p>Footballs: rounder, better, stronger.</p>

You can add span element for styling purposes. And you could even visually hide the commas, but there is no need to go this way, simply use one of the markup alternatives instead.

Markup: ul

Having "Footballs" as part of the list doesn’t make sense. This "label" should be outside of the list.

<p>Footballs:</p>
<ul>
  <li>Rounder</li>
  <li>Better</li>
  <li>Stronger</li>
</ul>

Markup: dl

The three benefits should either be a ul in one dd, or each one should be its own dd. There is a semantic difference, but it’s not a clear decision in this example case.

<dl>
  <dt>Footballs</dt>
  <dd>
    <ul>
      <li>Rounder</li>
      <li>Better</li>
      <li>Stronger</li>
    </ul>
  </dd>
</dl>

<dl>
  <dt>Footballs</dt>
  <dd>Rounder</dd>
  <dd>Better</dd>
  <dd>Stronger</dd>
</dl>

Which one to choose?

If you are fine with having and displaying the punctuation, go with the natural language solution.

If there should be no punctuation, go with the ul. It’s less complex than dl, and as you don’t have additional name-value groups, dl isn’t really "worth" it.