الوسائط في HTML
صفحات الويب ليست مجرد نص — الصور والصوت والفيديو تجعل المحتوى أكثر ثراءً. <img> و <audio> و <video> هي وسوم HTML5 الأساسية الثلاثة لتضمين موارد الوسائط المتعددة.
وسم الصورة
<img> هو وسم فارغ — استخدم src لتحديد مسار الصورة و alt لتوفير نص بديل.
صيغ الصور المدعومة
| الصيغة | المميزات | حالات الاستخدام |
|---|---|---|
| JPG/JPEG | ضغط فقدان، حجم ملف صغير، لا يدعم الشفافية | الصور الفوتوغرافية، الصور المعقدة |
| PNG | ضغط غير فقدان، يدعم خلفية شفافية | الأيقونات، لقطات الشاشة، الصور التي تحتاج شفافية |
| GIF | يدعم الرسوم المتحركة، حد أقصى 256 لونًا | الرسوم المتحركة البسيطة، الأيقونات |
| WebP | صيغة الجيل القادم، ضغط أفضل، يدعم الشفافية | المتصفحات الحديثة |
| SVG | صيغة متجهة، تتكبر بلا فقدان الجودة | الأيقونات، الشعارات، الرسوم البيانية |
💡 توصية: فضّل WebP (حجم صغير، جودة جيدة). استخدم JPG/PNG كبديل للمتصفحات الأقدم. SVG مثالي للأيقونات والشعارات — لا يضبب عند التكبير.
مثال
HTML
<img src="/assets/images/tutorials/html-landscape-photo.webp" alt="صورة منظر طبيعي خلاب" width="400" height="300">
<img src="/assets/images/tutorials/html-company-logo.webp" alt="شعار الشركة" title="انقر للعودة إلى الرئيسية">
📌 سمة alt: تُعرض عندما تفشل الصورة في التحميل؛ تقرأها قارئات الشاشة بصوت عالٍ لمساعدة المستخدمين ضعاف البصر؛ تساعد محركات البحث على فهم محتوى الصورة. لا تهملها أبدًا.
وسم الصوت
الوسم <audio> يضمّن الموسيقى والبودكاست والمؤثرات الصوتية. إضافة سمة controls تعرض عناصر التحكم في التشغيل.
صيغ الصوت المدعومة
| الصيغة | المميزات | دعم المتصفح |
|---|---|---|
| MP3 | ضغط فقدان، حجم ملف صغير، أفضل توافق | جميع المتصفحات |
| OGG | صيغة مفتوحة المصدر، ضغط جيد | Chrome، Firefox، Edge |
| WAV | بدون ضغط، أفضل جودة، حجم ملف كبير | جميع المتصفحات |
| AAC | ضغط أفضل من MP3 | المتصفحات الحديثة |
💡 استراتيجية التوافق: MP3 لديه أفضل توافق، لكن لضمان تشغيله في جميع المتصفحات، استخدم
<source> لتوفير كل من MP3 و OGG.
وسم <source>: احتياطي متعدد الصيغ
المتصفحات المختلفة تدعم صيغ وسائط مختلفة. استخدام وسوم <source> يتيح توفير مصادر صيغ متعددة — يختار المتصفح تلقائيًا أول صيغة يدعمها:
HTML
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
ملاحظات بناء الجملة:
<source>هو وسم فارغ، يوضع داخل<audio>أو<video>srcيحدد مسار ملف الوسائطtypeيحدد نوع MIME للملف، مما يساعد المتصفح على تحديد الدعم بسرعة- يتحقق المتصفح من كل
<source>بالترتيب ويشغل أول صيغة مدعومة - إذا لم تكن هناك صيغ مدعومة، يتم عرض النص الاحتياطي داخل الوسم
أنواع MIME الشائعة:
| الصيغة | نوع MIME |
|---|---|
| MP3 | audio/mpeg |
| OGG الصوت | audio/ogg |
| MP4 | video/mp4 |
| WebM | video/webm |
مثال
HTML
<audio src="music.mp3" controls>
متصفحك لا يدعم تشغيل الصوت.
</audio>
<!-- توافق متعدد الصيغ -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
وسم الفيديو
الوسم <video> يضمّن الفيديو، ويدعم أيضًا controls وأبعاد width/height.
صيغ الفيديو المدعومة
| الصيغة | المميزات | دعم المتصفح |
|---|---|---|
| MP4 | الصيغة الأكثر شيوعًا، ضغط جيد | جميع المتصفحات |
| WebM | صيغة مفتوحة المصدر من Google، حجم أصغر | Chrome، Firefox، Edge |
| OGG | صيغة مفتوحة المصدر | Chrome، Firefox |
💡 استراتيجية التوافق: MP4 لديه أفضل توافق. استخدم
<source> لتوفير كل من MP4 و WebM.
مثال
HTML
<video src="video.mp4" controls width="400">
متصفحك لا يدعم تشغيل الفيديو.
</video>
<!-- صيغ متعددة + صورة غلاف -->
<video controls width="400" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>
💡 نصائح حول صيغ الوسائط: MP3 و MP4 يقدمان أفضل توافق — تقريبًا جميع المتصفحات تدعمهما. WebM هو صيغة مفتوحة من Google بأحجام ملفات أصغر. استخدام
<source> مع صيغ متعددة يتيح للمتصفح اختيار ما يدعمه تلقائيًا.
❓ أسئلة شائعة
س هل سمة
alt إلزامية؟ هل يمكنني حذفها؟ج تضمين
alt دائمًا. она تخدم ثلاثة أغراض: 1) تعرض نصًا بديلًا عندما تفشل الصورة في التحميل، مما يحسن تجربة المستخدم؛ 2) تساعد قارئات الشاشة في وصف الصور للمستخدمين ضعاف البصر؛ 3) تعطي محركات البحث سياقًا حول صورك، مما يعزز SEO. للصور الزخرفية، استخدم alt="" فارغًا لإخبار قارئات الشاشة بتجاهلها.س ما صيغة الصورة التي يجب استخدامها؟ ما الفرق بين JPG و PNG و WebP؟
ج اختر بناءً على الحاجة: 1) JPG مناسب للصور الفوتوغرافية — ضغط فقدان، ملفات صغيرة، بدون شفافية؛ 2) PNG مناسب للأيقونات ولقطات الشاشة — ضغط غير فقدان، يدعم خلفية شفافية، لكن ملفات أكبر؛ 3) WebP هو صيغة الجيل القادم — ضغط أفضل من JPG و PNG، يدعم الشفافية، جميع المتصفحات الحديثة تدعمه. فضّل WebP؛ استخدم JPG/PNG كبديل للمتصفحات الأقدم.
س لماذا يجب تعيين سمات
width و height على الصور؟ج فوائدان: 1) يعرف المتصفح أبعاد الصورة قبل التحميل، مما يحجز المساحة الصحيحة ويمنع تحول التخطيط؛ 2) يساعد على تحسين نتائج Core Web Vitals (مقياس CLS). ملاحظة: إذا قمت بتعيين سمة واحدة فقط، ستُحسب الأخرى proporcionalement. الصور المتجاوبة غالبًا ما تحدد
width فقط وتترك height يتكيف تلقائيًا.س MP3 و MP4 لديهما توافق عالٍ — لماذا أقدم صيغ أخرى؟
ج على الرغم من أن MP3/MP4 لديهما أفضل توافق، فإن الصيغ الأخرى لها مزايا: WebM أصغر، OGG مفتوحة المصدر مجانية، WAV أفضل جودة. الاحتياطي متعدد الصيغ يتيح: 1) لمتصفحات مختلفة الحصول على أفضل تجربة؛ 2) للشبكات الضعيفة اختيار ملفات أصغر؛ 3) الترقية السلسة عندما تكتسب صيغ جديدة دعمًا. التوصية: على الأقل، قدم MP3/MP4 كبديل، أضف WebM/OGG كخيار تحسين.
📖 ملخص
<img>يضمّن الصور؛srcيحدد المسار؛altيوفر نصًا بديلًا<audio>يضمّن الصوت؛controlsيعرض عناصر التحكم في التشغيل<video>يضمّن الفيديو؛ يدعمwidth/heightوصورة غلافposter- استخدم
<source>لتوفير صيغ وسائط متعددة لتوافق المتصفح
📝 تمارين
- تمرين الصورة: أدخل صورة بسمات
altوtitle، ثم غيّرsrcإلى مسار غير صالح ولاحظ كيف يتعامل المتصفح معها. - تضمين مشغل وسائط: استخدم
<audio>و<video>لتضمين ملف صوتي وملف فيديو (يمكنك استخدام موارد متاحة للجمهور عبر الإنترنت).