الخصائص في HTML
الخصائص (Attributes) هي معلومات إضافية نضيفها للوسوم لتحديد سلوكها أو مظهرها. تُكتب الخصائص داخل وسم الفتح فقط، وتتكون من اسم وقيمة.
ما هي الخاصية؟
الخاصية (Attribute) هي معلومة إضافية تُضاف للوسم لتعديل سلوكه أو إعطائه معلومات إضافية. مثل إضافة رابط لزر أو تحديد حجم صورة.
الصيغة العامة للخاصية هي: name="value". دعنا نرى بعض الأمثلة الشائعة:
<!-- خاصية href للروابط -->
<a href="https://arabdocs.com">زر الموقع</a>
<!-- خاصية src للصور -->
<img src="logo.png" alt="شعار الموقع">
<!-- خاصية id لتحديد العنصر -->
<div id="header">رأس الصفحة</div>
<!-- خاصية class لتنسيق CSS -->
<p class="important-text">نص مهم</p>شرح الخصائص
- href: يحدد وجهة الرابط (Hypertext Reference)
- src: يحدد مصدر الصورة (Source)
- alt: نص بديل يظهر إذا فشل تحميل الصورة
- id: معرف فريد للعنصر (لا يتكرر)
- class: فئة CSS يمكن استخدامها لعدة عناصر
هناك بعض الخصائص العامة (Global Attributes) التي يمكن استخدامها مع أي وسم HTML. من أهمها:
<!-- id: معرف فريد للعنصر -->
<div id="main-content">المحتوى الرئيسي</div>
<!-- class: فئة أو أكثر للتنسيق -->
<p class="text-large text-bold">نص كبير وعريض</p>
<!-- style: تنسيق CSS مباشر -->
<span style="color: red;">نص أحمر</span>
<!-- title: نص يظهر عند التمرير -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- dir: اتجاه النص -->
<p dir="ltr">Left to Right Text</p>
<!-- lang: لغة المحتوى -->
<p lang="ar">نص عربي</p>
<p lang="en">English text</p>الخصائص العامة (Global Attributes)
| الخاصية | الوظيفة | مثال |
|---|---|---|
| id | معرف فريد للعنصر | id="header" |
| class | فئة للتنسيق (يمكن تكرارها) | class="text-bold" |
| style | تنسيق CSS مباشر | style="color: red;" |
| title | نص يظهر عند التمرير بالفأرة | title="معلومات إضافية" |
| dir | اتجاه النص (rtl/ltr) | dir="rtl" |
| lang | لغة المحتوى | lang="ar" |
بعض الخصائص خاصة بوسوم معينة، مثل type في input أو href في الروابط. هذه الخصائص تحدد وظيفة العنصر:
<!-- خصائص خاصة بـ input -->
<input type="text" placeholder="اكتب اسمك">
<input type="email" required>
<input type="password" maxlength="20">
<!-- خصائص خاصة بـ a -->
<a href="page.html" target="_blank">فتح في تبويب جديد</a>
<!-- خصائص خاصة بـ img -->
<img src="photo.jpg" alt="وصف" width="300" height="200">خصائص input الشائعة
| الخاصية | الوظيفة | القيم |
|---|---|---|
| type | نوع الحقل | text, email, password, number |
| placeholder | نص توضيحي داخل الحقل | أي نص |
| required | حقل إجباري | بدون قيمة |
| maxlength | الحد الأقصى للأحرف | رقم |
| value | القيمة الافتراضية | أي نص |
نصيحة مهمة
استخدم خاصية alt دائماً مع الصور! هذا مهم لـ SEO ولمساعدة الأشخاص ذوي الإعاقة البصرية.
تحذير
تجنب استخدام style مباشرة في HTML. من الأفضل استخدام CSS منفصل للتنسيق لجعل الكود أكثر تنظيماً.
- تعلمنا ما هي الخصائص (Attributes)
- فهمنا الفرق بين الخصائص العامة والخاصة
- تعرفنا على أهم الخصائص في HTML
- سنتعلم المزيد عن HTML في الدروس القادمة
تذكر: الخصائص تجعل عناصر HTML أكثر قوة ومرونة. استخدمها لإضافة السلوك والمعلومات اللازمة لعناصرك.
مساحة إعلانية
HTML • الخصائص في HTML