Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the advantages of using data- rather than x- prefix for custom attributes?

Tags:

html

angularjs

AngularJS documentation says Optionally the directive can be prefixed with x-, or data- to make it HTML validator compliant..

Example markup:

  1. no prefix: <input ng-model="name">
  2. data- : <input data-ng-model="name">
  3. x- : <input x-ng-model="name">

The x- prefix is faster to type than data-, but the tutorials I have seen used either no prefix or data-, so my question is: are there any reasons I might want to use data- rather than x-?

like image 863
user44 Avatar asked Jun 17 '13 19:06

user44


People also ask

What is the use of custom data attributes?

data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

What is data attribute?

Attribute data is data that have a quality characteristic (or attribute) that meets or does not meet product specification. These characteristics can be categorized and counted.

Can we use custom attributes?

Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our own information to HTML tags. These are not specific and can be used with all the HTML elements.

How do you get data attribute value in react JS?

In that case, you can use the getAttribute() method. The getAttribute() method will return the string value of the specified attribute. Alternatively, you can also access attributes using the getNamedItem() method.


1 Answers

The advantage of using a data- prefix rather than an x- prefix is that data- prefixes are guaranteed to remain available to authors as they like, whereas an x- prefix might one day be used for a browser-specific purpose, possibly conflicting with yours. Note that x- are not conforming according to HTML5.

like image 119
Jukka K. Korpela Avatar answered Oct 23 '22 10:10

Jukka K. Korpela