Slide 6 - data-* Attributes of HTML5 § Session 15

data-* Attributes of HTML5

How to Use data attributes | MDN
Global attributes data-* | MDN
Custom non-visible data with data-* attribute | HTML 5 Living Standard

data-* attributes in used jQuery Tablesorter

<body>
  <h1>United States Senate</h1>
  <table id="senatetable" class="tablesorter">
     <thead>
        <tr>
           <th>Name</th>
           <th>State</th>
           <th>Party</th>
           <th data-date-format="mmddyy">Birthday</th>
           <th>Gender</th>
        </tr>
     </thead>...

data-* attributes used in Lightbox 2

Lightbox 2 site
Solar System Example in Lightbox 2

<ul class="gallery">
    <li><a data-lightbox="solarsystem" data-title="Sol" data-alt=""
            href="solarsystem/001-sol.jpg">
            <img
                src="solarsystem/thumbnail/001-sol.jpg" alt="Sol" />
            </a>
        <br />Sol
    </li>
    <li><a data-lightbox="solarsystem" data-title="Mercury" data-alt=""
            href="solarsystem/002-mercury.jpg">
            <img
                src="solarsystem/thumbnail/002-mercury.jpg" alt="Mercury" />
            </a>
        <br />Mercury
    </li>
    ...