如 HTML5 語法所闡述的，元素可以包含屬性（attributes）為一個元素設定各種屬性（properties）。
有些屬性被定義為全域的，可以用在任何元素上，而其他的則定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的範例所示。
以下是一個使用 HTML5 屬性的例子，示範如何用名為 class 的屬性和值 “example” 標記一個 div 元素：
HTML5 屬性不區分大小寫，可以全部大寫或混合使用，儘管最常見的約定是始終使用小寫。
標準屬性
下面列出的屬性幾乎所有的 HTML5 標籤都支援。
|
選項 | 功能 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| accesskey | 用戶自訂 | 定義存取元素的鍵盤快速鍵。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| align | right, left, center | 水平對齊標籤。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background | URL | 在元素後面設定一個背景圖像。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| bgcolor | 數值，十六進位值，RGB值 | 在元素後面設定一個背景顏色。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| class | 使用者定義。 | 分類一個元素，方便使用級聯樣式表。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| contenteditable | true, false | 定義使用者是否可以編輯元素的內容。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| contextmenu | Menu id | 為元素定義上下文選單。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| data-XXXX | 使用者定義。 | 自訂屬性。 HTML 文件的作者可以定義自己的屬性。 自訂屬性必須以 "data-" 開頭。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| draggable | true,false, auto | 定義使用者是否可以拖曳元素。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| height | 數字值 | 定義表格，影像或表格單元的高度。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| hidden | hidden | 定義元素是否應該可見。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| id | 使用者定義。 | 命名元素，方便使用級聯樣式表。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| item | 元素列表。 | 用於組合元素。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| itemprop | 條目清單。 | 用於組合條目。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spellcheck | true, false | 定義元素是否必須有拼字或錯誤檢查。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| style | CSS 樣式表。 | 為元素定義內聯樣式。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| subject | 使用者定義 id。 | 定義元素關聯的條目。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| tabindex | Tab number | 定於元素的 tab 鍵順序。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| title | 使用者定義。 | 元素的「彈出」標題。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| valign | top, middle, bottom | HTML 元素內標籤的垂直對齊方式。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| width | 數字值。 | 定義表格，影像和表格單元的寬度。 |
自訂屬性
HTML5 也引進了一個新特性，就是可以加入自訂的資料屬性。
自訂資料屬性以 data- 開頭，基於我們的需求命名。下面是一個簡單的例子：
在HTML元素中添加自訂屬性，透過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以為你提供在有效的網頁內創建並使用自己的元素屬性的功能。
建立HTML5檔案：
如果你還沒想好要用哪一個，可以複製下面的程式碼：
在body中設定自訂元素，在head部分腳本區域利用JavaScript元素進行存取。
建立元素：
首先，加入一些簡單的內容和自訂屬性以及ID等元素，以便我們能夠識別JavaScript範例。
正如你所看到的那樣，自訂屬性的形式為：“data-*”，在“data-”部分設定名稱或你選定的名稱。在HTML5中使用自訂屬性，這是唯一有效的方法。因此，如果你想驗證網頁是否有效可才採用這種方法。
當然，專案細節部分決定了自訂屬性是否對您有用，以及如何命名。這個範例可適用於不同產品類別的零售網站。
自訂屬性可讓你以特殊的方式利用頁面內的JavaScript程式碼來設定元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自訂屬性。
新增測試按鈕
在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的程式碼加入頁面中：
在JavaScript中存取屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區域新增以下函數：
這裡，我們為範例增加了alert 值，當然你也可以根據自身需求在腳本中加入。
取得數據：
你可以使用元素資料集來取代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，程式碼透過多種屬性進行迭代，然而，瀏覽器對資料集的支援依然非常低，所以牢記這一點，此程式碼與//後面的方法一樣可執行相同的進程。
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在資料集中刪除“data-”，它仍然包含在HTML中。
請注意，如果你的自訂屬性名稱中有一個連字符，當透過資料存取時這會呈現出camel-case形式，即（“data-product-category” 變成“productCategory”)。
其他模組、函數
我們已經取得該屬性，腳本仍然可以設定和刪除。下面的程式碼示範如何使用標準的JavaScript模組和資料集來設定屬性。
