diff --git a/audio-video/index.html b/audio-video/index.html
new file mode 100644
index 0000000..63153ef
--- /dev/null
+++ b/audio-video/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>HTML Tips and Tricks - Datalist Tag</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
+</head>
+
+<body>
+  <div class="demo">
+    <a href="../index.html" class="home">
+      <img src="../home.svg" alt="home" />
+    </a>
+    <h1>Audio Tag</h1>
+    <audio controls>
+      <source src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mp3" />
+      Your browser does not support the audio element.
+    </audio>
+    <h1>Video Tag</h1>
+    <video width="300" height="200" controls>
+      <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4" />
+      Your browser does not support the video element.
+    </video>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 953d56c..0fc2f54 100644
--- a/index.html
+++ b/index.html
@@ -87,6 +87,10 @@
                 <a href='./dialog/index.html'>
                     Dialog</a> - Display a Modal Dialog
             </li>
+            <li>
+                <a href='./audio-video/index.html'>
+                    Audio and Video Tag</a> - Add audio and video to web pages
+            </li>
             <li>
                 <a href='./lazy-loading/index.html'>
                     Lazy Loading</a> - Lazy Load html images natively
@@ -98,5 +102,4 @@
         </ul>
     </div>
 </body>
-
-</html>
\ No newline at end of file
+</html>
