add 'content-language'

Author: costinEEST

index.html

@@ -6,12 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description"
         content="Learn the Greek alphabet with interactive flashcards and pronunciation. Works offline as a Progressive Web App.">
+    <meta name="keywords" content="Greek alphabet, flashcards, Greek letters, pronunciation, learning, education, PWA">
+    <meta name="language" content="en-US">
+    <meta name="content-language" content="en-US, el-GR">
     <meta name="theme-color" content="#667eea">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="apple-mobile-web-app-title" content="Greek Cards">
+    <meta name="apple-mobile-web-app-title" content="Greek cards">
 
-    <title>Greek Alphabet Flashcards</title>
+    <title>Greek alphabet flashcards</title>
 
     <!-- PWA Manifest will be auto-generated by Vite PWA plugin -->
 
@@ -53,7 +56,7 @@ <h1>Greek Alphabet Flashcards</h1>
                 <div class="flashcard" id="flashcard" tabindex="0" role="button"
                     aria-label="Flashcard showing Greek letter. Press space to flip" aria-live="polite">
                     <div class="flashcard-front" id="flashcardFront">
-                        <div class="letter-display">
+                        <div class="letter-display" lang="el-GR">
                             <div class="letter-uppercase" id="letterUppercase" aria-label="Uppercase Greek letter">Α
                             </div>
                             <div class="letter-lowercase" id="letterLowercase" aria-label="Lowercase Greek letter">α
@@ -129,7 +132,7 @@ <h3 id="pronunciation-heading">Greek Alphabet Pronunciation Guide</h3>
             <p class="pronunciation-hint">Click any letter to hear its Greek pronunciation</p>
             <div class="alphabet-table">
                 <div class="alphabet-grid" id="alphabetGrid" role="grid"
-                    aria-label="Interactive Greek alphabet grid for pronunciation">
+                    aria-label="Interactive Greek alphabet grid for pronunciation" lang="el-GR">
                     <!-- Letters will be populated by JavaScript -->
                 </div>
             </div>
@@ -139,7 +142,7 @@ <h3 id="pronunciation-heading">Greek Alphabet Pronunciation Guide</h3>
             <div class="instructions">
                 <h3>How to use:</h3>
                 <ul>
-                    <li><strong>Click</strong> the card or press <strong>Spacebar</strong> to flip</li>
+                    <li><strong>Click</strong> the card or press <strong>SpaceBar</strong> to flip</li>
                     <li>Use <strong>Arrow Keys</strong> or buttons to navigate</li>
                     <li><strong>Shuffle</strong> for random practice</li>
                     <li><strong>Reset</strong> to return to alphabetical order</li>