{"id":25631,"date":"2016-02-18T21:01:34","date_gmt":"2016-02-18T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25631"},"modified":"2022-07-15T16:58:43","modified_gmt":"2022-07-15T08:58:43","slug":"better-ux-html-data-attributes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/","title":{"rendered":"How to Build Better UX with HTML5 Data-* Attributes"},"content":{"rendered":"

Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market, storing custom data associated with the DOM<\/a> was a real fuss, and developers had to use all kinds of nasty hacks, such as introducing non-standard attributes or using the obsolete setUserData()<\/a> method to work around the problem.<\/p>\n

Luckily you don\u2019t have to do so any more, as HTML5 has introduced new global data-*<\/code> attributes<\/a> that make it possible to embed extra information on any HTML elements. The new data-*<\/code> attributes make HTML more extensible<\/strong>, therefore enable you to build more complex apps<\/strong>, and create a more sophisticated user experience without having to use resource-intensive techniques such as Ajax-calls, or server-side database queries.<\/p>\n

Read more: <\/strong>Mobile App Design\/Dev \u2013 Beginner\u2019s Guide to jQuery Mobile<\/a><\/p>\n

Browser support<\/a> of the new global attributes is relatively good, as they\u2019re supported by all modern browsers (IE8-10 partially supports them).<\/p>\n

\"Data<\/figure>\n

Syntax of the data-*<\/code> Attributes<\/h2>\n

The syntax of the new data-*<\/code> attributes is similar to that of the aria-prefixed attributes<\/a>. You can insert any lowercase string in place of the *<\/code> sign. You also need to assign a value to each attribute in the form of a string.<\/p>\n

Let\u2019s say you want to create an About Us<\/em> page, and store the name of the department where each employee works. You don\u2019t have to do anything else apart from adding the data-department<\/code> custom attribute to the appropriate HTML element in the following way:<\/p>\n

\r\n<ul>\r\n\t<li data-department=\"Marketing\">\r\n\t\tJohn Doe\r\n\t<\/li>\r\n\t<li data-department=\"IT\">\r\n\t\tJane Doe\r\n\t<\/li>\r\n<\/ul><\/pre>\n
Custom data-*<\/code> attributes are global<\/a>, just like the class<\/code> and id<\/code> attributes, so you can use them on every HTML element. You can also add as many data-*<\/code> attributes to an HTML tag as you want. In the example above, for instance you can introduce a new custom attribute called data-user<\/code> to store employee usernames.<\/p>\n
\r\n<ul>\r\n\t<li id=\"john\" class=\"employee\" data-department=\"Marketing\" \r\n\tdata-user=\"johndoe\">\r\n\t\tJohn Doe\r\n\t<\/li>\r\n\t<li id=\"jane\" class=\"employee\" data-department=\"IT\" \r\n\tdata-user=\"janedoe\">\r\n\t\tJane Doe\r\n\t<\/li>\r\n<\/ul><\/pre>\n
As a general rule, if you want to add your own custom attribute to an HTML element, you always have to prefix it with the data-<\/code> string. Likewise, when you see a data-prefixed attribute in someone else\u2019s code, you can know for sure that it\u2019s a custom attribute introduced by the author.<\/p>\n
When to Use and When Not to Use Custom Attributes<\/h2>\n
W3C defines<\/a> custom data-*<\/code> attributes like so:<\/p>\n
\u201cCustom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.\u201d<\/em><\/p>\n
It\u2019s worth to consider using data-*<\/code> attributes when you can\u2019t find any other semantic attributes for the data you want to store<\/strong>.<\/p>\n
It\u2019s not the best idea to use them solely for styling purposes, as for that you can choose from the class<\/code> and the style<\/code> attributes. If you want to store a data type for which HTML5 has a semantic attribute, such as the datetime<\/code><\/a> attribute for the <time><\/code><\/a> element, use that instead of the data-prefixed attribute.<\/p>\n
It\u2019s important to note that data-*<\/code> attributes hold data that\u2019s private to the page or the application<\/strong>, which means that they will be ignored by user agents<\/a>, such as search engine bots and external applications. Data-prefixed attributes can solely be accessed by the code running on the site that hosts the HTML.<\/p>\n
Custom data-*<\/code> attributes are extensively used by frontend frameworks, such as Bootstrap<\/a> and Zurb Foundation<\/a>, as well. The good news is that you don\u2019t necessarily need to know how to write JavaScript if you want to use data-prefixed attributes as a part of a framework, as you only need to add them to the HTML code to trigger a functionality of a prewritten JavaScript plugin.<\/p>\n
The code snippet below adds a tooltip on the left<\/a> to a button in Bootstrap by making use of the data-toggle<\/code> and the data-placement<\/code> custom attributes, and assigning appropriate values to them.<\/p>\n
\r\n<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" \r\ndata-placement=\"left\" title=\"Tooltip on left\">\r\n\tTooltip on left\r\n<\/button><\/pre>\n
Target data-*<\/code> Attributes with CSS<\/h2>\n
Although it\u2019s not recommended to use data-*<\/code> attributes only for styling purposes, you can select the HTML elements they belong to with the help of general attribute selectors<\/a>. If you want to select each element that has a certain data-prefixed attribute, use this syntax in your CSS:<\/p>\n
\r\nli[data-user] {\r\n\tcolor: blue;\r\n}<\/pre>\n
Note that it\u2019s not the usernames that will be displayed in blue in the code snippet above  \u2013 after all the data stored in the custom attributes is not visible \u2013 but the names of employees contained in the <li><\/code> elements (in the example \u201cJohn Doe\u201d and \u201cJane Doe\u201d).<\/p>\n
If you only want to select elements in which a data-prefixed attribute takes a certain value, this is the syntax to use:<\/p>\n
\r\nli[data-department=\"IT\"] {\r\n\tborder: solid blue 1px;\r\n}<\/pre>\n
You can use all the more complicated CSS attribute selectors<\/a>, such as the general sibling combinator selector ([data-value~=\"foo\"]<\/code>) or the wildcard selector ([data-value*=\"foo\"]<\/code>), with data-prefixed attributes as well.<\/p>\n
Access data-*<\/code> Attributes with JavaScript<\/h2>\n
You can access the data stored in the custom data-*<\/code> attributes with JavaScript by using either the dataset<\/a> property, or jQuery\u2019s data()<\/code><\/a> method.<\/p>\n
Vanilla JavaScript<\/strong><\/p>\n
The dataset<\/code><\/a> property is the property of the HTMLElement<\/code><\/a> interface, that means you can use it on any HTML tag. The dataset<\/code> property gives access to all custom data-*<\/code> attributes of the given HTML element. The attributes are returned as a DOMStringMap<\/code><\/a> object that contains one entry for each data-*<\/code> attribute.<\/p>\n
In our About Us<\/em> page example you can easily check the custom attributes \u201cJane Doe\u201d has by using the dataset<\/code> property in the following way:<\/p>\n
\r\nvar jane = document.getElementById(\"jane\"); \r\nconsole.log(jane.dataset);\r\n\/\/ DOMStringMap { user: \"janedoe\", department: \"IT\" }\r\n<\/pre>\n
You can see that in the returned DOMStringMap<\/code> object the data-<\/code> prefixes are removed from the names of the attributes (user<\/code> instead of data-user<\/code>, and department<\/code> instead of data-department<\/code>). You need to use the attributes in the same format if you only want to access the value of a certain data-prefixed attribute (instead of the list of all custom attributes like in the code snippet above).<\/p>\n
You can retrieve the value of a specific data-*<\/code> attribute as a property of the dataset<\/code> property. As I mentioned before, you need to omit the data-<\/code> prefix from the name of the property, so if you want to access the value of Jane\u2019s data-user<\/code> attribute, you can do it this way:<\/p>\n
\r\nvar jane = document.getElementById(\"jane\"); \r\nconsole.log(jane.dataset.user)\r\n\/\/ janedoe<\/pre>\n
jQuery\u2019s data()<\/code> method<\/strong><\/p>\n
The data()<\/code><\/a> jQuery method makes it possible to get the value of a data-prefixed attribute. Here you also have to omit the data-<\/code> prefix from the name of the attribute to access it properly. In our example, you can display an alert message with the name of the department where \u201cJane\u201d works with the following code:<\/p>\n
\r\n$(\"#jane\").hover( function() {\r\n\tvar department = $(\"#jane\").data(\"department\");\r\n\talert(department);\r\n});<\/pre>\n
The data()<\/code> method needs to be used carefully, as it doesn\u2019t only act as a means to get the value of a data-prefixed attribute, but also to attach data to a DOM element in the following way:<\/p>\n
\r\nvar town = $(\"#jane\").data(\"town\", \"New York\");\r\n<\/pre>\n
The extra data you attach with jQuery\u2019s data()<\/code> method obviously won\u2019t appear in the HTML code as a new data-*<\/code> attribute, so if both techniques are used at the same time, the given HTML element will store two sets of data, one with HTML and the other with jQuery.<\/p>\n
In our example \u201cJane\u201d got a new custom data (\"town\"<\/code>) with jQuery, but this new key-value pair won\u2019t appear in HTML as a new data-town<\/code> attribute. Storing data in two different ways is not the best practice to say the least, so only use one of the two methods at once<\/strong>.<\/p>\n
Accessibility and data-*<\/code> Attributes<\/h2>\n
As the data held in custom data-*<\/code> attributes is private, assistive technologies may not be able to access it. If you want to keep your content accessible<\/a> for disabled users, it\u2019s not recommended to store content that can be important for users this way.<\/p>","protected":false},"excerpt":{"rendered":"
Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market, storing custom data associated with the DOM was a real fuss, and developers had to use all kinds of nasty hacks, such as introducing non-standard attributes or using…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Build Better UX with HTML5 Data-* Attributes - Hongkiat<\/title>\n<meta name=\"description\" content=\"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Better UX with HTML5 Data-* Attributes\" \/>\n<meta property=\"og:description\" content=\"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-18T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T08:58:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"How to Build Better UX with HTML5 Data-* Attributes\",\"datePublished\":\"2016-02-18T13:01:34+00:00\",\"dateModified\":\"2022-07-15T08:58:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/\"},\"wordCount\":1226,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/better-ux-html-data-attributes\\\/binary-data.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/\",\"name\":\"How to Build Better UX with HTML5 Data-* Attributes - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/better-ux-html-data-attributes\\\/binary-data.jpg\",\"datePublished\":\"2016-02-18T13:01:34+00:00\",\"dateModified\":\"2022-07-15T08:58:43+00:00\",\"description\":\"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/better-ux-html-data-attributes\\\/binary-data.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/better-ux-html-data-attributes\\\/binary-data.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/better-ux-html-data-attributes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build Better UX with HTML5 Data-* Attributes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build Better UX with HTML5 Data-* Attributes - Hongkiat","description":"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Better UX with HTML5 Data-* Attributes","og_description":"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,","og_url":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-02-18T13:01:34+00:00","article_modified_time":"2022-07-15T08:58:43+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"How to Build Better UX with HTML5 Data-* Attributes","datePublished":"2016-02-18T13:01:34+00:00","dateModified":"2022-07-15T08:58:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/"},"wordCount":1226,"commentCount":10,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg","keywords":["HTML"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/","url":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/","name":"How to Build Better UX with HTML5 Data-* Attributes - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg","datePublished":"2016-02-18T13:01:34+00:00","dateModified":"2022-07-15T08:58:43+00:00","description":"Have you ever wanted to add custom data to a particular HTML element in order to later access it with JavaScript? Before HTML5 appeared on the market,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/better-ux-html-data-attributes\/binary-data.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/better-ux-html-data-attributes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build Better UX with HTML5 Data-* Attributes"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Fp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25631"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25631\/revisions"}],"predecessor-version":[{"id":60445,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25631\/revisions\/60445"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25631"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}