الوسائط: audio وvideo ووسم source

يضمّن <audio> و<video> وسائط قابلة للتشغيل داخل الصفحة مباشرة — بلا إضافة ولا مشغّل خارجي.

• controls يرسم واجهة التشغيل/الإيقاف الأصلية للمتصفح
• داخِل عدة عناصر <source> (.mp4 + .webm)؛ ويشغّل المتصفح أول ما يفهمه
• تمنع المتصفحات التشغيل التلقائي مع صوت — استخدم autoplay muted loop للمقاطع الصامتة المتكررة
• في <video>، تحدّد poster الصورة الثابتة قبل التشغيل

الإطارات: صفحة داخل صفحة

يضمّن <iframe> مستندًا آخر كاملًا داخل مستطيل في صفحتك.

• src هو الرابط؛ وwidth/height تحدّدان حجم الإطار
• title إلزامية لإتاحة الوصول — تسمّي الإطار لقارئات الشاشة
• loading="lazy" يؤجّل التحميل حتى يظهر الإطار في الشاشة
• لا تضمّن إلا مصادر تثق بها — فالإطار يشغّل كود غيرك

النماذج: جمع البيانات المدمج في المتصفح

يجمع <form> المدخلات ويرسلها، وtype الحقل أهمّ قرار.

• action هو الرابط الذي يستقبل البيانات؛ وmethod إمّا GET (في الرابط) أو POST (في الجسم)
• type="email" يتحقق ويعرض لوحة @؛ وtype="number" يقصر على الأرقام؛ وtype="date" يعطي تقويمًا
• اقرن كل حقل بـ <label> مربوط بـ for/id
• <textarea> للنص متعدد الأسطر، و<select> + <option> للقائمة المنسدلة
• <fieldset> + <legend> يجمّعان الحقول المترابطة؛ وأزرار radio بنفس name تصبح مجموعة واحدة يُختار منها واحد

HTML الدلالي: وسوم لها معنى

الوسوم الدلالية تسمّي دورها، وهو ما تقرؤه محركات البحث وقارئات الشاشة والمطوّرون.

• المعالم: <header> و<nav> و<main> و<article> و<section> و<aside> و<footer>
• <main> واحد فقط لكل صفحة
• <article> لكل ما يبقى ذا معنى لو نُشر وحده
• <section> لتجميع موضوعي له عنوان
• <figure>/<figcaption> للوسائط ذات التعليق؛ و<details>/<summary> للوحة قابلة للطي أصلية