Can you define your own HTML element attributes?

Question

I was wondering if you can define your own attributes in HTML. For example in HTML divs there's a range of attributes, such as style, title, class etc. Can you make up and add your own, while remaining syntactically correct?

For example: <div class="example" test_item="20"></div>

The need for this is with regards to Javascript and data.

Answer 1

With one exception — no. HTML uses the attributes and elements defined by the specification, and only those attributes and elements.

That exception is attributes with names starting data-, and then only if you are following the HTML 5 draft.

That said, it is often appropriate to encode the data in the id or class attribute.

Answer 2

You can define the data attribute for any element as follows, and use jQuery data method to retrieve those attributes easily.

<div class="example" data-mydata="mydata")></div>

//In jquery to retrieve mydata you have to just say
$(".example").data("mydata");