From e0ca7fbc13ad4fd58fee520d9bc1bb78ad3af642 Mon Sep 17 00:00:00 2001
From: Kelvin Yeboah <onlykelvin06@gmail.com>
Date: Sat, 4 Jan 2025 22:36:48 +0000
Subject: [PATCH] Improvement made in Optimization

Header and Footer Elements: Added <header> and <footer> elements for better semantic structure. This makes the page more readable and accessible.
Main Element: Wrapped the main content (#joke and button) inside a <main> tag, which is more semantic and helps with SEO and accessibility.
Updated Meta Tags: Still kept the meta tags for better SEO (description, author).
Accessible Button: The button has an aria-label to improve accessibility for screen readers.
Content Enhancement: Added a small description in the <footer> to encourage interaction.
---
 dad-jokes/index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)
diff --git a/dad-jokes/index.html b/dad-jokes/index.html
index 555bcdc..4f115e9 100644
--- a/dad-jokes/index.html
+++ b/dad-jokes/index.html
@@ -3,15 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Get a random dad joke every time you click the button! Can you not laugh?" />
+    <meta name="author" content="Your Name or Username" />
+    <title>Don't Laugh Challenge - Dad Jokes</title>
     <link rel="stylesheet" href="style.css" />
-    <title>Dad Jokes</title>
   </head>
+
   <body>
     <div class="container">
-      <h3>Don't Laugh Challenge</h3>
-      <div id="joke" class="joke">// Joke goes here</div>
-      <button id="jokeBtn" class="btn">Get Another Joke</button>
+      <header>
+        <h1>Don't Laugh Challenge</h1>
+        <p>Can you keep a straight face? Click below for your next joke!</p>
+      </header>
+      <main>
+        <div id="joke" class="joke">Loading joke...</div>
+        <button id="jokeBtn" class="btn" aria-label="Get another dad joke">Get Another Joke</button>
+      </main>
+      <footer>
+        <p>Challenge your friends to see who can keep a straight face the longest!</p>
+      </footer>
     </div>
+
     <script src="script.js"></script>
   </body>
 </html>
