哪些HTML5代码在语义上是正确的,以表示电子商务产品?

时间:2017-09-17 01:17:21

标签: html5 semantic-markup

我应该用无序列表<ul><li>包装产品吗?

如何在没有JavaScript的情况下点击产品,只使用HTML?我可以用每个产品包装:

      <a href="linkToProduct">
       <article>
         <h3>Product 1</h3>
         <img src="images/product1.png" alt="product 1">
         <p><data value="50">50</data>$</p>
      </article></a>

这是我的代码:

<section id="my-products">
      <h1>My Products</h1>
      <article>
        <h3>Product 1</h3>
        <img src="images/product1.png" alt="product 1">
        <p><data value="50">50</data>$</p>
      </article>
      <article>
        <h3>Product 2</h3>
        <img src="images/product2.png" alt="product 2">
        <p><data value="130">130</data>$</p>
      </article>
      <article>
        <h3>Nikon D7000</h3>
        <img src="images/product3.png" alt="product 3">
        <p><data value="56">56</data>$</p>
      </article>
</section>

2 个答案:

答案 0 :(得分:1)

article元素是产品的正确选择。

如果您有产品列表,则可以使用ul元素,但you don’t have to。在article元素中放置多个section元素而不使用ul元素也可以。

要使产品的整个内容可以点击,您可以将所有内容都包含在a元素中。但是,与使用<a><article></article></a>不同,最好使用<article><a></a></article>this allows使用bookmark链接类型:

<article>
  <a href="" rel="bookmark">
    <!-- … -->
  </a>
</article>

答案 1 :(得分:0)

首先,是的,您需要使用<ul><li>并将您的产品包装在<a>标签中。

其次,在您的情况下,您可以使用<article>来表示产品,也可以使用itemtype属性。不要在不使用<h3>的情况下放置<h2>

所以你的代码看起来像这样:

<section id="my-products">
  <h1>My Products</h1>
  <ul>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Product 1</h2>
          <img src="images/product1.png" alt="product 1">
          <p><data value="50">50</data>$</p>
        </article>
      </a>
    </li>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Product 2</h2>
          <img src="images/product2.png" alt="product 2">
          <p><data value="130">130</data>$</p>
        </article>
      </a>
    </li>
    <li>
      <a href="product_link">
        <article class="product-item" itemscope itemtype="http://schema.org/Product">
          <h2 itemprop="name">Nikon D7000</h2>
          <img src="images/product3.png" alt="product 3">
          <p><data value="56">56</data>$</p>
        </article>
      </a>
    </li>
  </ul>
</section>