V HTML5 máme nyní možnost vložit vlastní datové atributy do HTML elementů. Tyto atributy se skládají z dvou částí:

Jméno atributu

Jméno atributu musí být minimálně jeden znak dlouhé a musí začínat prefixem ‚ data-‘. Neměl by obsahovat velká písmena

Hodnota atributu

Hodnotou atributu může být libovolný řetězec.

Pomocí této syntaxe můžeme přidat vlastní data do HTML kódu, a to takto:

<ul id="semena-zelenina">
  <li data-rozestup="10cm" data-cas-setby="Březen až červen">Mrkev</li>
  <li data-rozestup="30cm" data-cas-setby="Únor až březen">Celer</li>
  <li data-rozestup="3cm" data-cas-setby="Březen až září">Ředkvičky</li>
</ul>

K takto uloženým datům můžeme přistupovat pomocí JavaScriptu. Můžeme je využít např. k tomu, že uživateli se při kliknutí na zeleninu zobrazí okno s informacemi o období setí a o rozestupu mezi semeny.  Díky atributům data-, které jsme přidali k elementům <li>, můžeme tyto informace zobrazit přímo, bez nutnosti volat Ajaxem server a dotazovat se na ně.

Tím, že atributy začínají prefixem data- je zajištěno, že je bude prohlížeč ignorovat. 

Specifikace říká (zvýraznil autor):

Uživatelské datové atributy jsou určeny k ukládání soukromých uživatelských dat do stránky či aplikace v případech, kdy pro ně není určen specifický element či atribut.

Tyto atributy nejsou určeny pro využití nezávislým softwarem, který není součástí stránky, na níž jsou atributy využity.

Každý HTML element může mít libovolný počet datových atributů libovolné hodnoty.

Specifikace W3C

Jak můžeme použít datové atributy?

Uživatelské datové atributy jsou součástí specifikace HTML5 a jsou správně zpracovány (tj. ignorovány) ve všech prohlížečích, které podporují HTML5 doctype. Naštěstí je takových už většina. Zároveň tento zápis pomáhá zpětné kompatibilitě tím, že zůstanou nezměněné i v budoucnu, že např. nevzniknou kolize s nově přidanými atributy.

Teď máme tedy představu o tom, co datové atributy jsou. Pojďme se podívat na to, jak je můžeme použít:

• K uložení úvodních rozměrů nebo průhlednosti prvku, které později použijeme v javaScriptu k animaci
• K uložení parametrů pro Flash, který bude později načten JavaScriptem
• K uložení uživatelských značek k analýze (viz ukázka od Jasona Karnse)
• K uložení informací o zdraví, munici či životech v JS hrách
• K vytvoření přístupných titulků pro element <video> (viz demonstrace od Bruce Lawsona)

K čemu bychom datové atributy neměli používat?

Datové atributy jsou sice flexibilní, ale nejsou vhodné pro každý problém.

• Datový atribut by neměl být použit, pokud existuje ve specifikaci atribut nebo element, který odpovídá přesněji účelu či smyslu uložených dat. Například datum by mělo být uloženo v odpovídajícím elementu, ne v datovém atributu.
• Uživatelské datové atributy nejsou náhradou či konkurencí mikroformátů či mikrodat. Ve specifikaci je jasně řečeno, že nejsou určeny pro veřejné použití a externí software by je neměl nijak využívat. Vyznačit pomocí datových atributů např. kontaktní údaje nebo informace o události není vhodné – samosebou s výjimkou situace, kdy tyto informace mají být použity pouze ve skriptech na téže stránce.
• Přítomnost či nepřítomnost nějakého datového atributu by neměla být využívána jako rozlišující vlastnost v CSS selektoru. Pokud se do takové situace dostanete, znamená to, že tato data jsou nějak důležitá pro prezentaci, a měly by tedy být prezentovány jiným, sémantičtějším a přístupnějším způsobem.

