Question

让我们说我需要跟踪html中的值（产品价格），以便在javascript中使用它。例如：

Product A: $<span>200.00</span>
Product B: $<span>300.00</span>

不考虑这里的javascript，而是HTML，可以通过多种方式描述产品和价值，例如：

<span>200</span>
<span value="200"></span>
<span data-value="200"></span>
<span title="200"></span>

等...

表示产品价值的更好，语义正确的方法是什么？

Answer 1

其中只有两个真的可行，只有一个允许你将其值与其外观/表示分开来表示：

这些是可行的：

<span>200</span>
<span data-value="200"></span>

这是唯一允许您将其与其表示分开表示的值：

<span data-value="200"></span>

但你想还包括它的表示，例如：

<span data-value="200">$200</span>

在value上使用span将是无效的HTML，并且使用title将使用UI功能来包含数据。

Answer 2

在HTML级别上，价格不具有特定的语义含义。特别是在你的第一个例子中，它甚至不是一个价格，因为你要省略货币 - 它只是一个数字。因此，无语义的<span>很好。

您似乎在寻找microformats或微数据，特别是Product架构。这允许您为搜索引擎等提供额外的标记，例如：

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Kenmore White 17" Microwave</span>
  <img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
   Rated <span itemprop="ratingValue">3.5</span>/5
   based on <span itemprop="reviewCount">11</span> customer reviews
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <!--price is 1000, a number, with locale-specific thousands separator
    and decimal mark, and the $ character is marked up with the
    machine-readable code "USD" -->
    <span itemprop="priceCurrency" content="USD">$</span><span
          itemprop="price" content="1000.00">1,000.00</span>
    <link itemprop="availability" href="http://schema.org/InStock" />In stock
  </div>
  Product description:
  <span itemprop="description">0.7 cubic feet countertop microwave.
  Has six preset cooking categories and convenience features like
  Add-A-Minute and Child Lock.</span>
  Customer reviews:
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Not a happy camper</span> -
    by <span itemprop="author">Ellie</span>,
    <meta itemprop="datePublished" content="2011-04-01">April 1, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1">
      <span itemprop="ratingValue">1</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">The lamp burned out and now I have to replace
    it. </span>
  </div>
  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Value purchase</span> -
    by <span itemprop="author">Lucas</span>,
    <meta itemprop="datePublished" content="2011-03-25">March 25, 2011
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
      <meta itemprop="worstRating" content = "1"/>
      <span itemprop="ratingValue">4</span>/
      <span itemprop="bestRating">5</span>stars
    </div>
    <span itemprop="description">Great microwave for the price. It is small and
    fits in my apartment.</span>
  </div>
  ...
</div>

这是向元素引入智能意义的推荐方法，而W3C不会因为语义含义的每一个小概念而混淆HTML标准。

专门为此目的的“大型搜索引擎人员”

Schema.org itself was created：

schema.org是Google，Microsoft和Yahoo!的合作。至通过创建支持的结构化数据标记架构来改进Web 主要搜索引擎。页面标记有助于搜索引擎了解网页上的信息并提供更丰富的结果。一个共享标记词汇表使网站管理员更容易决定标记架构并为他们的努力获得最大利益。

哪个是表示span / div标记中值的最佳/正确方法？

2 个答案: