سمات HTML
في الحصة السابقة تعلمت أن العناصر تُبنى من وسوم ومحتوى. السمات (attributes) تمنح تلك الوسوم معلومات إضافية. بدون السمات لا تستطيع عناصر كثيرة أداء عملها الحقيقي — فالرابط يحتاج عنواناً والصورة تحتاج مسار ملف.
ما هي سمة HTML؟
سمة HTML هي اسم وقيمة داخل وسم بداية العنصر. تخبر المتصفح شيئاً عن ذلك العنصر ليس هو النص المرئي بين الوسمين.
إجابة مباشرة
تستخدم السمات نمطاً بسيطاً: name="value". تنتمي إلى وسم الفتح قبل > الختامي. أمثلة شائعة: href للروابط وsrc مع alt للصور. الحصص التالية تستخدم السمات كثيراً؛ تعلّم النمط مرة هنا.
سمات على رابط وصورة
html<a href="https://example.com">Visit Example</a>
<img src="cat.jpg" alt="A cat sitting on a chair">قراءة المثال
- على الرابط، يخزّن
hrefعنوان الوجهة - نص الرابط المرئي ما زال المحتوى بين
<a>و</a> - على الصورة، يشير
srcإلى ملف الصورة - يوفّر
altنصاً بديلاً عند تعذّر التحميل أو لإمكانية الوصول - السمتان داخل وسم البداية
قواعد بناء يجب تذكّرها
- ضع السمات في وسم البداية فقط — لا في وسم النهاية
- افصل اسم السمة عن قيمتها بـ
= - غلّف معظم القيم بعلامات اقتباس:
href="https://example.com" - يمكن وضع أكثر من سمة في نفس وسم البداية مفصولة بمسافات
- تُكتب أسماء السمات عادة بأحرف صغيرة في HTML الحديث
عدة سمات على وسم واحد
html<a href="https://example.com" title="Example website">Visit Example</a>هنا يضبط href العنوان ويمكن أن يوفّر title نصاً إرشادياً إضافياً (غالباً كتلميح في متصفحات سطح المكتب). لست بحاجة لكل سمة اختيارية على كل وسم — استخدم ما يحتاجه العنصر.
السمات مقابل المحتوى
المحتوى ما يقع بين وسم البداية ووسم النهاية، مثل كلمات الفقرة. السمات تعيش على وسم البداية وتهيئ العنصر. خلطهما يسبب أخطاء: وضع URL في نص الرابط وحده لا ينشئ رابطاً يعمل؛ العنوان ينتمي إلى href.
ملاحظة عن العناصر الفارغة
ما زالت العناصر الفارغة مثل img تستخدم السمات حتى بلا وسم نهاية منفصل. هذا طبيعي: السمات تصف العنصر؛ وليست المحتوى الملفوف.
جرّب بنفسك
- افتح صفحة HTML أساسية في محررك
- أضف رابطاً بسمة
hrefإلى URL حقيقي أو مثالي - أضف
imgمعsrcونصaltذي معنى (أي مسار تمرين أو اسم مؤقت لتعلّم البناء) - احفظ وافتح الصفحة في المتصفح
- انقر الرابط وتحقق في مصدر الصفحة أن ترميز الصورة موجود حتى لو كان ملف الصورة مفقوداً
أخطاء شائعة
- كتابة السمات على وسم الإغلاق
- نسيان علامات الاقتباس حول القيم التي تحتاجها
- استخدام السمة الخاطئة (مثلاً وضع URL في
srcعلى رابط بدلhref) - ترك
altفارغاً على صور معلوماتية - افتراض أن نص السمة يظهر دائماً كمحتوى مرئي — كثير من السمات يضبط السلوك أو إمكانية الوصول
ملخص
- تضيف السمات معلومات إضافية داخل وسم البداية
- الشكل المعتاد هو
name="value" - الروابط تحتاج
href؛ الصور تحتاج غالباًsrcوalt - المحتوى بين الوسوم؛ السمات تهيئ الوسم
- يمكن جمع عدة سمات على وسم بداية واحد
- الدروس اللاحقة تعيد استخدام هذا النمط للعناوين والنماذج والوسائط والمزيد
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى