أهم 50 سؤالاً وإجابات للمقابلة بتنسيق HTML (2026)

من قبل: فريق التحرير فريق التحرير
Hours تحديث

هل تستعد لمقابلة HTML؟ فكّر جيدًا في الأسئلة التي قد تواجهها. هذه المقابلات مهمة لأنها تكشف عن عمق تقني، وأساليب حل المشكلات، وتطبيق عملي لمفاهيم تطوير الويب الأساسية.

تتوفر فرص العمل في مجال HTML في مختلف المجالات، من المبتدئين إلى المحترفين ذوي الخبرة في هذا المجال لمدة 5 أو 10 سنوات. يُقيّم أصحاب العمل الخبرة الفنية، والخبرة في المجال، ومهارات التحليل من خلال أسئلة وأجوبة. تُساعد الخبرة المهنية القوية، والخبرة العملية، ومجموعة المهارات المتنوعة المرشحين على تجاوز التحديات الأساسية والمتقدمة والتقنية.

يستند تحليلنا إلى آراء أكثر من 60 من القادة التقنيين، ورؤى أكثر من 45 مديرًا، ومناقشات مع أكثر من 100 متخصص. تُبرز هذه الرؤى مجتمعةً التوقعات المتنوعة واحتياجات الصناعة المتطورة.

أسئلة وأجوبة مقابلة HTML

أهم أسئلة وأجوبة مقابلات HTML

1) ما هو HTML ولماذا يعتبر العمود الفقري لتطوير الويب؟

لغة ترميز النص التشعبي (HTML) هي اللغة الأساسية للويب، وهي مصممة لهيكلة المستندات وإضفاء المعنى على محتواها. تُعرّف عناصر مثل العناوين والفقرات والروابط والصور والوسائط المتعددة، مما يسمح للمتصفحات بتفسيرها وعرضها. ويُعتبر أساس تطوير الويب لأن كل صفحة ويب، بغض النظر عن تعقيدها، تستخدم HTML لتحديد تصميمها ومحتواها. وبدون HTML، لا يمكن لتقنيات مثل CSS و... Javaلن يكون للنص أساس للتصميم أو التلاعب.

👉 تحميل ملف PDF مجانًا: أسئلة مقابلة HTML

2) اشرح الفرق بين HTML و HTML5 مع الأمثلة.

HTML هي لغة الترميز القياسية، في حين أن HTML5 هي النسخة الحديثة والأكثر قوة التي تم تقديمها في عام 2014. جلبت HTML5 عناصر دلالية ودعم الوسائط المتعددة وواجهات برمجة التطبيقات التي ألغت الحاجة إلى مكونات إضافية من جهات خارجية مثل Flash.

الميزات HTML HTML5
دوكتايب طويل ومعقد بسيط:
Multimedia يحتاج إلى مكونات إضافية ،
رسومات غير مدعوم بشكل أصلي ،
استمارات طلب خدمة مدخلات محدودة مدخلات جديدة مثل email, date
العلامات الدلالية اعتمد على ، ،

على سبيل المثال:

<video controls>
	<source src="sample.mp4" type="video/mp4">
</video>

3) كيف يتم تنظيم البنية الأساسية لمستند HTML؟

يتبع كل مستند HTML بنية محددة لضمان تفسير المتصفحات للمحتوى بشكل صحيح. في الأعلى، إعلان يحدد استخدام HTML5. يحتوي العنصر على المحتوى بأكمله، مقسمًا إلى و . ال يحتوي على بيانات وصفية، وعنوان، وروابط لـ CSS، ونصوص برمجية، بينما يعرض المحتوى المرئي. على سبيل المثال:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sample Page</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

٤) ما هي العلامات والعناصر في HTML؟ أعطِ أمثلة.

العلامات هي كلمات مفتاحية محصورة بين قوسين معقوفين، تُرشد المتصفح إلى كيفية عرض المحتوى. أما العنصر، فيشير إلى البنية الكاملة التي تتكون من وسم الافتتاح، والمحتوى، ووسمة الإغلاق. على سبيل المثال:

  • افضل و
  • البند: هذه فقرة

بعض العناصر تغلق ذاتيا، مثل و وهذا يعني أنها لا تتطلب علامات إغلاق.

5) ما هي أنواع القوائم المدعومة في HTML، وأين يتم استخدامها؟

يدعم HTML ثلاثة أنواع رئيسية من القوائم:

  1. القائمة المرتبة ( ) - تظهر العناصر بالأرقام أو الحروف.
  2. قائمة غير مرتبة ( ) - تظهر العناصر مع الرصاص.
  3. Descriptقائمة الأيونات ( ) - تستخدم للمصطلحات وتعريفاتها.

على سبيل المثال:

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
</dl>

تُستخدم القوائم بشكل متكرر لقوائم التنقل وتنظيم المحتوى ومصطلحات المفردات.

6) كيف يتم استخدام السمات في HTML، وما هي الأمثلة الشائعة؟

تُوفّر السمات معلومات إضافية لعناصر HTML. تُحدَّد دائمًا ضمن وسم الفتح، وتتبع زوج الاسم والقيمة. من الأمثلة الشائعة:

  • src في لتحديد موقع الصورة.
  • href في وجهة الارتباط التشعبي.
  • id و class للتصفيف و Javaاستهداف النص.
  • alt في الصور لتسهيل الوصول إليها.

على سبيل المثال:

<img src="logo.png" alt="Company Logo">

7) ما هي عناصر HTML الدلالية وما هي الفوائد التي تقدمها؟

العناصر الدلالية تصف معناها بوضوح للمطورين والمتصفحات. ومن الأمثلة على ذلك: ، ، ، ، و .

الفوائد:

  • تحسين إمكانية الوصول لقارئات الشاشة.
  • توفير محتوى أكثر وضوحا لمحركات البحث (SEO).
  • تحسين قابلية قراءة الكود وإمكانية صيانته.

على سبيل المثال:

<article>
	<h2>News Update</h2>
	<p>Latest update about web development trends.</p>
</article>

