我应该用无序列表<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>
答案 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>