Attributes HTML

الـ Attributes في الـ HTML دي عبارة عن معلومات إضافية بنضيفها للـ elements عشان نوصفها أكتر أو نديها خصائص معينة. فيه attributes كتير ومختلفة في الـ HTML.

بنكتب الـ attribute جوه الـ opening tag بتاع الـ element، وبيكون ليها شكل: name="value".

Attributes موجودة لكل العناصر تقريبًا:

فيه شوية attributes مشهورة وممكن نستخدمها مع معظم عناصر الـ HTML، زي:

• الـ title: دي بنستخدمها عشان نضيف تلميح (tooltip) بيظهر لما المستخدم يقف بالماوس على العنصر شوية من غير ما يدوس.

  <p title="This is a paragraph">دي فقرة عادية.</p>
  <!-- لو وقفت على الفقرة دي، هيظهرلك "This is a paragraph" -->

• الـ id: بندي للعنصر اسم مميز (unique identifier) في الصفحة كلها. مينفعش عنصرين ياخدوا نفس الـ id. بنستخدمه كتير مع الـ CSS والـ JavaScript MOC عشان نوصل للعنصر ده بالذات.

  <h1 id="main-heading">العنوان الرئيسي</h1>

• الـ class: بندي للعنصر اسم مجموعة أو تصنيف. ممكن أكتر من عنصر ياخدوا نفس الـ class. بنستخدمه كتير مع الـ CSS عشان ندي نفس الـ style لمجموعة عناصر، أو مع الـ JavaScript MOC عشان نختار مجموعة عناصر مع بعض.

  <p class="highlight">دي فقرة مهمة.</p>
  <p class="highlight">دي فقرة تانية مهمة.</p>
  <!-- العنصرين دول ممكن نديهم نفس الستايل باستخدام الكلاس highlight -->

• الـ style: بنستخدمها عشان نضيف CSS styles بسيطة ومباشرة للعنصر ده بس (بنسميها Inline Style). بس مش مفضل نستخدمها كتير، الأحسن نكتب الـ CSS في ملف منفصل أو جوه الـ <style> tag.

  <p style="color: blue; font-size: 18px;">الفقرة دي لونها أزرق وحجم خطها 18 بكسل.</p>