8) اشرح الفرق بين عناصر مستوى الكتلة والعناصر المضمنة مع الأمثلة.

عناصر على مستوى الكتلة، مثل ، ، و تشغل العناصر المضمنة، مثل و و و، عرض الحاوية بالكامل وتبدأ بسطر جديد. تشغل العناصر المضمنة، مثل و و و، عرضًا يتناسب مع محتواها فقط.

النوع أمثلة الخصائص
مستوى الكتلة ، ابدأ على سطر جديد، بعرض كامل
في النسق ، التدفق داخل النص، العرض يعتمد على المحتوى

9) كيف يتم إنشاء الروابط التشعبية؟ وما الفرق بين الروابط المطلقة والنسبية؟ URLs?

يتم إنشاء الارتباطات التشعبية باستخدام العلامة التي تحتوي على href السمة.

  • مطلق URL: يحتوي على المسار الكامل، بما في ذلك البروتوكول والمجال.
    على سبيل المثال: <a href="https://example.com/page.html">Visit</a>
  • نسبي URL: يشير إلى ملف نسبي للصفحة الحالية.
    على سبيل المثال: <a href="/ar/about.html">About Us</a>

مطلق URLيُفضل استخدام s عند الربط بموارد خارجية، بينما يُفضل استخدام relative. URLتكون هذه العناصر فعالة داخل نفس الموقع الإلكتروني.

10) ما هو دور العلامة وخصائصها؟

ال تُستخدم العلامة لجمع مُدخلات المستخدم وإرسالها إلى الخادم. أهم سماتها هي:

  • عمل - يحدد المكان الذي سيتم إرسال البيانات إليه.
  • طريقة – يحدد طريقة HTTP ( GET or POST ).

على سبيل المثال:

<form action="/ar/submit" method="post">
	<input type="text" name="username">
	<input type="submit">
</form>
لا تفوت:

11) ما هي أنواع حقول الإدخال المختلفة المتوفرة في نماذج HTML5؟

قدم HTML5 أنواع إدخال جديدة لتحسين قابلية الاستخدام وتقليل الاعتماد على Javaالتحقق من صحة النصوص البرمجية. تشمل الأنواع الشائعة ما يلي:

  • مبني على النص: النص، كلمة المرور، البريد الإلكتروني، عنوان URL، البحث، الهاتف.
  • يعتمد على التاريخ والوقت: التاريخ، التاريخ والوقت المحلي، الشهر، الأسبوع، الوقت.
  • رقمي: العدد، المدى.
  • منطقية: مربع الاختيار، الراديو.
  • الملف واللون: ملف، لون.

على سبيل المثال:

<input type="email" placeholder="Enter your email">
<input type="date">
<input type="range" min="1" max="10">

تسمح أنواع الإدخال هذه للمتصفحات بتقديم عناصر تحكم واجهة مستخدم مُحسّنة، مثل التقويمات للتاريخ أو أدوات اختيار الألوان، مما يؤدي إلى تحسين تجربة المستخدم وتقليل أخطاء النموذج.

12) كيف يتم استخدام العلامات الدلالية HTML5 مثل ، ، ، و تختلف في الاستخدام؟

تم تقديم العلامات الدلالية لتحل محل العلامات العامة العناصر وتوفير المعنى لبنية الصفحة.

بطاقة الهدف مثال
القسم العلوي، غالبًا ما يحتوي على شعارات/ملاحة التنقل في الموقع
القسم السفلي، حقوق الطبع والنشر أو الروابط تذييل الصفحة
مجموعة منطقيةping محتوى ذو صلة قسم المدونة
محتوى مستقل يمكن أن يقف بمفرده مقال إخباري

على سبيل المثال:

<article>
	<header><h2>Breaking News</h2></header>
	<p>Details of the story...</p>
	<footer>Author: John Doe</footer>
</article>

يؤدي استخدام هذه العناصر إلى تحسين محركات البحث وإمكانية الوصول.

13) اشرح الفرق بين CSS المضمنة، وCSS الداخلية، وCSS الخارجية.

هناك ثلاث طرق أساسية لتطبيق CSS على HTML:

  1. CSS المضمنة: يتم تطبيقه مباشرة على العناصر باستخدام style السمة.
    على سبيل المثال: <p style="color:red;">Text</p>
  2. CSS داخلي: تم الإعلان عنه في غضون tags in the .
  3. CSS خارجي: مرتبط من خلال .css الملف باستخدام .
الأسلوب المزايا عيوب
في النسق سريع، محدد من الصعب الحفاظ عليها، ولا يمكن إعادة استخدامها
داخلي مناسب لصفحة واحدة غير قابلة لإعادة الاستخدام عبر صفحات متعددة
خارجي قابلة لإعادة الاستخدام ونظيفة يتطلب تحميل ملف إضافي

أفضل ممارسة هي استخدام CSS خارجي من أجل إمكانية الصيانة.

14) ما هي كيانات HTML، ولماذا يتم استخدامها؟

كيانات HTML هي أكواد خاصة تُستخدم لتمثيل الأحرف المحجوزة، أو الرموز، أو الأحرف غير المرئية في مستندات HTML. تضمن هذه الكيانات عرض الأحرف مثل < و > و & بشكل صحيح، بدلاً من تفسيرها كأكواد.

أمثلة على الكيانات المشتركة:

  • < →
  • > → >
  • & → &
  • © → ©
  • → مساحة غير قابلة للكسر

على سبيل المثال:

<p>Use <strong> instead of <b>.</p>

تعتبر الكيانات ضرورية للحفاظ على قابلية قراءة التعليمات البرمجية ومنع مشكلات العرض.

15) كيف؟ ما هي عناصر العمل وما هي مميزاتها وعيوبها؟

ال تسمح هذه العلامة بتضمين صفحة HTML داخل أخرى. تُستخدم عادةً لتضمين مقاطع الفيديو أو الخرائط أو الأدوات الخارجية.

المزايا:

  • التكامل السهل للمحتوى الخارجي مثل YouTube or Google خرائط.
  • فصل المحتوى عن الصفحة الرئيسية.

