ما هي السمات؟
السمة (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> <!-- مُحدّد مسبقًا -->
الأخطاء الشائعة
- ❌ نسيان علامات الاقتباس:
<a href=page.html>قد يعمل لكنه خطير. ✅ ضعها دائمًا. - ❌ تكرار
id: المُعرّف يجب أن يكون فريدًا. لتكرار التنسيق استخدمclass. - ❌ وضع السمة في وسم الإغلاق: السمات تُكتب في وسم البداية فقط.
خلاصة
السمات تُعطي العناصر معلومات وسلوكًا إضافيًا. أتقن id وclass وstyle وdata-* فهي الأكثر استخدامًا مع CSS و JavaScript.