HTML: سمات HTML

توفر السمات (attributes) معلومات تكوين إضافية لوسوم HTML، مما يجعل سلوك العناصر ومظهرها أكثر ثراءً.

1. ما هي السمات

سمات HTML هي كلمات رئيسية خاصة تُكتب داخل وسم البداية، تستخدم لتكوين الوسوم بمزيد من التفصيل. تُكتب السمات بصيغة name="value" داخل وسم البداية. يمكن أن يحتوي الوسم على سمات متعددة، مفصولة بمسافات.

▶ مثال

<!-- سمة واحدة -->
<a href="https://example.com">هذا رابط</a>

<!-- سمات متعددة، مفصولة بمسافات -->
<img src="photo.jpg" alt="صورة منظر طبيعي" width="800" height="600">

<!-- يُوصى بأن تُغلف قيم السمات بعلامات اقتباس مزدوجة، لكن المفردة تعمل أيضًا -->
<p title='نص تلميح'>فقرة مع تلميح</p>

في الأمثلة أعلاه، href و src و alt و width و height و title كلها أسماء سمات، والمحتوى داخل علامات الاقتباس هو قيم السمات المحددة. أسماء السمات تكون دائمًا بحروف صغيرة، ويُوصى باستخدام علامات الاقتباس المزدوجة لقيم السمات.

2. السمات العامة الشائعة

السمات العامة (Global Attributes) هي سمات يمكن استخدامها على أي وسم HTML. إليك أكثر السمات العامة استخدامًا:

(1) id — معرف فريد

سمة id تعين معرفًا فريدًا لعنصر ما. داخل نفس الصفحة، يمكن استخدام كل id مرة واحدة فقط. تُستخدم عادةً للروابط المرجعية ومحددات CSS وعمليات JavaScript.

<h1 id="page-title">مرحبًا بكم في موقعي</h1>
### ▶ مثال
<!-- يمكن استخدام #page-title للقفز إلى موضع هذا العنوان -->
<a href="#page-title">اقفز إلى العنوان</a>

(2) class — اسم الفئة

سمة class تعين اسم فئة أو أكثر لعنصر. على عكس id، يمكن إعادة استخدام نفس اسم الفئة عبر عناصر متعددة، وهي الطريقة الأساسية لتنسيق CSS واختيار JavaScript.

<!-- عناصر متعددة يمكنها استخدام نفس الفئة -->
### ▶ مثال
<p class="highlight">سيتم تمييز هذا النص</p>
<p class="highlight">سيتم تمييز هذا النص أيضًا</p>

<!-- عنصر واحد يمكن أن يكون له فئات متعددة، مفصولة بمسافات -->
<div class="box bordered rounded">هذا صندوق دائري بحدود</div>

(3) style — أنماط مضمنة

سمة style تسمح بكتابة أنماط CSS مباشرة داخل الوسم. على الرغم من عدم التوصية باستخدامها بكثافة (من الأفضل الاحتفاظ بالأنماط في ملفات CSS منفصلة)، إلا أنها مريحة جدًا للاختبار السريع أو تجاوز الأنماط ديناميكيًا.

<p style="color: red; font-size: 18px;">هذا نص أحمر كبير</p>
### ▶ مثال
<div style="background: #f0f0f0; padding: 10px; border-radius: 5px;">
هذا صندوق دائري بلون خلفية
</div>

(4) title — نص التلميح

سمة title توفر معلومات إضافية للعنصر. عندما يمرر المستخدم الماوس فوق العنصر، يعرض المتصفح تلميحًا.

<p title="هذا نص تلميح">مرر الماوس فوق هذا النص لترى ماذا يحدث</p>
### ▶ مثال
<abbr title="لغة ترميز النص التشعبي">HTML</abbr>

(5) ملخص السمات العامة

السمةالغرضالتفردمدى الاستخدامidمعرف فريد للعنصر، يُستخدم للمراسي و CSS و JSفريد في الصفحة⭐⭐⭐⭐⭐classتعيين اسم فئة للعنصر، يُستخدم لـ CSS / JSقابل لإعادة الاستخدام⭐⭐⭐⭐⭐styleكتابة أنماط CSS مباشرة داخل الوسم—⭐⭐titleعرض نص تلميح عند تمرير الماوس—⭐⭐langإعلان لغة محتوى العنصر—⭐⭐dirتحديد اتجاه النص (ltr / rtl)—⭐

3. السمات المنطقية (Boolean Attributes)

