شرح خصائص HTML (Attributes) للمبتدئين بالعربي
تعلمنا في الدروس السابقة ما هي العناصر وكيف تتداخل. لكن العناصر وحدها لا تكفي دائماً. تحتاج أحياناً أن تُخبر المتصفح بمعلومات إضافية: أين الصورة؟ إلى أين يذهب الرابط؟ ما لون هذا النص؟ هذا بالضبط ما تفعله الخصائص (Attributes).
ما هي الخاصية؟
الخاصية هي معلومة إضافية تُضاف داخل وسم البداية لتُخبر المتصفح بتفاصيل أكثر عن العنصر.
<!-- هذا عنصر بدون خاصية -->
<p>مرحباً!</p>
<!-- هذا عنصر مع خاصية -->
<p style="color: red;">مرحباً! أنا باللون الأحمر.</p>
القاعدة الأساسية: الخاصية تُكتب دائماً داخل وسم البداية فقط — ليس في وسم النهاية. وتأتي على شكل اسم="قيمة".
شكل الخاصية — الصيغة الصحيحة
<اسم-الوسم اسم-الخاصية="القيمة">المحتوى</اسم-الوسم>
<!-- مثال حقيقي -->
<a href="https://www.devarabi.com">زيارة الموقع</a>
في هذا المثال:
a— اسم الوسم (رابط)href— اسم الخاصية"https://www.devarabi.com"— قيمة الخاصية
أهم الخصائص في HTML — شرح كامل
1. خاصية href — وجهة الرابط
تُستخدم مع الوسم <a> (رابط). تحدد إلى أي صفحة أو موقع يذهب الزائر عند الضغط على الرابط.
<a href="https://www.devarabi.com">اضغط هنا للذهاب إلى DevArabi</a>
<!-- رابط لصفحة أخرى في نفس الموقع -->
<a href="/courses/html/intro.php">مقدمة HTML</a>
2. خاصية src — مصدر الصورة
تُستخدم مع الوسم <img> لتحديد مسار الصورة التي تريد عرضها.
<!-- صورة من الإنترنت -->
<img src="https://example.com/photo.jpg">
<!-- صورة محفوظة على نفس الموقع -->
<img src="/assets/images/logo.png">
3. خاصية alt — النص البديل للصورة
تُستخدم مع <img> لكتابة نص يظهر إذا لم تتمكن الصورة من التحميل.
هي أيضاً مهمة جداً لـSEO ولأشخاص الإعاقة البصرية.
<img src="/assets/images/logo.png" alt="شعار موقع DevArabi لتعلم البرمجة">
alt="" تقول للمتصفح "هذه الصورة زخرفية فقط". لكن إذا كانت الصورة مهمة، اكتب وصفاً حقيقياً لها. جوجل يقرأ هذا النص لفهم موضوع صفحتك.
4. خاصية style — التنسيق المباشر
تُستخدم لإضافة تنسيق CSS مباشرة على العنصر — مثل اللون، الحجم، الخلفية.
<p style="color: blue;">هذا النص باللون الأزرق.</p>
<h1 style="font-size: 40px; color: green;">عنوان كبير أخضر</h1>
<p style="background-color: yellow; padding: 10px;">نص على خلفية صفراء</p>
style مباشرة في HTML مقبول للتعلم والاختبار السريع. لكن في المشاريع الحقيقية، من الأفضل فصل CSS في ملف منفصل. سنتعلم هذا لاحقاً.
5. خاصية id — المعرّف الفريد
كل عنصر يمكن أن يأخذ id فريداً. يُستخدم لتحديد عنصر بعينه من CSS أو JavaScript.
<h1 id="main-title">العنوان الرئيسي</h1>
<p id="intro-text">هذه الفقرة التمهيدية.</p>
id في صفحة واحدة. كل id يجب أن يكون فريداً تماماً — مثل رقم بطاقة الهوية.
6. خاصية class — التصنيف المشترك
تختلف عن id في أنه يمكن استخدامها لعدة عناصر في نفس الصفحة. مفيدة لتطبيق نفس التنسيق على مجموعة عناصر.
<p class="important-note">هذه ملاحظة مهمة.</p>
<p class="important-note">هذه ملاحظة مهمة أخرى.</p>
<p class="important-note">وهذه ملاحظة ثالثة.</p>
7. خاصية title — رسالة عند التمرير
عندما تضع الماوس فوق عنصر يحتوي على title، تظهر رسالة صغيرة.
<p title="هذه معلومة إضافية تظهر عند التحويم">مرّر فوق هذا النص!</p>
<a href="https://devarabi.com" title="موقع تعلم البرمجة بالعربية">DevArabi</a>
ملخص — جدول أشهر الخصائص
| الخاصية | تُستخدم مع | وظيفتها |
|---|---|---|
href |
<a> |
تحديد وجهة الرابط |
src |
<img>, <script> |
تحديد مصدر الملف أو الصورة |
alt |
<img> |
نص بديل إذا لم تُحمَّل الصورة |
style |
أي عنصر | تنسيق CSS مباشر على العنصر |
id |
أي عنصر | معرّف فريد للعنصر (لا يتكرر) |
class |
أي عنصر | تصنيف مشترك لعدة عناصر |
title |
أي عنصر | رسالة تظهر عند التمرير بالماوس |
width / height |
<img>, <table> |
تحديد عرض وارتفاع العنصر |
علامات الاقتباس — مزدوجة أم مفردة؟
القيم في الخصائص تُكتب داخل علامات اقتباس. المعيار المتفق عليه هو استخدام علامات الاقتباس المزدوجة " ".
<!-- ✅ الأفضل والأكثر شيوعاً -->
<a href="https://devarabi.com">الموقع</a>
<!-- ✅ يعمل أيضاً، لكن أقل شيوعاً -->
<a href='https://devarabi.com'>الموقع</a>
<!-- متى نستخدم المفردة؟ عندما تحتوي القيمة على علامات مزدوجة -->
<p title='أحمد "المحترف" في البرمجة'>تعرف على أحمد</p>
عنصر كامل بخصائص متعددة
يمكن للعنصر الواحد أن يحتوي على عدة خصائص في نفس الوقت:
<img
src="/assets/images/logo.png"
alt="شعار DevArabi"
width="200"
height="100"
title="موقع تعلم البرمجة بالعربية"
id="site-logo"
class="header-image"
>
لاحظ أننا كتبنا كل خاصية في سطر منفصل — هذا ليس إجبارياً لكنه يجعل الكود أكثر قابلية للقراءة، خاصةً عندما تتعدد الخصائص.
الأسئلة الشائعة — FAQ
هل الخصائص إجبارية؟
لا، الخصائص اختيارية في معظم الحالات. لكن بعض الخصائص شبه إجبارية عملياً — مثل alt مع الصور (مهم لـ SEO) وhref مع الروابط (بدونها الرابط لا يعمل).
هل يمكن لعنصر واحد أن يحتوي على أكثر من خاصية؟
نعم، بلا حدود. يمكنك إضافة عشرات الخصائص على عنصر واحد — تكتبها واحدة بعد الأخرى داخل وسم البداية مع مسافة بينهما.
ما الفرق بين id وclass؟
id فريد — لا يتكرر في الصفحة. class مشترك — يمكن أن يُستخدم على عشرات العناصر في نفس الصفحة. القاعدة: استخدم id لعنصر وحيد ومحدد، وclass لمجموعة عناصر متشابهة.
هل ترتيب الخصائص مهم؟
لا، المتصفح يقرأ الخصائص بغض النظر عن ترتيبها داخل الوسم. لكن تقليدياً يُكتب id وclass أولاً ثم باقي الخصائص لتسهيل القراءة.