diff --git a/data-attribute/index.html b/data-attribute/index.html
new file mode 100644
index 0000000..8b6d869
--- /dev/null
+++ b/data-attribute/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<li>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>HTML Tips and Tricks - Data Attribute</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
+
+    <script>
+        function reveal() {
+            let dataDiv = document.getElementById('data-attr');
+            let value = dataDiv.getAttribute('data-custom-attr'); 
+            document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
+        }
+
+    </script>
+</head>
+
+<body>
+    <div class="demo">
+        <h2> Know data attribute </h2>
+        <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> I have a hidden secret! </div>
+        <button onclick="reveal()">Reveal</button>
+
+        <br/>
+        
+        <p id="msg"></p>
+    </div>
+</body>
\ No newline at end of file
diff --git a/index.html b/index.html
index f191436..386e384 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,10 @@
                 <a href='./mark/index.html'>
                     Mark Content</a> - Highlight things
             </li>
+            <li>
+                <a href='./data-attribute/index.html'>
+                    Custom Data</a> - Data with elements
+            </li>
         </ul>
     </div>
 </body>
diff --git a/main.css b/main.css
index 5c7b8d2..a455c09 100644
--- a/main.css
+++ b/main.css
@@ -41,3 +41,7 @@ li {
     border-radius: 5px;
     padding: 10px;
 }
+
+.demo .data-attribute {
+  padding: 10px;
+}
