سجل التعديلات

الفرق مقارنةً بالنسخة السابقة

+ **HTML** (HyperText Markup Language) هي لغة ترميز تصف **بنية** محتوى صفحة الويب ومعناه، بينما تتولى CSS المظهر وJavaScript السلوك.
  
+ ## البنية الأساسية
+ 
+ ```html
+ <!doctype html>
+ <html lang="ar" dir="rtl">
+   <head>
+     <meta charset="utf-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
+     <title>عنوان الصفحة</title>
+   </head>
+   <body>
+     <main>
+       <h1>مرحباً</h1>
+       <p>فقرة نصية مع <a href="/wiki/css">رابط</a>.</p>
+     </main>
+   </body>
+ </html>
+ ```
+ 
+ - `<!doctype html>` يجعل المتصفح يعمل بالوضع القياسي.
+ - `lang` و`dir` ضروريان للغة العربية: يحددان اللغة لقارئات الشاشة واتجاه النص من اليمين لليسار.
+ - وسم `viewport` شرط لعمل التصميم المتجاوب على الجوال.
+ 
+ ## العناصر الدلالية
+ 
+ استخدم العنصر الذي يصف **معنى** المحتوى: `header` و`nav` و`main` و`article` و`section` و`aside` و`footer`، والعناوين `h1`…`h6` بترتيب منطقي، و`button` للأفعال و`a` للتنقل. البنية الدلالية تحسن الوصولية ومحركات البحث وتسهّل الصيانة.
+ 
+ ## النماذج
+ 
+ ```html
+ <label for="email">البريد الإلكتروني</label>
+ <input id="email" name="email" type="email" required autocomplete="email">
+ ```
+ 
+ اربط كل حقل بوسم `label`، واستخدم نوع الحقل المناسب (`email`، `number`، `date`) ليحصل المستخدم على لوحة المفاتيح الصحيحة والتحقق المدمج.
+ 
+ ## أخطاء شائعة
+ 
+ - استخدام `div` قابل للنقر بدل `button` (لا يعمل بلوحة المفاتيح افتراضياً).
+ - صور بلا نص بديل `alt`؛ اجعله فارغاً `alt=""` للصور الزخرفية فقط.
+ - تخطي مستويات العناوين لأسباب شكلية.