Can Data-* Attribute Contain HTML Tags

What is the purpose of storing custom data on HTML data attributes?

One use case I currently used was I created a component in react and used pseudo elements to take data from data attribute ie. data-title value will be taken by CSS in content: attr(data-title) so what ever value I am passing to component shows directly via css and also there are so many use cases for eg you need some value to be instead of passing whole object on click function you just add click event and it will take values from data attributes instead.

These two use cases I can think of rite now.

----------- UPDATE ---------------

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, hacks can make your HTML invalid in many cases or create unknown bugs. Common attributes that we use are class, id etc and for custom attributes you can use data-*. The main motivation behind introduction of data attribute is to allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. So when you ask what's better approach you, all you can think about is there are multiple ways to achieve same thing and it's subjective to developer to take approch.

what are data-* HTML attributes?

data-* attributes are custom HTML attributes.

Basically, there are standard HTML attributes like style, src, width, height, class... and these have a special meaning to browsers and are 'reserved'.

However, custom attributes have no special meaning generally and are only special to the owner's application. They can be used to simplify an application's logic.

Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.

See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.

Also, see MDN docs for some useful information.

Is it ok to add data- attribute to the style tag in head?

Yes, data-* attributes are legal on all HTML elements. From the spec:

Every HTML element may have any number of custom data attributes specified, with any value.

As @Alohci notes, there are elements in HTML documents that aren’t HTML elements, though: SVG and MathML elements.

How to Add html element in data attribute

One solution that works is using jQuerys constructor to create the elements and then using those elements to set the data- attributes to store it. This example works and seems to do what you want.

var img_src = "userpic.png"; //this value comes from dbvar element = {  student: {    photo: "myImage.com"  }}; // for this example only
var $po_img;if (img_src == "" || img_src == null) {  $po_img = $('<div>', { class: "class-groupPic bg-1"});  $po_img.text("X");} else {  $po_img = $('<img/>', {src: element.student.photo, width: 34, height: 34});}
var $myDiv = $('<div/>', { id: "myDiv", class: "col"});$myDiv.text("I am the div");$myDiv.attr("data-img", $po_img[0].outerHTML);$myDiv.attr("data-religion", "Hindu");$myDiv.attr("data-category", "OBC");
// add the div to the DOMdocument.write($myDiv[0].outerHTML);
// Retrieve the img HTML from the div's data attributevar theImage = $("#myDiv").attr("data-img");console.log(theImage);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why should I use data- in my attributes or dashes in my tags?

The data-* attributes have two advantages:

It is a convention meaning other programmers will understand quickly that it is a custom attribute.
You get a DOM Javascript API for free: HTMLElement.dataset. If you use jQuery, it leverages this to populates the keys and values you find with .data().

The reason for the - in custom element names is for two basic reasons:

It is a quick way for the HTML parser to know it is a custom element instead of a standard element.
You don't run into the issue of a new standard element being added with the same name which would cause conflict if you register a custom Javascript prototype for the DOM element.

Should you use your own custom element name? Right now it is so new that don't expect it to be fully supported. Let's say it does work. You have to balance the issue of the extra complexity with the benefit. If you can get away with a classname, then use a classname. But if you need a whole new element with a custom Javascript DOM prototype for the element, then you may have a valid usage of it.

Should I not use data attributes in html?

The common way to identify and select HTML tags is with either class or id.

If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="customwebpagelayout slider-increments" >
    <div class="customwebpageobject slider-increments"></div>
</div>

<p class="customwebpageobject slider-increments">1</p>

</body>
</html>

Then you could select the nodes with javascript like so:

document.getElementsByClassName("slider-increments");

or if you decide to use jQuery:

$(".slider-increments");

Data attributes are more of a pain to work with:

Raw Javascript (code adapted from code in this answer):

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
  if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
    // Element exists with attribute. Add to array.
    matchingElements.push(allElements[i]);
  }
}
//use matchingElements;

jQuery:

$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");