I am about to present a few products on a website in order to allow a customer to choose between them. Each has a name, description and a list of pros and cons compared to the other products. I am unsure about how to structure the HTML.
I see multiple solutions here, headings and paragraphs being the most obvious one, but I wonder if one of the others might be more appropriate. I think the meta-question here is: Is there even a “most correct” solution; and how would one find go about finding it?
Headings and paragraphs
<h2>Product one</h2>
<p>This is our topseller…</p>
<h3>Pros</h3>
<p>…</p>
<h3>Cons</h3>
<p>…</p>
<h2>Product two</h2>
Definition list
Given that I present a number of things with an accompanying description, the definition list might be suitable, since it creates a tighter link between the product name and the information about it.
<dl>
<dt>Product one</dt>
<dd>
This is our topseller.
<h2>Pros</h2><p>…<p> <!-- Instead of the heading, I also thought of -->
<h2>Cons</h2><p>…<p> <!-- using <strong> or no markup at all. -->
</dd>
<dt>Product two</dt>
</dl>
Articles or sections
Based on how important the products are in the context of the page, I think an article might be justified, though I’m not quite convinced about this, since the descriptions will be somewhat short – maybe 5–10 sentences.
<article>
<h1>Product one</h1>
<p>This is our topseller.<p>
…
</article>
<article>
<h1>Product two</h1>
…
</article>
Sections might be more appropriate, considering that the whole comparison probably is the “complete, or self-contained, composition” the W3C talks about in its definiton of HTML, and each product a “thematic grouping” as referenced in the section about sections.
Thematic break
With the re-definition of the hr element to indicate a “paragraph-level thematic break” [3], the rather short descriptions could also be presented in paragraphs
<p>
<strong>Product one.</strong>
This is our topseller.
<strong>Pros:</strong> …
<strong>Cons:</strong>
</p>
<hr>
<p>
<strong>Product two.</strong>
…
</p>