العيوب:

  • أداء التحميل أبطأ بسبب الطلبات الإضافية.
  • المخاطر الأمنية (اختطاف النقرات، وبرمجة النصوص عبر المواقع).
  • ليس دائمًا صديقًا لمحركات البحث.

على سبيل المثال:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

غالبًا ما توصي البدائل الحديثة باستخدام واجهات برمجة التطبيقات أو طرق التضمين ذات التحكم والأمان الأفضل.

16) ما هي العلامات التعريفية في HTML، وكيف تؤثر على تحسين محركات البحث؟

علامات ميتا هي مقتطفات من المعلومات توضع داخل قسم من مستند HTML. توفر هذه الأقسام بيانات وصفية حول الصفحة ولكنها لا تُعرض للمستخدمين.

أنواع رئيسية من العلامات التعريفية:

  • الوصف:
  • الكلمات الرئيسية (غير مستخدمة):
  • Viewport (تصميم مستجيب):
  • مجموعة الأحرف:

تستخدم محركات البحث أوصاف التعريف لإنشاء مقتطفات في نتائج البحث، مما يؤثر بشكل مباشر على نسبة النقر إلى الظهور (CTR).

17) ما هو الفرق بين المسار المطلق والمسار النسبي والمسار الجذري النسبي في روابط HTML؟

يمكن كتابة الروابط بثلاث طرق مختلفة اعتمادًا على مراجع المسار.

النوع مثال الحلول المقترحة
مطلق https://example.com/images/pic.jpg موارد خارجية
نسبي الصور/pic.jpg نفس الدليل أو الدليل الفرعي
نسبي الجذر /الأصول/الصور/صورة.jpg من جذر المجال

المسارات المطلقة تضمن استرجاع الموارد، لكنها تُقلل من قابلية النقل. تُسهّل المسارات النسبية نقل المحتوى، بينما تضمن المسارات النسبية الجذرية الاتساق داخل المواقع الكبيرة.

18) كيف تعمل واجهات برمجة تطبيقات HTML5 مثل تحديد الموقع الجغرافي وتخزين الويب و Canvaهل يمكن تعزيز الوظيفة؟

قدمت HTML5 واجهات برمجة التطبيقات التي تعمل على توسيع قدرات تطبيقات الويب دون الحاجة إلى المكونات الإضافية.

  • واجهة برمجة تطبيقات تحديد الموقع الجغرافي: استرداد موقع المستخدم (مع الإذن).
  • واجهة برمجة تطبيقات تخزين الويب: يوفر localStorage و sessionStorage لتخزين بيانات القيمة الرئيسية حتى 10 ميجا بايت.
  • Canvaواجهة برمجة التطبيقات: يسمح برسم الأشكال والصور والرسوم المتحركة مباشرة على صفحة الويب.

مثال: التخزين المحلي

localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));

تعمل واجهات برمجة التطبيقات هذه على تحسين التفاعل والأداء في التطبيقات الحديثة.

19) اشرح مزايا وعيوب استخدام عنصر لتصميم التخطيط.

كانت الجداول تُستخدم في السابق لتخطيط الصفحات، ولكن لا يُنصح باستخدامها الآن.

المزايا:

  • يوفر هيكلًا للبيانات الجدولية.
  • مدعوم عبر جميع المتصفحات.

العيوب:

  • ضعف إمكانية الوصول إلى برامج قراءة الشاشة عند إساءة استخدامها.
  • يؤدي إلى إبطاء عرض الصفحة.
  • أصعب في الصيانة مقارنة بأنظمة تخطيط CSS مثل Flexbox وGrid.

أفضل ممارسة: يستخدم مخصص بشكل صارم للبيانات الجدولية (على سبيل المثال، الجداول الزمنية، ومقارنات المنتجات) وCSS للتخطيط.

٢٠) هل يُمكن تطبيق عدة فئات CSS على عنصر HTML واحد؟ كيف يُمكن تحقيق ذلك؟

نعم، يسمح HTML بتطبيق فئات CSS متعددة على عنصر واحد عن طريق فصلها بمسافات في class هذه التقنية تُمكّن من إنشاء أنماط معيارية قابلة لإعادة الاستخدام وتتجنب التكرار.

على سبيل المثال:

<p class="text-bold text-red highlight">Important Notice</p>

هنا، يرث العنصر الأنماط من الفئات الثلاث. يدعم هذا النهج القدرة على التأليف، مما يجعل التصميمات أكثر قابلية للتطوير وأسهل في الصيانة.

21) ما الفرق بين وفي HTML؟

كلاهما وهما حاويات عامة، لكنهما تخدمان أغراضًا مختلفة.

  • <div> هو عنصر على مستوى الكتلة يستخدم لتجميع أقسام أكبر من المحتوى أو هياكل التخطيط.
  • هو عنصر مضمن يستخدم للتنسيق أو التجميعping أجزاء نصية صغيرة.
الميزات <div>
العرض مستوى الكتلة في النسق
الأستعمال التخطيط والحاويات تسليط الضوء على النص
مثال التفافping أقسام كلمات التصميم

على سبيل المثال:

<div class="container">
	<p>This is a <span class="highlight">highlighted</span> word.</p>
</div>

22) كيف عمل العنصر، وأين يتم استخدامه؟

ال يوفر عنصر HTML5 سطح رسم يعتمد على الدقة، ويعتمد على خريطة نقطية. ويُستخدم لعرض الرسومات والرسوم المتحركة والمخططات، وحتى الألعاب البسيطة، مباشرةً في المتصفح. Javaواجهات برمجة التطبيقات النصية مثل getContext("2d") تمكين المطورين من رسم الأشكال والمسارات والصور والنصوص.

على سبيل المثال:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>

تتضمن حالات الاستخدام لوحات المعلومات والتصورات في الوقت الفعلي والرسوم المتحركة التفاعلية.

23) اشرح الفرق بين id و class السمات في HTML.

يبلغ قطر كلاً من id و class هي السمات المستخدمة في التصميم و Javaاستهداف النصوص، ولكنها تختلف في التفرد والتطبيق.

