HTML: مرجع السمات العامة في HTML

Q: ما الفرق بين id و class ؟ متى أستخدم كل منهما؟

id مثل بطاقة هوية — كل صفحة يمكن أن يكون لها عنصر واحد فقط بقيمة id معينة، مما يجعله فريدًا. class مثل اسم الفصل — يمكن لعناصر متعددة مشاركة نفس class ، مما يجعله قابلًا لإعادة الاستخدام. في الممارسة العملية، استخدم class في 90% من الحالات لأن إعادة استخدام الأنماط هي القاعدة. id له أعلى أولوية CSS، لكن لا تسيء استخدامه من أجل الأولوية. تذكر: id لاستهداف JavaScript، class لأنماط CSS.

Q: ما هو data-* وكيف أقرأه؟

data-* يخزن بيانات مخصصة على عناصر HTML. مثال: <div data-user-id="123" data-role="admin"> . القراءة: ي_access JavaScript عبر element.dataset.userId (يحوّل الشرطات تلقائيًا إلى camelCase). الاستخدامات الشائعة: تخزين معرفات المستخدم ومعلومات المنتج ومعاملات التكوين. ملاحظة: data-* فقط للبيانات المتعلقة بالعرض — لا تخزن أبدًا معلومات حساسة هنا (مرئية في الكود المصدري).

Q: ما هو contenteditable ؟

contenteditable="true" يجعل محتوى العنصر قابلًا للتحرير مباشرة من قبل المستخدم — انقر واكتب، مثل محرر نصوص غني. الاستخدامات الشائعة: ملاحظات عبر الإنترنت وجداول قابلة للتحرير وتعليقات فورية. مع document.execCommand() ، يمكنك إضافة وظائف مثل غامق ومائل وتنسيقات أخرى. ملاحظة: هذا تأثير front-end فقط — المحتوى المحرر لا يُحفظ تلقائيًا على الخادم؛ تحتاج JavaScript للإرسال.

Q: ما الفرق بين hidden و display:none ؟

كلاهما يخفي العناصر، لكنهما يختلفان: 1) hidden هو سمة HTML5 قياسية بدلالة واضحة — "هذا العنصر لا يجب أن يكون مرئيًا الآن"；2) display:none هو تنسيق CSS — يخفي بصريًا فقط；3) hidden له أولوية أعلى من display:none — حتى مع تعيين display:block ، تبقى العناصر hidden غير مرئية. التوصية: استخدم hidden لحالة رؤية العنصر، display:none لاحتياجات النمط.

السمات العامة (Global Attributes) هي خصائص يمكن استخدامها على جميع وسوم HTML. إنها تحدد هوية العنصر ونمطه وسلوكه ولغته وطرق تفاعله.

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

السمات العامة هي سمات شاملة محددة في مواصفات HTML يمكن تطبيقها على أي عناصر HTML (بما في ذلك العناصر الجذر مثل <html> و <head> و <body>). إنها توفر تحكمًا دلاليًا وسلوكيًا متسقًا عبر جميع الوسوم. فهم واستخدام السمات العامة بكفاءة هو مفتاح كتابة HTML دلالي وسهل الوصول وقابل للصيانة.

2. أكثر السمات العامة استخدامًا

السمات الأربع التالية هي الأكثر استخدامًا في التطوير اليومي:

id — معرف فريد للعنصر، يجب ألا يتكرر في نفس الصفحة. يُستخدم لمحددات CSS و getElementById() في JavaScript وروابط المرساة.
class — قائمة بأسماء الفئات مفصولة بمسافات، تُستخدم لمحددات CSS و JavaScript. يمكن أن يكون للعنصر فئات متعددة.
style — أنماط CSS مضمنة تُكتب مباشرة على الوسم. لها أولوية أعلى من أوراق الأنماط الخارجية.
title — نص تلميح يُعرض عند تمرير الماوس. مفيد بشكل خاص لـ <abbr> و <iframe> والعناصر المماثلة.

▶ مثال

HTML

<!-- id — معرف فريد -->
<div id="header">رأس الموقع</div>

<!-- class — أسماء الفئات -->
<p class="highlight important">هذا النص مطبق عليه نمطا التمييز والأهمية</p>

