正如 Html5 語法中所闡述的，元素可以包含屬性（attributes）給一個元素設置各種屬性（propertIEs）。
有些屬性被定義為全局的，可以用在任何元素上，而其他的被定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的示例所示。
下面是一個使用 Html5 屬性的例子，演示了如何用名為 class 的屬性和值 “example” 標記一個 div 元素：
<div class="example">...</div>
屬性只能在起始標簽中指定，絕對不能用在結束標簽中。
Html5 屬性不區分大小寫，可以全部大寫或者混合使用，盡管最常見的約定是始終使用小寫。
標准屬性
下面列出的屬性幾乎所有的 Html5 標簽都支持。
自定義屬性
Html5 還引入了一個新特性，就是可以添加自定義的數據屬性。
自定義數據屬性以 data- 開頭，基於我們的需求命名。下面是一個簡單的例子：
<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 Html5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標准屬性類似的方式獲取它們的值。
在Html元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而Html5可以為你提供在有效的網頁內創建並使用自己的元素屬性的功能。
創建Html5文件：
如果你還沒想好要使用哪一個，可以復制下面的代碼：
在body中設置自定義元素，在head部分腳本區域利用JavaScript元素進行訪問。
創建元素：
首先，添加一些簡單的內容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。
正如你所看到的那樣，自定義屬性的形式為：“data-*”，在“data-”部分設定名稱或者你選定的名稱。在Html5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗證網頁是否有效可才采用這種方法。
當然，項目細節部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用於不同產品類別的零售網站。
自定義屬性允許你以一種特殊的方式利用頁面內的JavaScript代碼來設置元素，例如，動畫顯示功能。如果沒有標准的Html元素，我們建議使用自定義屬性。
添加測試按鈕
在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的代碼添加到頁面中：
XML/Html Code復制內容到剪貼板
獲取屬性：
在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區域添加以下函數：
JavaScript Code復制內容到剪貼板這裡，我們為示例增加了alert 值，當然你也可以根據自身需求在腳本中添加。
獲取數據：
你可以使用元素數據集來替代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進行迭代，然而，浏覽器對數據集的支持依然非常低，所以牢記這一點，此代碼與//後面的方法一樣可執行相同的進程。
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在數據集中刪除“data-”，它仍然包含在Html中。
請注意，如果你的自定義屬性名稱中有一個連字符，當通過數據訪問時這會呈現出camel-case形式，即（“data-product-category” 變成“productCategory”)。
其他模塊、函數
我們已經獲取該屬性，腳本仍然可以設置和刪除。下面的代碼演示了如何使用標准的JavaScript模塊和數據集來設置屬性。
JavaScript Code復制內容到剪貼板在Html5中實現自定義屬性技術上並不是很復雜，真正困難的是選擇使用的方法是否適用於你的項目；如果適用，該如何使其更有效？請記住，現在啟用數據集方法作為頁面功能還為時尚早，畢竟很多浏覽器暫不支持此功能。