السمة الخصائص مثال
id يجب أن يكون فريدًا في المستند؛ يُستخدم لعنصر واحد.
فئة يمكن تطبيقه على عناصر متعددة؛ يسمح بالتجميعping.

مثال على الاستخدام:

<div id="main-header">Welcome</div>
<p class="text-highlight">Hello</p>

أفضل ممارسة: استخدم id للمعرفات الفريدة، و class لمجموعات التصفيف القابلة لإعادة الاستخدام.

24) ما هي سمات data-* في HTML5، وما هي فوائدها؟

استخدم data-* تسمح السمات للمطورين بتخزين بيانات مخصصة مباشرةً داخل عناصر HTML. تُضاف إلى هذه السمات البادئة data- متبوعة باسم، مما يجعلها في متناول الجميع عبر Javaالنصي.

الفوائد:

  • تمكين تخزين خفيف الوزن للبيانات الوصفية دون التأثير على DOM.
  • مفيد للتطبيقات الديناميكية أو أدوات الإرشاد أو المعالجة من جانب العميل.

على سبيل المثال:

<button data-user="123" data-role="admin">Edit User</button>
<script>
	let btn = document.querySelector("button");
	console.log(btn.dataset.user); // 123
</script>

تعمل هذه الميزة على تعزيز المرونة في إدارة سلوكيات الحالة والديناميكية.

25) كيف يتم ضمان إمكانية الوصول في HTML باستخدام أدوار وسمات ARIA؟

تضمن إمكانية الوصول في HTML إمكانية استخدام تطبيقات الويب من قِبل الأشخاص ذوي الإعاقة. تُوفر أدوار وسمات ARIA (تطبيقات الإنترنت الغنية سهلة الوصول) سياقًا إضافيًا لتقنيات المساعدة.

أمثلة على سمات ARIA:

  • role=”navigation” – يحدد قوائم التنقل.
  • aria-label=”إغلاق” – يوفر تسميات وصفية.
  • aria-hidden=”true” – يخفي العناصر عن برامج قراءة الشاشة.

على سبيل المثال:

<button aria-label="Close window">X</button>

من خلال الجمع بين HTML الدلالي وسمات ARIA، يعمل المطورون على تحسين الشمولية والامتثال لمعايير إمكانية الوصول مثل WCAG.

26) ما هو الفرق بين العناصر المضمنة والكتلة وعناصر inline-block؟

يتم تصنيف عناصر HTML بناءً على سلوك عرضها.

النوع الخصائص أمثلة
في النسق لا تبدأ بسطر جديد؛ فقط بقدر عرض المحتوى. ،
حظر إشغال العرض بالكامل، بدءًا من سطر جديد. ،
كتلة مضمنة يتصرف مثل المضمنة ولكن يسمح بخصائص الكتلة (الارتفاع والعرض). ، مصممة

على سبيل المثال:

<span>Inline</span>
<div>Block</div>
<span style="display:inline-block; width:100px;">Inline-block</span>

27) كيف تقوم بتحسين الصور في HTML للحصول على أداء أفضل؟

يُقلل تحسين الصور من وقت تحميل الصفحة ويُحسّن من أداء محركات البحث. تشمل الاستراتيجيات ما يلي:

  • استخدام التنسيقات الحديثة مثل WEBP or AVIF.
  • تطبيق الصور المستجيبة مع و srcset.
  • تعيين سمات العرض والارتفاع لتجنب تحولات التخطيط.
  • ضغط الصور قبل رفعها.
  • التحميل الكسول باستخدام loading="lazy".

على سبيل المثال:

<img src="image.webp" alt="Optimized Image" loading="lazy">

تعمل الصور المحسّنة جيدًا على تعزيز تجربة المستخدم وتحسين درجات Core Web Vitals.

28) ما هي دورة حياة صفحة HTML في المتصفح؟

تتضمن دورة حياة صفحة HTML عدة خطوات:

  1. تفسير: يقوم المتصفح بقراءة HTML وإنشاء نموذج كائن المستند (DOM).
  2. تحميل الموارد: يتم جلب ملفات CSS وJS والصور المرتبطة.
  3. تقديم: يقوم المتصفح بتطبيق عناصر الأنماط والتخطيطات.
  4. البرمجة: Javaيقوم البرنامج النصي بتنفيذ DOM ومعالجته إذا لزم الأمر.
  5. التفاعل: تتم معالجة الأحداث مثل النقرات والتمرير.

يساعد فهم دورة الحياة هذه المطورين على التحسين سرعة العرض، تقليل البرامج النصية التي تعوق عملية التنزيل، وضمان تحميل الصفحة بكفاءة.

29) ما هي مزايا وعيوب استخدام HTML الدلالي؟

يعمل HTML الدلالي على تحسين المعنى وإمكانية الوصول إلى صفحات الويب ولكنه يحتوي أيضًا على اعتبارات.

المزايا عيوب
تحسين إمكانية الوصول لقارئات الشاشة. يتطلب تعلم علامات جديدة.
يعمل على تعزيز تحسين محركات البحث من خلال توضيح البنية. قد يؤدي إلى زيادة وقت التطوير الأولي.
سهولة قراءة الكود وصيانته. قد يكون الدعم للمتصفحات القديمة محدودًا.

بشكل عام، تفوق المزايا العيوب، مما يجعل HTML الدلالي أفضل ممارسة في التطوير الحديث.

30) كيف الحال العنصر المستخدم للصور المستجيبة؟

ال يتيح العنصر للمطورين توفير مصادر صور متعددة لأجهزة أو دقة شاشة مختلفة. ويستخدم عناصر متداخلة العناصر ذات السمات مثل media و type.

على سبيل المثال:

<picture>
	<source srcset="image-large.webp" media="(min-width: 800px)">
	<source srcset="image-small.webp" media="(max-width: 799px)">
	<img src="fallback.jpg" alt="Responsive Image">
</picture>

يضمن هذا أن تقوم الأجهزة المحمولة بتحميل صور أصغر حجمًا، بينما تتلقى أجهزة سطح المكتب صورًا عالية الدقة، مما يحسن الأداء والاستجابة.