السمات المنطقية هي نوع خاص من السمات — لا تحتاج إلى قيمة؛ مجرد ظهورها يعني "تشغيل/صحيح". السمات المنطقية الشائعة تشمل disabled و checked و readonly و required.

<!-- حقل إدخال معطل -->
<input type="text" disabled>

<!-- خانة اختيار محددة مسبقًا -->
<input type="checkbox" checked> أوافق على الشروط

<!-- حقل إدخال للقراءة فقط -->
<input type="text" value="محتوى للقراءة فقط" readonly>
### ▶ مثال

<!-- حقل إجباري -->
<input type="email" required>

يمكن أيضًا كتابة السمات المنطقية كـ name="name"، على سبيل المثال disabled="disabled". كلا الشكلين ينتجان نفس التأثير تمامًا. يُوصى بالشكل المختصر (اسم السمة فقط).

4. سمات البيانات المخصصة data-*

قدم HTML5 ميزة مرنة جدًا: سمات البيانات المخصصة. يمكنك إنشاء سماتك الخاصة على أي وسم HTML، طالما أن اسم السمة يبدأ بـ data-. الغرض منها هو تخزين بيانات إضافية داخل وسوم HTML لاستخدامها بواسطة JavaScript و CSS.

على سبيل المثال، تخيل أن لديك قائمة منتجات وتريد تخزين سعر وكمية المخزون لكل منتج — هذه البيانات لا تحتاج إلى العرض على الصفحة، لكن JavaScript يحتاج إلى قراءتها للمنطق التفاعلي.

<ul>
<li data-product-id="101" data-price="29.9" data-stock="50">قميص - 29.9$</li>
<li data-product-id="102" data-price="99.9" data-stock="20">حقيبة ظهر - 99.9$</li>
<li data-product-id="103" data-price="199" data-stock="0">سماعات رأس - 199$ (نفد المخزون)</li>
</ul>

<script>
// الوصول إلى data-* عبر واجهة dataset
const items = document.querySelectorAll('li');
for (let item of items) {
  console.log(item.dataset.productId);  // "101", "102", "103"
  console.log(item.dataset.price);      // "29.9", "99.9", "199"
}
</script>

في هذا المثال، data-product-id و data-price و data-stock كلها سمات عرّفناها بأنفسنا. لن تؤثر على عرض الصفحة، لكن JavaScript يمكنه قراءتها بسهولة. انقر على "جرّب" أدناه، ثم افتح وحدة تحكم المطور (F12) لرؤية البيانات المقروءة.

قواعد التسمية: في HTML، استخدم data-user-name (بشرطة). في JavaScript، الوصول المقابل هو dataset.userName (بصيغة الجمل). يتم تحويل الحرف الأول بعد كل شرطة تلقائيًا إلى حرف كبير.

▶ مثال

<div data-user-name="أحمد" data-user-age="20">معلومات المستخدم</div>

<script>
// قراءة data-user-name ← dataset.userName (صيغة الجمل)
const div = document.querySelector('div');
console.log(div.dataset.userName);  // "أحمد"
console.log(div.dataset.userAge);   // "20"
</script>

▶ مثال

❓ أسئلة شائعة

📖 ملخص

• تُكتب السمات كـ name="value" داخل وسوم البداية، مع سمات متعددة مفصولة بمسافات.
• السمات العامة تعمل على أي وسم: id (معرف فريد)، class (اسم فئة قابل لإعادة الاستخدام)، style (أنماط مضمنة)، title (نص تلميح).
• السمات المنطقية لا تحتاج إلى قيمة؛ وجودها يشير إلى "تشغيل": disabled و checked و readonly و required.
• سمات البيانات المخصصة data-* تخزن بيانات إضافية في الوسوم؛ يقرؤها JavaScript عبر واجهة dataset.

📝 تمارين

1. تمرين دمج السمات: أنشئ صفحة تحتوي على العناصر التالية:

• فقرة بسمات id و class و style;

• رابط بسمة title (مرر الماوس لرؤية التلميح);

• حقل إدخال بسمة disabled (رمادي، غير قابل للنقر).

2. تمرين data-*: أنشئ قائمة بطاقات منتجات حيث تستخدم كل بطاقة سمات data-* لتخزين اسم المنتج وسعره ومخزونه. ثم استخدم JavaScript لقراءة هذه البيانات في وحدة تحكم المتصفح عبر document.querySelectorAll و dataset.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن