Семантический HTML - Как представить сравнение продуктов?

Question

Я собираюсь представить несколько продуктов на веб-сайте, чтобы позволить клиенту выбирать между ними.У каждого есть имя, описание и список плюсов и минусов по сравнению с другими продуктами.Я не уверен в том, как структурировать HTML.

Я вижу здесь несколько решений, наиболее очевидными из которых являются заголовки и абзацы, но мне интересно, подойдет ли одно из других.Я думаю, что мета-вопрос здесь: есть ли даже «самое правильное» решение;и как можно найти его найти?

Заголовки и абзацы

<h2>Product one</h2>
<p>This is our topseller…</p>
<h3>Pros</h3>
<p>…</p>
<h3>Cons</h3>
<p>…</p>

<h2>Product two</h2>

Список определений

Учитывая, что я привожу ряд вещей с сопровождающим описанием,список определений может подойти, поскольку он создает более тесную связь между названием продукта и информацией о нем.

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

Статьи или разделы

В зависимости от того, насколько важны продукты в контекстестраницы, я думаю, что статья может быть оправдана, хотя я не совсем уверен в этом, поскольку описания будут несколько короткими - возможно, 5–10 предложений.

<article>
    <h1>Product one</h1>
    <p>This is our topseller.<p>
    …
</article>
<article>
    <h1>Product two</h1>
    …
</article>

Разделы могут быть более подходящимиполагая, что полное сравнение, вероятно, представляет собой «полную или самодостаточную композицию», о которой W3C говорит в о своем определении HTML , а каждый продукт - о «тематической группировке», как указано в разделе о разделы .

тематический перерыв

с повторным определением элемента hr дляуказать «тематический перерыв на уровне абзаца» [ 3 ], довольно короткие описания также могут быть представлены в пунктах

<p>
    <strong>Product one.</strong>
    This is our topseller.
    <strong>Pros:</strong> …
    <strong>Cons:</strong>
</p>
<hr>
<p>
    <strong>Product two.</strong>
    …
</p>

Answer 1

Другой вариант - полностью использовать списки определений (и вкладывать списки pro / con в отдельные DL):

<dl>
<dt>Product 1</dt>
<dd>Description of Product 1</dd>
<dd>
  <dl>
    <dt>Pros</dt>
    <dd>Pro 1</dd>
    <dd>Pro 2</dd>
    
    <dt>Cons</dt>
    <dd>Con 1</dd>
    <dd>Con 2</dd>
  </dl>
</dd>

<dt>Product 2</dt>
<dd>Description of Product 2</dd>
<dd>
  <dl>
    <dt>Pros</dt>
    <dd>Pro 1</dd>
    <dd>Pro 2</dd>
    
    <dt>Cons</dt>
    <dd>Con 1</dd>
    <dd>Con 2</dd>
  </dl>
</dd>
</dl>

Answer 2

Большинство интернет-магазинов / платформ электронной коммерции используют ul > li узлы для отображения списков продуктов (например, Magento 2 и некоторые плагины Wordpress). Это, однако, является личным выбором. В зависимости от контекста продуктов вы можете использовать элементы article s, ul или ol. Лично я бы посоветовал вам, если вы предоставляете пользователям list-based content, всегда использовать элемент ul или ol, например:

<section class="product-comparison">
    <ul>
        <li>
            <div class="image">
                <img src=""/>
            </div>
            <div class="content">
                <div class="title">
                    <h2>my product title</h2>
                </div>
                <div class="inner">
                    <p>my description</p>
                </div>
            </div>
        </li>
        ...
    </ul>
</section>