31) ما هي الطرق المختلفة لتضمين الصوت في HTML5؟

يوفر HTML5 عنصر، مما يلغي الحاجة إلى إضافات خارجية. وهو يدعم تنسيقات متعددة مثل MP3يدعم هذا النظام صيغ OGG و WAV لضمان التوافق مع مختلف المتصفحات. ويمكن للمطورين تحديد مصادر متعددة داخل الملف. عنصر يسمح للمتصفح باختيار أول تنسيق مدعوم.

على سبيل المثال:

<audio controls>
	<source src="sound.mp3" type="audio/mpeg">
	<source src="sound.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>

تشمل المزايا عناصر تحكم أصلية، وتشغيل تلقائي، و...pingوإمكانية الوصول مع الترجمة عبرtracك>.

32) كيف عمل العلامة وما هي مميزاتها؟

ال يتيح هذا العنصر تضمين مقاطع الفيديو دون الحاجة إلى مشغلات خارجية. تشمل التنسيقات المدعومة MP4 (H.264) وWebM وOgg. يمكن للمطورين إضافة مصادر وسمات متعددة مثل controls, autoplay, loopو poster.

على سبيل المثال:

<video controls width="600" poster="thumbnail.jpg">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.webm" type="video/webm">
	Your browser does not support the video tag.
</video>

المزايا:

  • يزيل الاعتماد على Flash.
  • يوفر إمكانية الوصول المضمنة مع التسميات التوضيحية.
  • يوفر أداءً وأمانًا أفضل.

33) ما هي مزايا وعيوب استخدام نماذج HTML؟

تعتبر النماذج ضرورية لإدخال البيانات من قبل المستخدم ولكنها لها نقاط قوة ونقاط ضعف.

المزايا عيوب
موحد، مدعوم عبر جميع المتصفحات. عرضة لمخاطر أمنية (على سبيل المثال، XSS، CSRF).
التكامل السهل مع الخوادم الخلفية. تؤدي النماذج المصممة بشكل سيئ إلى تقليل قابلية الاستخدام.
يدعم التحقق وأنواع الإدخال المتعددة. يتطلب HTTPS للتعامل الآمن مع البيانات.

أفضل الممارسات: استخدام علامات النموذج الدلالي، والتحقق من جانب العميل والخادم، وطرق الإرسال الآمنة.

34) كيف يختلف التحقق من صحة النموذج من جانب العميل عن التحقق من صحة النموذج من جانب الخادم؟

التحقق من جانب العميل يتم تنفيذه في المتصفح باستخدام سمات HTML5 ( required, pattern ) أو Javaالنص. يوفر ملاحظات فورية ولكن يمكن تجاوزه.

التحقق من جانب الخادم يحدث بعد إرسال البيانات إلى الخادم، مما يضمن الأمان والصحة.

البعد من جانب العميل من جانب الخادم
سرعة ردود فعل فورية أبطأ بعد الخضوع
الأمن والحماية يمكن تجاوزها أكثر أمنا
مثال PHP، التحقق من صحة Node.js

أفضل ممارسة هي الجمع بين الطريقتين لتحقيق أقصى قدر من سهولة الاستخدام والأمان.

35) ما هو الغرض من viewport علامة التعريف الوصفية في التصميم المستجيب؟

استخدم viewport تضمن علامة التعريف عرض صفحات الويب بشكل صحيح على الأجهزة المحمولة. افتراضيًا، تُقلص العديد من متصفحات الأجهزة المحمولة حجم صفحات سطح المكتب. تتيح علامة العرض التحكم في حجم وعرض الصفحات.

على سبيل المثال:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

الفوائد:

  • ضمان تخطيطات مستجيبة.
  • يمنع مشاكل التكبير.
  • تحسين Core Web Vitals وإمكانية الاستخدام على الشاشات الصغيرة.

بدونها، قد تبدو مواقع الويب صغيرة وغير قابلة للاستخدام على الأجهزة المحمولة.

36) كيف و العناصر تعمل على تحسين تطبيقات HTML5؟

: يوفر طريقة أصلية لإنشاء نوافذ منبثقة نموذجية. يمكن فتحها أو إغلاقها عبر Javaالنص ( show() و close() ).

: يحدد أجزاء HTML القابلة لإعادة الاستخدام والتي لا يتم عرضها حتى يتم تنشيطها بواسطة Javaالنصي.

على سبيل المثال:

<dialog id="myDialog">Hello!</dialog>
<template id="card">
	<div class="card">Reusable content</div>
</template>

الفوائد:

  • يزيل الاعتماد على المكتبات النموذجية الخارجية.
  • يتيح العرض الديناميكي دون تشويش DOM.

37) اشرح الفروق بين , , and .

يمكن أن تؤدي البرامج النصية إلى منع عرض الصفحة إذا لم تتم إدارتها بشكل صحيح.

السمة سلوك الحلول المقترحة
يقوم بحظر تحليل HTML حتى اكتمال التنفيذ. نصوص صغيرة مضمنة
يتم التحميل بشكل غير متزامن، ويتم تنفيذه فورًا بمجرد أن يصبح جاهزًا. التحليلات والإعلانات
يتم التحميل بشكل غير متزامن، ويتم تنفيذه بعد تحليل HTML. البرامج النصية المعتمدة على DOM

على سبيل المثال:

<script src="main.js" defer></script>

باستخدام async و defer يحسن الأداء ويمنع مشاكل حظر العرض.

38) كيف يمكنك ضمان التعامل الآمن مع النماذج في HTML؟

يتطلب أمان النموذج ممارسات HTML وإجراءات الحماية الخلفية.

تشمل الممارسات الرئيسية ما يلي:

  • استخدم دائمًا HTTPS لنقل البيانات.
  • التحقق من صحة المدخلات من جانب العميل ومن جانب الخادم.
  • استخدم autocomplete="off" سمة للحقول الحساسة مثل كلمات المرور.
  • تطبيق rel="noopener noreferrer" حول إجراءات النموذج الخارجي.
  • منع تزوير طلبات المواقع المتقاطعة (CSRF) باستخدام الرموز.

