الخصائص في HTML

الخصائص (Attributes) هي معلومات إضافية نضيفها للوسوم لتحديد سلوكها أو مظهرها. تُكتب الخصائص داخل وسم الفتح فقط، وتتكون من اسم وقيمة.

ما هي الخاصية؟

الخاصية (Attribute) هي معلومة إضافية تُضاف للوسم لتعديل سلوكه أو إعطائه معلومات إضافية. مثل إضافة رابط لزر أو تحديد حجم صورة.

الصيغة العامة للخاصية هي: name="value". دعنا نرى بعض الأمثلة الشائعة:

htmlأمثلة على الخصائص
<!-- خاصية 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. من أهمها:

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 في الروابط. هذه الخصائص تحدد وظيفة العنصر:

htmlخصائص خاصة بوسوم معينة
<!-- خصائص خاصة بـ 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