HTML5 Custom Data Attributes

1. HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-.
2. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash.
3. Each of the key/value pairs in the Hash will be transformed into a custom data attribute.
4. For example:

   %a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author
   

   will render as:

   <a data-author-id='123' href='/posts'>Posts By Author</a>
   

5. Notice that the underscore in author_id was replaced by a hyphen.
6. If you wish to suppress this behavior, you can set Haml’s :hyphenate_data_attrs option to false, and the output will be rendered as:

   <a data-author_id='123' href='/posts'>Posts By Author</a>