Custom Attributes naming in HTML 5

Now we can embed the custom data attributes on all HTML elements. These new custom data attributes consist of Attribute Name and Attribute Value.
And we have to name the custom attribute prefix with data-* (here * means we have to add some text or character).

For example we created some functionality to display Tool-tip using Jquery or JavaScript. The Tool tip text comes from tooltip custom attribute (html5 extra attributes).

before we used like this
<div tooltip=”This for Tool – tip text”>Tool tip div</div>

But now we have to use like this

<div data-tooltip=”This for Tool – tip text”>Tool tip div</div>

One more example :-

<ul>

<li><a href=”home” data-menutitle=”my site home page” data-highlighted=”true”>Home</a></li>

<li><a href=”blog” data-menutitle=”my site blog page” data-highlighted=”false”>Blog</a></li>

<li><a href=”media” data-menutitle=”my site media page”>Media</a></li>

</ul>

Remembering again, Use data- as prefix name for you custom attribute name.

Note:- Custom attributes name must be in small letters*

Thanks,

Naga Harish.

  • Renate Woldt

    Great article. I was seeking this certain info for a long time.