What Is The "generated" Attribute Seen In Some Html Tag Used For?

I saw it used in a HTML label tag but I have a feeling that it can be used with most HTML tags. I can kinda guess what it means. But I am more curious about what's the benefit of u

Solution 1:

You could use it as a hook for JavaScript and/or CSS.

For example...

CSS

label[generated=true] {
   color: #ccc;
}

JavaScript

var labels = document.getElementsByTagName('label');

for (var i = 0, length = labels.length; i < length; i++) {
    if (labels[i].getAttribute('generated') === 'true') {
       // Do something.
    }
}

It is often used on JavaScript generated elements, such as the label elements created by the jQuery Validation plugin.

You could use jQuery to clean up generated elements with...

$('*[generated=true]').remove();

Solution 2:

This is a custom data or user-defined attribute. In your case it has been added to denote an element that was generated on the page after it loaded, probably by JavaScript.

It's common to see other such attributes in heavy UI/UX web applications. They typically serve as hooks between technologies - CSS, JavaScript, HTML, etc.

Note that such attributes do not validate. If you are using HTML5, you can prefix them with data- to get around this issue (i.e. data-generated="true"). Read more about custom data attributes in HTML5.