Custom HTML attributes

Asked

Viewed 507 times

7

I am developing a system aimed at managing public tenders and I need it to be compatible with as many devices as possible.

In some situations it was necessary to use custom attributes, example:

<span qtd='20'>Alguma coisa...</span>

In this case, I take the value of Qtd through the Jquery.attr() and use as necessary, works well in the most modern browsers, but the question is:
Is it good practice? What problems can I have in older browsers?

javascript jquery html5

  • Related: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-Attributes

  • 3

    In fact, this can cause problems in newer browsers, which do not yet exist. That is, if in the future there is a new HTML attribute with the same name you used, it will be a problem. That’s why they created the prefix data- in HTML5.

  • Well noted @bfavaretto, exactly

  • Thanks @bfavaretto, I’ve always seen this prefix but I had no idea that was the reason why.

1 answer

11


It’s not good practice.

To combat this HTML5 has brought us a means to achieve what you want (custom attributes) are called data-*, where you can do data-blahblah and save yourself any trouble that might arise, in which case you could do :

<span data-qtd='20'>Alguma coisa...</span>

And to get the attribute with jQuery is just:

$('span').data('qtd'); // 20

However, there are some things to keep in mind, like this:

If you do data-minha-qtd DOM converts this to:

myQtd

And you could access it like this:

$('span').data('minhaQtd');

A note from someone who knows more than me

That points to this

Regarding compatibility of attributes data and the older browsers, I suppose there’s no problem, even in IE6, tests that were not performed by me but I believe this colleague from SO EN.

  • Thank you @Miguel, explained a lot to me. Hug

  • You’re welcome @edsonalves

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.