哪個是最好/正確的方式來表示span/div標記中的值？

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> 

但你會想也包括代表它resentation，例如：

<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是谷歌，微軟和雅虎合作到 通過創建主要搜索引擎支持的結構化數據標記架構 來改進網絡。頁面標記有助於搜索引擎瞭解網頁上的信息並提供更豐富的結果。 A 共享標記詞彙表使網站管理員可以更輕鬆地決定 標記架構，併爲他們的努力獲得最大利益。