Semantic HTML – How to present a comparison of products?

问题: 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...

问题:

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>

回答1:

Another option is to use definition lists all the way (and nest your pro/con lists as separate DLs):

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


回答2:

Most webshops/ecommerce platforms use ul > li nodes for displaying lists of products (like Magento 2 and some Wordpress plugins). This however, is a personal choice. Depending on the context of products you can use articles, ul or ol elements. Personally I would advise that if you're providing users with list-based content, to always use a ul or ol element like such:

<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>
  • 发表于 2019-01-07 00:40
  • 阅读 ( 190 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除