استخدم عنصر <dialog> لإنشاء نافذة منبثقة (Modal) بسيطة تحتوي على رسالة "مرحباً" وزر إغلاق، وأعطها المعرف "myModal".

<dialog id="myModal">
    <p>مرحباً بك!</p>
    <form method="dialog">
        <button>إغلاق</button>
    </form>
</dialog>

اجعل صورة (img) قابلة للسحب بواسطة المستخدم باستخدام السمة `draggable`.

<img src="image.jpg" draggable="true" alt="صورة قابلة للسحب">

أنشئ نموذجاً يحتوي على شريطي تمرير (range) وعنصر <output> لعرض ناتج جمعهما. (اكتب كود HTML فقط).

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <input type="range" id="a" value="50"> +
    <input type="range" id="b" value="50"> =
    <output name="result" for="a b">100</output>
</form>

استخدم سمات Microdata (itemscope, itemtype, itemprop) لتعريف "شخص" (Person) اسمه "علي" ووظيفته "مبرمج".

<div itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">علي</span>
    <span itemprop="jobTitle">مبرمج</span>
</div>

اكتب وسم <link> لتحميل ملف خط "font.woff2" بشكل مسبق (preload) لتحسين الأداء.

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

استخدم السمة العامة `hidden` لإخفاء عنصر <p> يحتوي على النص "قريباً" دون استخدام CSS.

<p hidden>قريباً</p>

لديك نص يحتوي على كلمة إنجليزية وسط جملة عربية، وتريد عزل اتجاه الكلمة الإنجليزية لضمان عرضها بشكل صحيح. استخدم الوسم المناسب (<bdi>).

<p>المستخدم <bdi>User123</bdi> فاز باللعبة.</p>

1. قم بتعطيل التدقيق الإملائي (spellcheck) لحقل إدخال نصي.
2. امنع ترجمة اسم شركة (translate="no") داخل فقرة.

<input type="text" spellcheck="false">

<p>مرحباً بكم في <span translate="no">Google</span>.</p>

اكتب وسم meta لتعريف سياسة أمان محتوى (CSP) تسمح بتحميل السكربتات من نفس الموقع (self) فقط.

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

استخدم سمات `srcset` و `sizes` في وسم `img` لتوفير نسخ مختلفة من الصورة بناءً على عرض الشاشة (مثلاً: صورة صغيرة للشاشات حتى 600px، وصورة كبيرة للأكبر).

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 500px, 100vw" 
     alt="صورة متجاوبة">