![]()
: عنصر IMG
آخر تحديث: 2026-09-12
<img>عنصر IMG
عنصر <img> يضم صورة في الصفحة. وهو عنصر فارغ (بدون وسم إغلاق). الخاصيتان src وalt مطلوبتان: src تحدد عنوان الصورة، وalt توفر نصًا بديلًا (مهم لإمكانية الوصول وSEO).
| الفئة | الروابط والوسائط |
|---|---|
| نموذج المحتوى | لا شيء (عنصر فارغ) |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى النصي |
| وسم الإغلاق | ذاتي الإغلاق — لا حاجة لوسم إغلاق |
| الحالة | قياسي |
📝 البنية
<img src="عنوان-الصورة" alt="نص بديل" width="العرض" height="الارتفاع">⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
src | URL | The URL of the image file, either relative or absolute. |
alt | Text | Alternative text shown when the image can't load; also read by screen readers. |
width | Pixels | The display width of the image in pixels. |
height | Pixels | The display height of the image in pixels. |
loading | Keyword | The loading strategy for the image.
|
srcset | URL list | A list of candidate images for different screen sizes (responsive images). |
sizes | Media condition list | Describes the display width of the image at different viewports. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <img> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： لا تحذف الخاصية alt — فهي حاسمة لقارئات الشاشة وSEO. استخدم alt="" للصور الزخرفية البحتة.
❓ الأسئلة الشائعة
Qهل سمة alt مطلوبة لـ ![]()
؟
Aنعم، سمة
alt مطلوبة لإمكانية الوصول. استخدم alt="" (فارغة) للصور الزخرفية البحتة، ونصًا وصفيًا للصور المعلوماتية. تعتمد قارئات الشاشة على alt لوصف الصور للمستخدمين المكفوفين.Qما الفرق بين ![]()
و ؟
A
<img> يحمّل صورة واحدة. <picture> يحتوي على عناصر <source> متعددة لتقديم صور مختلفة بناءً على إطار العرض أو الدقة أو دعم التنسيق (مثل WebP مقابل JPEG).Qهل يجب استخدام سمات width و height في ![]()
؟
Aنعم، قم دائمًا بتضمين سمات
width و height (مطابقة للأبعاد الجوهرية للصورة). هذا يمنع التحول التراكمي في التخطيط (CLS) ويحسين درجات Core Web Vitals.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
