لغة HTML

HTML (HyperText Markup Language) هي لغة ترميز تصف بنية محتوى صفحة الويب ومعناه، بينما تتولى CSS المظهر وJavaScript السلوك.

البنية الأساسية

<!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 للتنقل. البنية الدلالية تحسن الوصولية ومحركات البحث وتسهّل الصيانة.

النماذج

<label for="email">البريد الإلكتروني</label>
<input id="email" name="email" type="email" required autocomplete="email">

اربط كل حقل بوسم label، واستخدم نوع الحقل المناسب (email، number، date) ليحصل المستخدم على لوحة المفاتيح الصحيحة والتحقق المدمج.

أخطاء شائعة

• استخدام div قابل للنقر بدل button (لا يعمل بلوحة المفاتيح افتراضياً).
• صور بلا نص بديل alt؛ اجعله فارغاً alt="" للصور الزخرفية فقط.
• تخطي مستويات العناوين لأسباب شكلية.