Použití atributů data- s JavaScriptem

Víme jak uživatelské datové atributy data- vypadají a kde by měly či naopak neměly být použity. Podíváme se tedy na způsob, jakým mohou být použity s JavaScriptem.

Pokud chceme zjistit nebo změnit hodnotu atributů pomocí JavaScriptu, můžeme použít metody getAttribute a setAttribute, viz příklad:

<div id='strawberry-plant' data-fruit='12'></div>
<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Tato metoda bude fungovat ve všech moderních prohlížečích, ale není to způsob, jaký je pro atributy data- zamýšlený. Druhý, nový a vylepšený, způsob přistupování k atributům využívá přístup k vlastnosti dataset u daného elementu. Vlastnost dataset  – která je součástí nově definovaného JS API v HTML5 – vrátí objekt DOMStringMap, obsahující všechny atributy  data- u daného elementu. Když použijeme tento přístup místo plného jména atributu, můžete prostě odtrhnout prefix data- a odkazovat se přímo jménem, které atribut má. Atributy, které obsahují spojovník (-), budou převedeny do podoby bez spojovníků, zapsané v CamelCase.

<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>
<script>
// 'Getting' data-attributes using dataset
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;
// 'Setting' data-attributes using dataset
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m';  // Cracking fertiliser
</script>

Když se v nějakém místě vašeho skriptu stane určitý atribut data- nadbytečným a nebudete jej už v budoucnu potřebovat, můžete jeho hodnotu nastavit na null a tím jej odstranit z DOMu.

plant.dataset.leaves = null; // Caterpillars attack!

Naneštěstí je vlastnost dataset implementována zatím jen v některých prohlížečích (dle mých testů v Chrome ano, ve FF3.6 ne – pozn. překl.), takže zatím je potřeba si vystačit s přístupem pomocí getAttribute a setAttribute, jak jsme si ukázali výše.

Při vývoji aplikace můžete zjistit, že by se vám hodilo mít možnost vybrat elementy podle přítomnosti (či konkrétní hodnoty) uživatelského data- atributu. Využijte k tomu metodu  querySelectorAll, jak je ukázáno v následujícím kó­du:

// Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');
// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');

Varování

Pokud se datové atributy stanou šířeji používanými, zvýší se i riziko konfliktů. pokud budete používat neinvenční jména jako data-height, pak je velmi velká pravděpodobnost, že se dostanete do konfliktu s nějakou knihovnou, navrženou podobně líným programátorem. Proto je rozumné jména atributů ozdobit, tj. přidat jim specifickou součást jména, například označení knihovny či jméno stránky. Příklad: data-html5doctor-height nebo  data-my-plugin-height.

Shrnutí

Uživatelské datové atributy jsou výbornou možností, jak zjednodušit ukládání některých aplikačních dat ve webových stránkách. K přístupu použijte getAttribute a setAttribute, nebo tam, kde to je možné, vlastnost  dataset.

Dodatek

Pokud si chcete vyzkoušet novou vlastnost dataset i v prohlížečích, kde zatím není implementována, nemusíte být smutní, protože tu je řešení. Možná vás zaujme ukázkový kód, který simuluje chování vlastnosti dataset v některých prohlížečích pomocí úpravy  Element.prototype.

Kód podporuje přístup k atributům data- ve Firefoxu, Safari, Opeře i Chrome, ale bohužel ne v IE, protože IE neumožňuje přístup k objektu Element (netestoval jsem s poslední verzí IE – pozn.překl.). Tento kód umožňuje i nastavit datový atribut, ale nově uložené hodnoty jsou drženy v JavaScriptu a nemění hodnoty v DOMu tak, jak to dělá implementace dataset. Ačkoli jde spíš o ukázku konceptu, může být užitečný při vývoji v intranetu či u mobilních aplikací, tedy v prostředích, kde není požadována kompatibilita s IE.