على سبيل المثال:

<form method="post" action="/ar/secure" autocomplete="off">
	<input type="password" name="pwd" required>
</form>

توفر النماذج الآمنة الحماية ضد تسرب البيانات والثغرات الأمنية الشائعة.

39) ما هو الفرق بين ملفات تعريف الارتباط، والتخزين المحلي، والتخزين في الجلسة في HTML5؟

قدم HTML5 تخزين الويب كبديل لملفات تعريف الارتباط.

تخزين السعة حياة تم إرساله باستخدام HTTP؟
ملفات تعريف الارتباط (Cookies) ~4 كيلو بايت حتى تاريخ انتهاء الصلاحية نعم
التخزين المحلي ~5–10 ميجابايت مستمرة حتى يتم التطهير لا
تخزين الجلسة ~5 ميجابايت حتى يتم إغلاق المتصفح/علامة التبويب لا

على سبيل المثال:

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

يعمل تخزين الويب على تحسين الأداء لأنه لا يتم إرسال البيانات مع كل طلب HTTP.

40) كيف يتعامل HTML مع إمكانية الوصول إلى الصور والنماذج والوسائط المتعددة؟

تضمن إمكانية الوصول الإدماج للمستخدمين ذوي الإعاقة.

  • الصور: استعمل alt سمات لقارئات الشاشة.
  • أشكال: أضف مرتبطًا بـ for السمات لوصف المدخلات.
  • الوسائط المتعددة: أضف ترجمة مكتوبة (track> للفيديوهات) والنصوص.

على سبيل المثال:

<img src="logo.png" alt="Company Logo">
<label for="email">Email</label>
<input type="email" id="email">

إن اتباع معايير إمكانية الوصول (WCAG، ARIA) يجعل تطبيقات الويب أكثر قابلية للاستخدام ومتوافقة مع القانون.

41) ما هي فوائد استخدامtrack> عنصر مع وسائط متعددة؟

الtracيتم استخدام العنصر k> داخل أو لتوفير نص tracميزات مثل الترجمة المصاحبة، والتعليقات التوضيحية، والوصف. هذا يحسن إمكانية الوصول وسهولة الاستخدام.

الفوائد:

  • يساعد المستخدمين الذين يعانون من ضعف السمع.
  • يعمل على تعزيز محرك البحث حيث يمكن الزحف إلى النص.
  • تحسين تجربة المستخدم في البيئات الصاخبة.

على سبيل المثال:

<video controls>
	<source src="movie.mp4" type="video/mp4">
	<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

ويضمن هذا إمكانية وصول عدد أكبر من الجمهور إلى المحتوى المتعدد الوسائط.

42) كيف contenteditable عمل السمة في HTML؟

استخدم contenteditable تتيح الخاصية للمستخدمين تحرير محتوى العنصر مباشرة في المتصفح دون الحاجة إلى أدوات خارجية.

على سبيل المثال:

<p contenteditable="true">This paragraph is editable.</p>

استخدم حالات:

  • محررين داخل المتصفح.
  • تطبيقات تدوين الملاحظات أو تطبيقات تشبه أنظمة إدارة المحتوى.
  • نموذج أوليping الميزات التفاعلية.

على الرغم من فائدتها، إلا أنه يجب التعامل معها بحذر، لأن التحرير غير المنضبط قد يؤدي إلى مخاطر أمنية عند إرسال البيانات إلى الخوادم.

43) ما هو الفرق بين التحسين التدريجي والتدهور الرشيق في تصميم HTML؟

هناك طريقتان للتعامل مع قدرات المتصفح المختلفة.

النهج مفهوم وتصميم المنتج مثال
تحسين تدريجي ابدأ باستخدام HTML الأساسي وأضف ميزات متقدمة للمتصفحات القادرة. يعمل النموذج مع HTML الأساسي، لكنه يستخدم Javaالتحقق من صحة النص إذا كان متاحًا.
رشيقة الانحطاط قم أولاً ببناء ميزات متقدمة وتأكد من وجود بديل للمتصفحات القديمة. يعود الرسم البياني المبني على القماش إلى صورة ثابتة.

إن التحسين التدريجي هو الاستراتيجية المفضلة اليوم لأنه يضمن الوصول الشامل.

44) ما هي البيانات الدقيقة في HTML5، وكيف هي مفيدة لتحسين محركات البحث؟

البيانات الدقيقة هي طريقة لتضمين البيانات المنظمة في عناصر HTML باستخدام سمات مثل itemscope, itemtypeو itempropتستخدم محركات البحث هذه الخاصية لتوفير مقتطفات غنية في النتائج.

على سبيل المثال:

<div itemscope itemtype="https://schema.org/Book">
	<span itemprop="name">HTML Mastery</span>
	by <span itemprop="author">Jane Doe</span>
</div>

الفوائد:

  • تعزيز الرؤية باستخدام المقاطع الغنية.
  • يوفر السياق لمحركات البحث.
  • تحسين معدل النقر إلى الظهور في نتائج البحث.

45) ما هي مزايا وعيوب استخدام الإطارات المضمنة ( )؟

لقد تطرقنا إلى لقد ذكرنا ذلك سابقًا، ولكن دعونا نلخص المزايا مقابل العيوب.

المزايا عيوب
التكامل السهل لمحتوى الطرف الثالث. يؤدي إلى إبطاء أداء الصفحة.
يحافظ على عزل الموارد الخارجية. عُرضة للنقرات.
مفيد لتضمين الخرائط ومقاطع الفيديو. غير متوافق مع محركات البحث، ويتم تجاهل المحتوى في كثير من الأحيان.

أفضل ممارسة هي استخدام بشكل مقتصد ويفضل واجهات برمجة التطبيقات أو التضمينات التي تسمح بالتخصيص والتكامل الآمن.

46) كيف تستخدم و العناصر في HTML5؟

هذه العناصر تنشئ أقسام محتوى قابلة للطي بدون Javaالنصي.

على سبيل المثال:

<details>
	<summary>Click for more details</summary>
	<p>This text is revealed when expanded.</p>
