ما هي السمات؟
السمة (Attribute) هي معلومة إضافية نضعها داخل وسم العنصر لتعديل سلوكه أو إعطائه بيانات. تُكتب دائمًا في وسم البداية.
<a href="https://thecodefix.net">رابط</a>
<img src="photo.jpg" alt="وصف الصورة" />
هنا href وsrc وalt كلها سمات. كل سمة لها اسم وقيمة بالصيغة:
<element name="value">
🔑 ضع قيمة السمة دائمًا بين علامتي اقتباس
"...". هذا يمنع الأخطاء خصوصًا عند احتواء القيمة على مسافات.
أشهر السمات استخدامًا
<a href="page.html"> <!-- وجهة الرابط -->
<img src="img.png" alt="نص بديل"> <!-- مصدر الصورة ووصفها -->
<img width="200" height="100"> <!-- الأبعاد بالبكسل -->
<p title="معلومة تظهر عند التمرير">نص</p>
<html lang="ar"> <!-- لغة المستند -->
السمات العامة (Global Attributes)
هذه السمات يمكن استخدامها مع أي عنصر تقريبًا:
| السمة | الوظيفة |
|---|---|
id | مُعرّف فريد للعنصر في الصفحة |
class | اسم/أسماء فئات (قابلة لإعادة الاستخدام) |
style | تنسيق CSS مباشر داخل العنصر |
title | تلميح يظهر عند تمرير الماوس |
lang | لغة محتوى العنصر |
dir | اتجاه النص (rtl / ltr) |
hidden | إخفاء العنصر |
data-* | بيانات مخصّصة تقرأها JavaScript |
<p id="intro" class="lead" dir="rtl" data-user-id="42">
فقرة عليها عدة سمات عامة.
</p>
السمات البوليّة (Boolean Attributes)
بعض السمات لا تحتاج قيمة — مجرّد وجودها يعني "true":
<input type="text" required> <!-- حقل إلزامي -->
<button disabled>غير مفعّل</button>
<input type="checkbox" checked> <!-- مُحدّد مسبقًا -->
التدويل: lang وdir بعمق أكبر
lang على <html> (مثل lang="ar") ضروري لكل صفحة، لكنه لا يقف عند وسم الجذر فقط — يمكن تحديده على أي عنصر فرعي يحتوي محتوى بلغة مختلفة عن باقي الصفحة:
<html lang="ar" dir="rtl">
<body>
<p>هذا المقال يشرح مفهوم <span lang="en" dir="ltr">Hoisting</span> في جافاسكريبت.</p>
</body>
</html>
- بدون
lang="en"على الكلمة الإنجليزية، يحاول قارئ الشاشة نطقها بقواعد النطق العربية — نتيجة غير مفهومة غالبًا. - قيمة
langتتبع معيار BCP 47 المختصر:arعربي،enإنجليزي،en-USإنجليزية أمريكية تحديدًا،ar-JOعربية أردنية — التفصيل الإضافي اختياري وتكفي القيمة العامة (ar) في أغلب الحالات. dir="auto"(بدلrtl/ltrالصريحين) يترك المتصفح يخمّن الاتجاه من أول محرف قوي بالنص — مفيد لحقل إدخال قد يكتب فيه المستخدم عربيًا أو إنجليزيًا، كما رأيت معdirnameفي الجديد في HTML: عنصر search وخاصية dirname.
⚠️
langليست مسألة SEO فقط — قارئات الشاشة تستخدمها فعليًا لاختيار صوت ولهجة النطق الصحيحة. صفحةlang="ar"تحتوي فقرات إنجليزية غير موسومة تُسمَع بنطق عربي مكسور لكل كلمة إنجليزية فيها.
الأخطاء الشائعة
- ❌ نسيان علامات الاقتباس:
<a href=page.html>قد يعمل لكنه خطير. ✅ ضعها دائمًا. - ❌ تكرار
id: المُعرّف يجب أن يكون فريدًا. لتكرار التنسيق استخدمclass. - ❌ وضع السمة في وسم الإغلاق: السمات تُكتب في وسم البداية فقط.
- ❌ صفحة
lang="ar"بمقاطع إنجليزية طويلة غير موسومة بـlang="en"— يكسر النطق الصحيح لقارئات الشاشة.
خلاصة
السمات تُعطي العناصر معلومات وسلوكًا إضافيًا. أتقن id وclass وstyle وdata-* فهي الأكثر استخدامًا مع CSS و JavaScript، ولا تنسَ lang على أي محتوى بلغة مختلفة — وليس فقط على <html>.