| الخاصية | تعمل مع | القيم الشائعة | الاستخدام |
|---|---|---|---|
| id | كل العناصر | نص فريد | معرّف فريد للعنصر في الصفحة — للـ CSS والـ JS |
| class | كل العناصر | اسم أو أسماء مفصولة بمسافة | تجميع عناصر لتطبيق CSS عليها |
| style | كل العناصر | خصائص CSS: color:red; font-size:16px | تنسيق مباشر inline |
| lang | كل العناصر | ar، en، fr... | تحديد لغة العنصر |
| title | كل العناصر | نص وصفي | Tooltip يظهر عند التحويم |
| hidden | كل العناصر | (بوليانية — لا قيمة) | إخفاء العنصر عن الصفحة |
| tabindex | كل العناصر | رقم صحيح | ترتيب التنقل بمفتاح Tab |
| href | <a>، <link> | URL أو مسار أو #id | وجهة الرابط |
| src | <img>، <script>، <iframe> | مسار الملف أو URL | مصدر المحتوى الخارجي |
| alt | <img> | وصف نصي | النص البديل عند تعذر عرض الصورة |
| type | <input>، <button> | text, email, password, submit... | نوع عنصر الإدخال أو الزر |
| value | <input>، <button> | نص أو رقم | القيمة الافتراضية أو الحالية للحقل |
| placeholder | <input>، <textarea> | نص توضيحي | نص يظهر داخل الحقل قبل الكتابة |
| disabled | <input>، <button>، <select> | (بوليانية) | تعطيل العنصر ومنع التفاعل |
| required | <input>، <textarea> | (بوليانية) | جعل الحقل إلزامي في النماذج |
| data-* | كل العناصر | أي قيمة مخصصة | تخزين بيانات مخصصة يقرأها JavaScript |
| rel | <a>، <link> | noopener, stylesheet, canonical... | نوع العلاقة بين المستندات |
| target | <a> | _blank, _self, _parent, _top | مكان فتح الرابط (_blank = تبويب جديد) |
الخصائص (Attributes) هي المعلومات الإضافية التي تُضيفها لوسم HTML لتُعدّل سلوكه أو مظهره أو معناه. تُكتب دائماً داخل وسم الفتح، وعادةً تأخذ الشكل: اسم="قيمة". بدون الخصائص، كثير من عناصر HTML تصبح بلا معنى — فالصورة <img> بدون src لا تعرف أي صورة تعرض، والرابط <a> بدون href لا يعرف إلى أين يذهب.
تشريح الخاصية: كل خاصية تتكون من ثلاثة أجزاء: الاسم (name) وهو الكلمة المفتاحية المحددة مسبقاً، وإشارة يساوي (=)، والقيمة (value) وهي البيانات التي تحددها أنت بين علامتي اقتباس. مثلاً في href="https://google.com" — href هو الاسم، وhttps://google.com هو القيمة.
الخصائص العامة (Global Attributes): هناك مجموعة من الخصائص تعمل مع أي عنصر HTML بغض النظر عن نوعه. أهمها:
خاصية id: تُعطي العنصر معرفاً فريداً (Unique Identifier) في الصفحة كلها — لا يمكن أن يكون هناك عنصران بنفس id في صفحة واحدة. يُستخدم للوصول إلى العنصر عبر JavaScript وCSS.
خاصية class: تُعطي العنصر اسماً (أو أكثر) يمكن مشاركته بين عناصر متعددة. هذه هي الطريقة الرئيسية لتطبيق تنسيقات CSS على مجموعة من العناصر دفعة واحدة. عنصر واحد يمكن أن يكون له أكثر من class مفصولة بمسافات.
خاصية style: تُضيف تنسيق CSS مباشرةً على العنصر (Inline CSS). مفيدة للاختبار السريع لكن لا يُنصح بالاعتماد عليها في المشاريع الكبيرة.
خاصية lang: تحدد لغة محتوى العنصر — مهمة لتقنيات إمكانية الوصول وترجمة الصفحة.
خاصية title: نص توضيحي يظهر كـ Tooltip عند التحويم على العنصر.
خاصية hidden: خاصية بوليانية (Boolean) تُخفي العنصر من الصفحة دون حذفه.
خاصية tabindex: تتحكم في ترتيب التنقل بالضغط على Tab للتنقل بين العناصر التفاعلية.
الخصائص البوليانية (Boolean Attributes): بعض الخصائص لا تحتاج قيمة — وجودها يعني "تفعيل" والغيابها يعني "تعطيل". مثل: disabled، checked، readonly، required، autoplay. يمكن كتابتها فقط باسمها دون قيمة.
خصائص data-* المخصصة: HTML5 أضافت إمكانية إنشاء خصائص مخصصة بادئة data- لتخزين بيانات إضافية يحتاجها JavaScript. مثلاً data-user-id="42".
| 1 | <!-- الصياغة الأساسية للخاصية --> |
| 2 | <tagname attribute="value">المحتوى</tagname> |
| 3 | |
| 4 | <!-- خصائص متعددة على نفس العنصر --> |
| 5 | <tagname attr1="val1" attr2="val2" attr3="val3">محتوى</tagname> |
| 6 | |
| 7 | <!-- أمثلة على خصائص شائعة --> |
| 8 | <a href="https://example.com" target="_blank" title="افتح الموقع">رابط</a> |
| 9 | |
| 10 | <img src="photo.jpg" alt="وصف الصورة" width="400" height="300"> |
| 11 | |
| 12 | <input type="email" id="email" class="form-input" placeholder="أدخل بريدك" required> |
| 13 | |
| 14 | <!-- خصائص بوليانية (بدون قيمة) --> |
| 15 | <input type="checkbox" checked> |
| 16 | <button disabled>زر معطّل</button> |
| 17 | <input type="text" readonly value="للقراءة فقط"> |
| 18 | |
| 19 | <!-- خاصية data مخصصة --> |
| 20 | <div id="product" data-product-id="123" data-price="199">منتج</div> |
مثال 1: الخصائص الأكثر استخداماً في الواقع
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>HTML Attributes</title> |
| 6 | <style> |
| 7 | .highlight { background: yellow; } |
| 8 | .big-text { font-size: 1.5rem; } |
| 9 | #main-title { color: #3b82f6; } |
| 10 | </style> |
| 11 | </head> |
| 12 | <body> |
| 13 | |
| 14 | <!-- id: معرّف فريد للصفحة --> |
| 15 | <h1 id="main-title">عنوان الصفحة الرئيسي</h1> |
| 16 | |
| 17 | <!-- class: يمكن استخدامها على عناصر متعددة --> |
| 18 | <p class="highlight">هذه الفقرة مُميّزة باللون الأصفر</p> |
| 19 | <span class="highlight big-text">نص كبير ومميز بلونين معاً</span> |
| 20 | |
| 21 | <!-- style: تنسيق مباشر inline --> |
| 22 | <p style="color: red; font-weight: bold;">نص أحمر عريض بالتنسيق المباشر</p> |
| 23 | |
| 24 | <!-- href: وجهة الرابط | target: يفتح في تبويب جديد --> |
| 25 | <a href="https://nouvil.com" target="_blank" rel="noopener"> |
| 26 | افتح نوفيل في تبويب جديد |
| 27 | </a> |
| 28 | |
| 29 | <!-- src: مصدر الصورة | alt: النص البديل (مهم للإمكانية والـ SEO) --> |
| 30 | <img src="logo.png" alt="شعار الموقع" width="200" height="60"> |
| 31 | |
| 32 | <!-- hidden: إخفاء العنصر --> |
| 33 | <div hidden>هذا النص مخفي لكنه موجود في الكود</div> |
| 34 | |
| 35 | <!-- title: نص يظهر عند التحويم --> |
| 36 | <abbr title="HyperText Markup Language">HTML</abbr> |
| 37 | |
| 38 | </body> |
| 39 | </html> |
مثال 2: خصائص data-* المخصصة مع JavaScript
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head><meta charset="UTF-8"><title>data attributes</title></head> |
| 4 | <body> |
| 5 | |
| 6 | <!-- تخزين بيانات إضافية في العناصر --> |
| 7 | <div class="product-card" |
| 8 | data-product-id="42" |
| 9 | data-price="299" |
| 10 | data-category="electronics" |
| 11 | onclick="showProductInfo(this)"> |
| 12 | <h3>جهاز لوحي</h3> |
| 13 | <p>اضغط لرؤية المعلومات</p> |
| 14 | </div> |
| 15 | |
| 16 | <div id="info-box"></div> |
| 17 | |
| 18 | <script> |
| 19 | function showProductInfo(el) { |
| 20 | // قراءة خصائص data بسهولة عبر dataset |
| 21 | const id = el.dataset.productId; // "42" |
| 22 | const price = el.dataset.price; // "299" |
| 23 | const cat = el.dataset.category; // "electronics" |
| 24 | |
| 25 | document.getElementById('info-box').textContent = |
| 26 | 'المنتج #' + id + ' | السعر: ' + price + ' ج.م | الفئة: ' + cat; |
| 27 | } |
| 28 | </script> |
| 29 | |
| 30 | </body> |
| 31 | </html> |