</details>

الفوائد:

  • تحسين تفاعل المستخدم.
  • تعزيز إمكانية الوصول (متوافق مع لوحة المفاتيح وقارئ الشاشة).
  • يتجنب الاعتماد على العرف Javaحلول النصوص.

يعد هذا مفيدًا بشكل خاص للأسئلة الشائعة أو واجهات الإفصاح التدريجي.

47) ما هي الفروقات الرئيسية بين HTML وXHTML؟

HTML وXHTML (HTML القابل للتوسيع) هما لغات ترميز، ولكن XHTML تتبع قواعد XML أكثر صرامة.

الميزات HTML XHTML
بناء الجملة موعد تقديم مرن صارم، متوافق مع XML
إغلاق العلامة اختياري إلزامي
حساسية القضية غير حساس لحالة الأحرف يجب أن تكون الأحرف صغيرة
معالجة الخطأ المتصفحات متسامحة أخطاء التحليل تؤدي إلى توقف العرض

مثال: صالحة في HTML ولكن يجب أن تكون في XHTML. واليوم، حلت HTML5 محل XHTML إلى حد كبير بسبب مرونتها.

48) ما هي أنواع المستندات المختلفة في HTML، ولماذا هي مهمة؟

يخبر نوع المستند المتصفح بإصدار HTML الذي يجب استخدامه.

الأنواع:

  1. HTML5: (بسيط، حديث).
  2. HTML 4.01 صارم/انتقالي/مجموعة إطارات.
  3. XHTML 1.0 صارم/انتقالي/مجموعة إطارات.

يضمن استخدام نوع المستند الصحيح عرضًا متسقًا عبر المتصفحات. أصبح نوع مستند HTML5 هو المعيار الآن.

49) كيف يمكنك تحسين محرك البحث باستخدام علامات HTML مثل ، <meta>، و <h1>؟

يعتمد تحسين محركات البحث على الهيكلة الدلالية المناسبة.

  • : يحدد عنوان الصفحة، وهو أمر بالغ الأهمية للتصنيف.
  • : توفير مقتطف لمحركات البحث.
  • العناوين ( - ): تنظيم التسلسل الهرمي للمحتوى.
  • سمات alt على الصور: تحسين ظهور البحث عن الصور.
  • ترميز المخطط: توفير بيانات منظمة.

على سبيل المثال:

<title>HTML Interview Questions</title>
<meta name="description" content="Comprehensive HTML interview guide with answers.">
<h1>Top HTML Questions</h1>

50) ما هي الفروقات بين وفي HTML؟

على الرغم من أن كلاهما يستخدم href تختلف الصفات وتختلف أغراضها.

بطاقة الهدف مثال
إنشاء ارتباطات تشعبية للتنقل بين الصفحات. انقر هنا
يقوم بتعريف العلاقات مع الموارد الخارجية مثل CSS أو الأيقونات.

ال لا يظهر العنصر مطلقًا في نص الصفحة، بينما ينشئ نصًا أو صورًا قابلة للنقر.

🔍 أفضل أسئلة مقابلات HTML مع سيناريوهات واقعية واستجابات استراتيجية

1) ما هو الفرق بين عناصر HTML الدلالية وغير الدلالية، ولماذا هو مهم؟

ما الذي يبحث عنه المُحاور: فهم الدلالات، وإمكانية الوصول، وتحسين محركات البحث، وقابلية الصيانة.

مثال للإجابة:

"العناصر الدلالية مثل ، ، ، و تنقل المعنى والبنية لكلٍّ من المتصفحات والتقنيات المساعدة. فهي تُحسّن إمكانية الوصول من خلال تحسين التنقل بين المعالم، وتساعد محركات البحث على فهم تسلسل المحتوى، وتجعل الكود أكثر قابلية للصيانة. العناصر غير الدلالية مثل ولا تُقدّم أي معنى جوهري، ويُفضّل استخدامها في الحالات التي لا يوجد فيها عنصر دلالي مناسب. أُعطي الأولوية للعناصر الدلالية أولًا، ثم أُضيف إليها فئات أو سمات ARIA عند الضرورة فقط.

2) كيف يمكنك جعل نموذج معقد يمكن الوصول إليه وسهل الاستخدام باستخدام HTML العادي؟

ما الذي يبحث عنه المُحاور: إتقان عناصر التحكم في النماذج الأصلية، والعلامات، والقيود، وسمات إمكانية الوصول.

مثال للإجابة:

"أبدأ بالجمعيات المناسبة، وأستخدم الكلمات المناسبة" type سمات مثل email, telو date، و أضف required, minو pattern للتحقق من صحة القيود. أقوم بتجميع الحقول ذات الصلة مع و .أنا استخدم aria-describedby لربط المدخلات بنصوص المساعدة ورسائل الخطأ، وتوفير معلومات واضحة placeholder النص دون استبدال العلامات، وتمكين autocomplete الرموز المميزة مثل given-name و address-line1"أعتمد على رسائل التحقق الأصلية ولكنني أكملها بملخصات أخطاء يمكن الوصول إليها تركز على الحقل الأول غير الصحيح."

3) اشرح كيف يمكنك تقديم صور مستجيبة بأداء مثالي.

ما الذي يبحث عنه المُحاور: الاستخدام العملي ل ، sizes، و .

مثال للإجابة:

"أنا استخدم مع srcset لتوفير دقة متعددة و sizes سمة تعكس العرض الفعلي للتخطيط. للتوجيه الفني، أغلف الصور بـ مع وسائل الإعلام المشروطة العناصر. أنا دائمًا أدرج العناصر الجوهرية width و height لحجز المساحة وتقليل تحول التخطيط، وأنا أعتبر loading="lazy" للصور أسفل الصفحة. عند الحاجة، أُقدّم صيغًا حديثة مثل AVIF أو WebP مع بدائل.

٤) صفحة قديمة تستخدم جداول للتخطيط، وهي غير قابلة للوصول. كيف يُمكن إعادة تصميمها؟

ما الذي يبحث عنه المُحاور: استراتيجية الهجرة وإدارة المخاطر والاختبار.