<!-- style — أنماط مضمنة -->
<span style="color: red; font-weight: bold;">نص أحمر عريض</span>

<!-- title — تلميح تمرير الماوس -->
<abbr title="لغة ترميز النص التشعبي">HTML</abbr> هي لغة ترميز ويب.

▶ جرّب الكود

3. اللغة والاتجاه

هاتان السمتان حاسمتان لإعلان لغة واتجاه قراءة محتوى الصفحة، ومهمتان جدًا لتحسين محركات البحث (SEO) وإمكانية الوصول:

lang — تعلن لغة محتوى العنصر، مثل lang="en" (إنجليزية)، lang="ar" (عربية)
dir — اتجاه النص: ltr (من اليسار إلى اليمين، افتراضي)، rtl (من اليمين إلى اليسار، للعربية/العبرية)

HTML

<!-- إعلان اللغة الأساسية للصفحة كالعربية -->
### ▶ مثال
<html lang="ar">

<!-- نص جسم بالعربية -->
<p lang="ar">مرحباً بكم في موقعنا!</p>

<!-- نص عربي من اليمين إلى اليسار -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>

ℹ️ ملاحظة: سمة lang مهمة جدًا لتحسين محركات البحث (يمكن لمحركات البحث تحديد لغة المحتوى بدقة) وقارئات الشاشة (التي تختار محرك النطق الصحيح). اجعل من عادتك تعيين lang على الوسم <html>.

4. سمات البيانات (data-*)

تسمح لك سمة data-* بتخزين بيانات مخصصة على عناصر HTML، يمكن لـ JavaScript قراءتها عبر واجهة dataset. لاحظ أن * يجب أن يبدأ بحرف صغير ولا يمكن أن يحتوي على أحرف كبيرة:

HTML

<!-- استخدام data-* لتخزين معلومات المنتج -->
<div class="product" data-id="1001" data-name="فأرة لاسلكية" data-price="99.00" data-stock="true">
<h3>فأرة لاسلكية</h3>
<p>السعر: 99.00$</p>
<button onclick="addToCart(this)">أضف إلى السلة</button>
</div>

<script>
function addToCart(btn) {
const product = btn.closest('.product');
const id = product.dataset.id;
const name = product.dataset.name;
const price = product.dataset.price;
console.log('أضيف إلى السلة:', id, name, price);
alert(`تمت إضافة "${name}" إلى السلة، السعر: ${price}$`);
}
</script>

5. السمات التفاعلية

تتحكم هذه السمات في رؤية العنصر وترتيب التركيز وسلوك التحرير:

hidden — يخفي عنصرًا (يعادل display: none)، العنصر لا يشغل أي مساحة
tabindex — ترتيب التنقل بمفتاح Tab: tabindex="0" يركز بترتيب المستند، -1 يجعله غير قابل للتركيز
contenteditable — يجعل محتوى العنصر قابلاً للتحرير؛ عيّنه إلى true للتفعيل
spellcheck — يفعل أو يعطل التدقيق الإملائي: true / false

HTML

<!-- hidden — يخفي معلومات غير مرئية -->
<div hidden>هذه الرسالة غير مرئية للمستخدمين</div>

### ▶ مثال
<!-- tabindex يتحكم في ترتيب التركيز -->
<input type="text" tabindex="2" placeholder="التركيز ثانيًا">
<input type="text" tabindex="1" placeholder="التركيز أولاً">

<!-- contenteditable يتيح التحرير داخل الصفحة -->
<div contenteditable="true" style="border:1px solid #ccc; padding:10px; border-radius:4px;">
هذا النص يمكن تحريره مباشرة في المتصفح!
</div>

<!-- spellcheck — التدقيق الإملائي -->
<textarea spellcheck="true" placeholder="سيتم تدقيق النص العربي إملائيًا"></textarea>

6. سمات عامة أخرى

إليك المزيد من السمات العامة المفيدة: السمةالوصفمثال`accesskey`اختصار لوحة المفاتيح لتفعيل أو تركيز عنصر`accesskey="s"` (اضغط Alt+S للتركيز)`draggable`ما إذا كان العنصر قابلًا للسحب، يعمل مع واجهة السحب والإفلاتdraggable="true"``autofocusالتركيز التلقائي عند تحميل الصفحة (لـ `<input>` و `<textarea>` و `<button>` وعناصر النموذج الأخرى)autofocus``translateيتحكم في إمكانية ترجمة محتوى العنصر (`yes` / `no`)translate="no"``slotيُستخدم مع عناصر `<slot>` لمكونات الويبslot="header"``isيحدد عنصرًا مدمجًا مخصصًاis="x-foo"``itemscope / `itemprop` / `itemtype`بيانات دقيقة لترميز البيانات المنظمة`itemscope itemtype="https://schema.org/Product"`

❓ أسئلة شائعة

س ما الفرق بين id و class؟ متى أستخدم كل منهما؟

ج id مثل بطاقة هوية — كل صفحة يمكن أن يكون لها عنصر واحد فقط بقيمة id معينة، مما يجعله فريدًا. class مثل اسم الفصل — يمكن لعناصر متعددة مشاركة نفس class، مما يجعله قابلًا لإعادة الاستخدام. في الممارسة العملية، استخدم class في 90% من الحالات لأن إعادة استخدام الأنماط هي القاعدة. id له أعلى أولوية CSS، لكن لا تسيء استخدامه من أجل الأولوية. تذكر: id لاستهداف JavaScript، class لأنماط CSS.

س ما هو data-* وكيف أقرأه؟

ج data-* يخزن بيانات مخصصة على عناصر HTML. مثال: <div data-user-id="123" data-role="admin">. القراءة: ي_access JavaScript عبر element.dataset.userId (يحوّل الشرطات تلقائيًا إلى camelCase). الاستخدامات الشائعة: تخزين معرفات المستخدم ومعلومات المنتج ومعاملات التكوين. ملاحظة: data-* فقط للبيانات المتعلقة بالعرض — لا تخزن أبدًا معلومات حساسة هنا (مرئية في الكود المصدري).

س ما هو contenteditable؟

ج contenteditable="true" يجعل محتوى العنصر قابلًا للتحرير مباشرة من قبل المستخدم — انقر واكتب، مثل محرر نصوص غني. الاستخدامات الشائعة: ملاحظات عبر الإنترنت وجداول قابلة للتحرير وتعليقات فورية. مع document.execCommand()، يمكنك إضافة وظائف مثل غامق ومائل وتنسيقات أخرى. ملاحظة: هذا تأثير front-end فقط — المحتوى المحرر لا يُحفظ تلقائيًا على الخادم؛ تحتاج JavaScript للإرسال.

س ما الفرق بين hidden و display:none؟

ج كلاهما يخفي العناصر، لكنهما يختلفان: 1) hidden هو سمة HTML5 قياسية بدلالة واضحة — "هذا العنصر لا يجب أن يكون مرئيًا الآن"；2) display:none هو تنسيق CSS — يخفي بصريًا فقط；3) hidden له أولوية أعلى من display:none — حتى مع تعيين display:block، تبقى العناصر hidden غير مرئية. التوصية: استخدم hidden لحالة رؤية العنصر، display:none لاحتياجات النمط.

📖 ملخص

السمات العامة يمكن استخدامها على جميع عناصر HTML
id للتحديد الفريد، class لتجميع الأنماط، style للأنماط المضمنة، title لتلميحات تمرير الماوس
lang تعلن اللغة، dir تتحكم في اتجاه النص
data-* تخزن بيانات مخصصة، تُقرأ عبر واجهة dataset
hidden يخفي العناصر، tabindex يحدد ترتيب Tab، contenteditable يتيح تحرير المحتوى
accesskey لاختصارات لوحة المفاتيح، draggable للسحب والإفلات، autofocus للتركيز التلقائي

📝 تمارين

عرض المنتجات: أنشئ بطاقات منتجات باستخدام data-* لتخزين id واسم وسعر وحالة مخزون كل منتج. اعرض معلومات المنتج في نافذة منبثقة عند النقر على زر. تضمن على الأقل 3 بطاقات منتجات.
محرر مهام: استخدم contenteditable="true" لإنشاء منطقة تحرير مهام بسيطة، واستخدم سمة hidden لتبديل وظيفة "إظهار/إخفاء لوحة المحرر". عيّن ترتيب تركيز Tab منطقيًا باستخدام tabindex.

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

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

من نحن