إجابة نموذجية (تستخدم العبارة المطلوبة رقم 1):

"في وظيفتي السابقة، استبدلت الهياكل القائمة على الجداول بحاويات دلالية مثل ، ، واستخدمتُ CSS Grid للتصميم. قمتُ بنقل البيانات على مراحل لتقليل المخاطر، ورسم الخرائط.ping قمتُ بتقسيم كل منطقة من الجدول إلى أقسام دلالية، وتحققتُ من صحتها باستخدام مدقق HTML و aXe. أضفتُ مستويات عناوين مناسبة، ومعالم بارزة، وترتيب تركيز لوحة المفاتيح. تحققتُ من التطابق باستخدام اختبارات الانحدار المرئي، وحسّنتُ الأداء بإزالة صور الفواصل والسمات المهملة.

5) كيف defer و async على differ, and why should HTML authors care?

ما الذي يبحث عنه المُحاور: فهم سلوك العرض والحظر.

مثال للإجابة:

"async يقوم بتنزيل البرنامج النصي وتنفيذه بمجرد توفره، مما قد يؤدي إلى تنفيذ خارج الترتيب. defer التنزيلات أثناء التحليل، لكنها تضمن التنفيذ بعد تحليل HTML بالترتيب. ينبغي على مؤلفي HTML الانتباه لأن نصوص الحجب تؤخر العرض الأول. أستخدم افتراضيًا defer لنصوص الصفحات التي تعتمد على جاهزية DOM والاحتياطي async "للبرامج النصية المستقلة مثل التحليلات."

6) صف وقتًا قمت فيه بموازنة طلبات التصميم المثالية مع HTML الدلالي الذي يمكن الوصول إليه.

ما الذي يبحث عنه المُحاور: التعاون والتواصل والمقايضات المبدئية.

إجابة نموذجية (تستخدم العبارة المطلوبة رقم 2):

في وظيفة سابقة، كان التصميم يتطلب أغلفة زخرفية متداخلة تُشجّع على استخدام ترميز غير دلالي. اقترحتُ بنية دلالية أولًا، ثم حققتُ النتائج المرئية باستخدام CSS بدلًا من الإضافات. العناصر. عرضتُ تحسيناتٍ في تصفح قارئ الشاشة، ووثّقتُ واجهة برمجة التطبيقات (API) المتفق عليها. حافظت التسوية على المظهر المقصود مع الحفاظ على إمكانية الوصول والصيانة.

٧) لاحظتَ تغيرًا تراكميًا في التصميم بسبب الصور والإطارات المضمنة بدون أبعاد. ما هي خطتك؟

ما الذي يبحث عنه المُحاور: حلول عملية لقضايا الأداء الحقيقية.

إجابة نموذجية (تستخدم العبارة المطلوبة رقم 3):

"في وظيفتي السابقة، قمت بمراجعة جميع و العناصر والإضافات الجوهرية width و height السمات التي تطابق نسبة العرض إلى الارتفاع للمصدر. استخدمت CSS max-width: 100% للتوسع بشكل متجاوب، وعندما يتعلق الأمر بالمحتوى الديناميكي، قمت بتطبيق CSS aspect-ratio عناصر نائبة للملكية أو الحاوية. تحققتُ من التحسينات في لوحة الأداء والمنارة، مؤكدًا تقليل تحول التخطيط.

8) ما هي أفضل الممارسات لكتابة جداول HTML يمكن الوصول إليها؟

ما الذي يبحث عنه المُحاور: العلامات الهيكلية الصحيحة والدعم الفني المساعد.

مثال للإجابة:

"أنا استخدم للحصول على عنوان موجز، ، ، و للهيكل، و لتحديد الرؤوس. بالنسبة للجداول المعقدة ذات الرؤوس متعددة المستويات، أستخدم headers و id أستخدم سمات لربط الخلايا. أتجنب استخدام الجداول للتخطيط، وأضمن تباينًا كافيًا للنص داخل الخلايا، وأوفر ملخصات خارج الجدول للسياق عند الحاجة.

9) كيف تتعامل مع المواعيد النهائية الضيقة عندما تتنافس عناصر HTML المتعددة على الاهتمام؟

ما الذي يبحث عنه المُحاور: تحديد الأولويات والتواصل والجودة تحت الضغط.

إجابة نموذجية (تستخدم العبارة المطلوبة رقم 4):

في وظيفتي السابقة، كنتُ أُصنّف المهام حسب تأثير المستخدم وسلاسل التبعيات. كنتُ أُسلّم الصفحات ذات التأثير الأعلى والأقل خطورة أولاً، وأُبلغ أصحاب المصلحة بالحلول المُثلى، وأُحدّد تعريفًا للإكمال يشمل التحقق من الصحة، وفحوصات إمكانية الوصول، وميزانيات الأداء الأساسية. وثّقتُ أي تحسينات مُؤجّلة، وجدولتُ إصلاحات المتابعة لضمان عدم تراجع الجودة.

10) يجب أن يكون موقع التسويق المكون من صفحة واحدة صديقًا لمحركات البحث دون Javaالاعتماد على النصوص البرمجية. ما هي استراتيجيات HTML التي تستخدمها؟

ما الذي يبحث عنه المُحاور: القدرة على إرسال محتوى مرن وسهل البحث.

مثال للإجابة:

"أضمن أن يتم تقديم المحتوى الأساسي بتنسيق HTML، وليس حقنه بواسطة Javaنص برمجي. أستخدم تسلسلًا هرميًا منطقيًا للعناوين، ووصفيًا. و <meta name=”description”>، متعارف عليه URLأقوم بتصنيف المحتوى باستخدام البيانات الوصفية المناسبة أو JSON-LD عند الحاجة، وأضمن وجود روابط داخلية ذات معنى، وأضيف علامات تعريفية لوسائل التواصل الاجتماعي لعرض المعاينات. كما أتحقق من صحة هيكل المستند وأؤكد إمكانية الزحف إليه باستخدام خريطة موقع ثابتة.

تلخيص هذه التدوينة بـ: