शीर्ष 50 HTML साक्षात्कार प्रश्न और उत्तर (2026)

द्वारा: एम्मा डेविस एम्मा डेविस
Hours Updated

HTML इंटरव्यू के लिए तैयार हो रहे हैं? उन सवालों के बारे में ध्यान से सोचें जो आपके सामने आ सकते हैं। ये इंटरव्यू इसलिए महत्वपूर्ण हैं क्योंकि ये तकनीकी गहराई, समस्या-समाधान के तरीकों और ज़रूरी वेब डेवलपमेंट अवधारणाओं के व्यावहारिक अनुप्रयोग को उजागर करते हैं।

HTML भूमिकाओं में अवसर विभिन्न क्षेत्रों में उपलब्ध हैं, नए लोगों से लेकर इस क्षेत्र में 5 या 10 वर्षों का अनुभव रखने वाले वरिष्ठ पेशेवरों तक। नियोक्ता प्रश्नों और उत्तरों के माध्यम से तकनीकी विशेषज्ञता, क्षेत्र विशेषज्ञता और विश्लेषण कौशल का आकलन करते हैं। मज़बूत व्यावसायिक अनुभव, बुनियादी स्तर का अनुभव और बहुमुखी कौशल उम्मीदवारों को बुनियादी, उन्नत और तकनीकी चुनौतियों को पार करने में मदद करते हैं।

हमारा विश्लेषण 60 से ज़्यादा तकनीकी नेताओं द्वारा दी गई प्रतिक्रिया, 45 से ज़्यादा प्रबंधकों की अंतर्दृष्टि और 100 से ज़्यादा पेशेवरों के साथ हुई चर्चाओं पर आधारित है। ये सभी दृष्टिकोण मिलकर विविध अपेक्षाओं और उद्योग की बदलती ज़रूरतों को उजागर करते हैं।

HTML साक्षात्कार प्रश्न और उत्तर

शीर्ष HTML साक्षात्कार प्रश्न और उत्तर

1) HTML क्या है और इसे वेब विकास की रीढ़ क्यों माना जाता है?

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) वेब की आधारभूत भाषा है, जिसे दस्तावेज़ों की संरचना और वेब सामग्री को अर्थ प्रदान करने के लिए डिज़ाइन किया गया है। यह शीर्षकों, अनुच्छेदों, लिंक्स, छवियों और मल्टीमीडिया जैसे तत्वों को परिभाषित करती है, जिससे ब्राउज़र उन्हें व्याख्यायित और प्रस्तुत कर सकते हैं। इसे वेब विकास की रीढ़ इसलिए कहा जाता है क्योंकि हर वेबपेज, चाहे उसकी जटिलता कितनी भी हो, अपने लेआउट और सामग्री को परिभाषित करने के लिए HTML का उपयोग करता है। HTML के बिना, CSS और जैसी तकनीकें Javaस्क्रिप्ट में शैली या हेरफेर करने का कोई आधार नहीं होगा।

👉 निःशुल्क पीडीएफ डाउनलोड: HTML साक्षात्कार प्रश्न

2) HTML और HTML5 के बीच अंतर को उदाहरण सहित समझाइए।

HTML मानक मार्कअप भाषा है, जबकि HTML5 इसका आधुनिक, अधिक शक्तिशाली संस्करण है जिसे 2014 में प्रस्तुत किया गया। HTML5 में अर्थगत तत्व, मल्टीमीडिया समर्थन और APIs शामिल थे, जिससे फ्लैश जैसे तृतीय-पक्ष प्लगइन्स की आवश्यकता समाप्त हो गई।

Feature एचटीएमएल HTML5
सिद्धांत लंबा और जटिल सरल:
मल्टीमीडिया प्लगइन्स की आवश्यकता है ,
ग्राफिक्स मूल रूप से समर्थित नहीं ,
प्रपत्र(फॉर्म्स) सीमित इनपुट नए इनपुट जैसे 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>

4) 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 तत्व क्या हैं और वे क्या लाभ प्रदान करते हैं?

सिमेंटिक तत्व डेवलपर्स और ब्राउज़र दोनों के लिए अपना अर्थ स्पष्ट रूप से बताते हैं। उदाहरणों में शामिल हैं , , , , और .

लाभ:

  • स्क्रीन रीडर्स के लिए पहुंच में सुधार करें.
  • खोज इंजनों को स्पष्ट सामग्री अर्थ (एसईओ) प्रदान करें।
  • कोड की पठनीयता और रखरखाव क्षमता में वृद्धि करें।

उदाहरण:

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

8) ब्लॉक-स्तरीय और इनलाइन तत्वों के बीच अंतर को उदाहरणों के साथ समझाइए।

ब्लॉक-स्तरीय तत्व, जैसे , , और , अपने कंटेनर की पूरी चौड़ाई घेरते हैं और एक नई लाइन से शुरू होते हैं। , , और जैसे इनलाइन तत्व केवल उतनी ही चौड़ाई घेरते हैं जितनी उनकी सामग्री के लिए आवश्यक होती है।

प्रकार उदाहरण विशेषताएँ
ब्लॉक स्तर , नई लाइन पर शुरू करें, पूरी चौड़ाई
इन - लाइन , पाठ के भीतर प्रवाह, चौड़ाई सामग्री पर निर्भर करती है

9) हाइपरलिंक कैसे बनाए जाते हैं और निरपेक्ष और सापेक्ष यूआरएल के बीच क्या अंतर है?

हाइपरलिंक्स टैग का उपयोग करके बनाए जाते हैं href विशेषता।

  • पूर्ण URL: इसमें प्रोटोकॉल और डोमेन सहित पूरा पथ शामिल है।
    उदाहरण: <a href="https://example.com/page.html">Visit</a>
  • सापेक्ष यूआरएल: वर्तमान पृष्ठ से संबंधित फ़ाइल को संदर्भित करता है।
    उदाहरण: <a href="/hi/about.html">About Us</a>

बाह्य संसाधनों से लिंक करते समय निरपेक्ष URL को प्राथमिकता दी जाती है, जबकि समान वेबसाइट के भीतर सापेक्ष URL अधिक प्रभावी होते हैं।

10) की भूमिका क्या है? टैग और उसकी विशेषताएँ?

टैग का उपयोग उपयोगकर्ता इनपुट एकत्र करने और उसे सर्वर पर भेजने के लिए किया जाता है। इसकी दो सबसे महत्वपूर्ण विशेषताएँ हैं:

  • कार्य - परिभाषित करता है कि डेटा कहां भेजा जाएगा।
  • तरीका - HTTP विधि निर्दिष्ट करता है ( GET or POST ).

उदाहरण:

<form action="/hi/submit" method="post">
	<input type="text" name="username">
	<input type="submit">
</form>

संबंधित आलेख

11) HTML5 फॉर्म में उपलब्ध विभिन्न प्रकार के इनपुट फ़ील्ड क्या हैं?

HTML5 ने उपयोगिता में सुधार लाने और निर्भरता को कम करने के लिए नए इनपुट प्रकार पेश किए Javaस्क्रिप्ट सत्यापन। सामान्य प्रकारों में शामिल हैं:

  • पाठ-आधारित: पाठ, पासवर्ड, ईमेल, यूआरएल, खोज, टेलीफोन।
  • दिनांक और समय-आधारित: दिनांक, दिनांकसमय-स्थानीय, महीना, सप्ताह, समय।
  • संख्यात्मक: संख्या, सीमा.
  • बूलियन: चेकबॉक्स, रेडियो.
  • फ़ाइल और रंग: फ़ाइल, रंग.

उदाहरण:

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

ये इनपुट प्रकार ब्राउज़रों को अनुकूलित UI नियंत्रण प्रस्तुत करने की अनुमति देते हैं, जैसे कि तिथियों या रंग चयनकर्ताओं के लिए कैलेंडर, जिससे उपयोगकर्ता अनुभव में सुधार होता है और फ़ॉर्म त्रुटियों में कमी आती है।

12) HTML5 सिमेंटिक टैग जैसे , , , और उपयोग में भिन्नता है?

सामान्य टैगों के स्थान पर अर्थपूर्ण टैगों की शुरुआत की गई। तत्वों और पृष्ठ संरचना को अर्थ प्रदान करते हैं।

टैग उद्देश्य उदाहरण
शीर्ष अनुभाग, अक्सर लोगो/नेविगेशन के साथ साइट नेविगेशन
निचला भाग, कॉपीराइट या लिंक पेज फ़ुटर
संबंधित सामग्री का तार्किक समूहन ब्लॉग अनुभाग
स्वतंत्र सामग्री जो अकेले खड़ी हो सकती है समाचार आलेख

उदाहरण:

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

इन तत्वों के उपयोग से SEO और पहुंच में सुधार होता है।

13) इनलाइन सीएसएस, आंतरिक सीएसएस और बाहरी सीएसएस के बीच अंतर स्पष्ट करें।

HTML में CSS लागू करने के तीन प्राथमिक तरीके हैं:

  1. इनलाइन सीएसएस: का उपयोग करके तत्वों पर सीधे लागू किया जाता है style विशेषता।
    उदाहरण: <p style="color:red;">Text</p>
  2. आंतरिक सीएसएस: के भीतर घोषित tags in the .
  3. बाह्य सीएसएस: एक के माध्यम से जुड़ा हुआ .css फ़ाइल का उपयोग करके .
विधि फायदे नुकसान
इन - लाइन त्वरित, विशिष्ट रखरखाव कठिन, पुन: प्रयोज्य नहीं
आंतरिक एकल पृष्ठ के लिए अच्छा एकाधिक पृष्ठों पर पुन: उपयोग योग्य नहीं
बाहरी पुन: प्रयोज्य, स्वच्छ अतिरिक्त फ़ाइल लोड की आवश्यकता है

सर्वोत्तम अभ्यास यह है कि बाहरी सीएसएस रखरखाव के लिए.

14) HTML इकाइयाँ क्या हैं, और उनका उपयोग क्यों किया जाता है?

HTML एंटिटीज़ विशेष कोड होते हैं जिनका उपयोग HTML दस्तावेज़ों में आरक्षित वर्णों, प्रतीकों या अदृश्य वर्णों को दर्शाने के लिए किया जाता है। ये सुनिश्चित करते हैं कि <, >, और & जैसे वर्ण कोड के रूप में व्याख्या किए जाने के बजाय सही ढंग से प्रदर्शित हों।

सामान्य संस्थाओं के उदाहरण:

  • < →
  • > → >
  • & → &
  • © → ©
  • → नॉन-ब्रेकिंग स्पेस

उदाहरण के लिए:

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

कोड की पठनीयता को बनाए रखने और रेंडरिंग संबंधी समस्याओं को रोकने के लिए एंटिटीज़ महत्वपूर्ण हैं।

15) कैसे करें तत्व कैसे काम करते हैं, और उनके फायदे और नुकसान क्या हैं?

टैग एक HTML पेज को दूसरे के अंदर एम्बेड करने की सुविधा देता है। इसका इस्तेमाल अक्सर वीडियो, मैप या बाहरी विजेट एम्बेड करने के लिए किया जाता है।

लाभ:

  • बाहरी सामग्री का आसान एकीकरण जैसे YouTube या Google मैप्स।
  • मुख्य पृष्ठ से सामग्री को अलग करना.

नुकसान:

  • अतिरिक्त अनुरोधों के कारण लोडिंग कार्य धीमा हो गया।
  • सुरक्षा जोखिम (क्लिकजैकिंग, क्रॉस-साइट स्क्रिप्टिंग)।
  • हमेशा SEO-अनुकूल नहीं.

उदाहरण:

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

आधुनिक विकल्प अक्सर बेहतर नियंत्रण और सुरक्षा के साथ एपीआई या एम्बेडिंग विधियों की सिफारिश करते हैं।

16) HTML में मेटा टैग क्या हैं, और वे SEO को कैसे प्रभावित करते हैं?

मेटा टैग जानकारी के टुकड़े होते हैं जिन्हें मेटा टैग के अंदर रखा जाता है। HTML दस्तावेज़ का एक भाग। ये पृष्ठ के बारे में मेटाडेटा प्रदान करते हैं, लेकिन उपयोगकर्ताओं को प्रदर्शित नहीं होते।

मेटा टैग के प्रमुख प्रकार:

  • Descriptआयन:
  • कीवर्ड (बहिष्कृत):
  • व्यूपोर्ट (उत्तरदायी डिज़ाइन):
  • वर्ण सेट:

खोज इंजन खोज परिणामों में स्निपेट उत्पन्न करने के लिए मेटा विवरण का उपयोग करते हैं, जो सीधे प्रभावित करते हैं क्लिक-थ्रू दर (सीटीआर).

17) HTML लिंक में निरपेक्ष, सापेक्ष और मूल-सापेक्ष पथों के बीच क्या अंतर है?

पथ संदर्भों के आधार पर लिंक तीन अलग-अलग तरीकों से लिखे जा सकते हैं।

प्रकार उदाहरण उदाहरण
पूर्ण https://example.com/images/pic.jpg बाहरी संसाधन
सापेक्ष छवियाँ/pic.jpg समान निर्देशिका या उपनिर्देशिका
रूट-रिश्तेदार /संपत्ति/छवियाँ/pic.jpg डोमेन रूट से

निरपेक्ष पथ संसाधन पुनर्प्राप्ति की गारंटी देते हैं लेकिन पोर्टेबिलिटी को कम करते हैं। सापेक्ष पथ सामग्री को स्थानांतरित करना आसान बनाते हैं, जबकि मूल-सापेक्ष पथ बड़ी साइटों के भीतर एकरूपता सुनिश्चित करते हैं।

18) HTML5 API जैसे कि जियोलोकेशन, वेब स्टोरेज, और Canvaक्या इससे कार्यक्षमता बढ़ेगी?

HTML5 ने ऐसे API प्रस्तुत किए जो प्लगइन्स की आवश्यकता के बिना वेब अनुप्रयोगों की क्षमताओं का विस्तार करते हैं।

  • जियोलोकेशन एपीआई: उपयोगकर्ता का स्थान (अनुमति सहित) प्राप्त करता है।
  • वेब संग्रहण API: प्रदान करता है localStorage और sessionStorage 10MB तक कुंजी-मूल्य डेटा संग्रहीत करने के लिए।
  • Canvaएस एपीआई: वेब पेज पर सीधे आकृतियाँ, चित्र और एनिमेशन बनाने की अनुमति देता है।

उदाहरण: स्थानीय संग्रहण

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

ये API आधुनिक अनुप्रयोगों में अन्तरक्रियाशीलता और प्रदर्शन में सुधार करते हैं।

19) के उपयोग के फायदे और नुकसान बताएं लेआउट डिजाइन के लिए तत्व.

तालिकाओं का उपयोग कभी पृष्ठ लेआउट के लिए किया जाता था, लेकिन अब इनका उपयोग हतोत्साहित किया जाता है।

लाभ:

  • सारणीबद्ध डेटा के लिए संरचना प्रदान करता है।
  • सभी ब्राउज़रों में समर्थित.

नुकसान:

  • दुरुपयोग होने पर स्क्रीन रीडर्स की पहुंच खराब हो जाती है।
  • पृष्ठ रेंडरिंग को धीमा कर देता है.
  • फ्लेक्सबॉक्स और ग्रिड जैसे सीएसएस लेआउट सिस्टम की तुलना में रखरखाव कठिन है।

सर्वश्रेष्ठ प्रणालियां: उपयोग सारणीबद्ध डेटा (जैसे, अनुसूचियां, उत्पाद तुलना) के लिए तथा लेआउट के लिए सी.एस.एस.

20) क्या एक ही HTML एलिमेंट पर कई CSS क्लासेस लागू की जा सकती हैं? यह कैसे संभव है?

हां, HTML एकाधिक CSS क्लासों को रिक्त स्थान से अलग करके एक ही तत्व पर लागू करने की अनुमति देता है। class विशेषता। यह तकनीक मॉड्यूलर, पुन: प्रयोज्य शैलियों को सक्षम बनाती है और दोहराव से बचाती है।

उदाहरण:

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

यहाँ, तत्व तीनों वर्गों से शैलियाँ विरासत में लेता है। यह दृष्टिकोण रचनाशीलता, जिससे डिजाइन अधिक मापनीय और रखरखाव में आसान हो जाता है।

21) इनमें क्या अंतर है? और HTML में?

दोनों और सामान्य कंटेनर हैं, लेकिन वे अलग-अलग उद्देश्यों की पूर्ति करते हैं।

  • एक ब्लॉक-स्तरीय तत्व है जिसका उपयोग सामग्री या लेआउट संरचनाओं के बड़े वर्गों को समूहीकृत करने के लिए किया जाता है।
  • यह एक इनलाइन तत्व है जिसका उपयोग छोटे पाठ अंशों को स्टाइल करने या समूहीकृत करने के लिए किया जाता है।
Feature
डिस्प्ले ब्लॉक स्तर इन - लाइन
प्रयोग लेआउट, कंटेनर पाठ को हाइलाइट करना
उदाहरण लपेटने वाले खंड शब्दों की शैली

उदाहरण:

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

22) तत्व क्या कार्य करता है, और इसका उपयोग कहां किया जाता है?

HTML5 में एलिमेंट एक रिज़ॉल्यूशन-निर्भर, बिटमैप-आधारित ड्राइंग सतह प्रदान करता है। इसका उपयोग ग्राफ़िक्स, एनिमेशन, चार्ट और यहाँ तक कि साधारण गेम को सीधे ब्राउज़र में रेंडर करने के लिए किया जाता है। Javaस्क्रिप्ट API जैसे 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 दस्तावेज़ में अद्वितीय होना चाहिए; एकल तत्व के लिए उपयोग किया जाना चाहिए.
कक्षा एकाधिक तत्वों पर लागू किया जा सकता है; समूहीकरण की अनुमति देता है।

उदाहरण

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

सर्वोत्तम अभ्यास: उपयोग करें id विशिष्ट पहचानकर्ताओं के लिए, और class पुन: प्रयोज्य स्टाइलिंग समूहों के लिए.

24) HTML5 में data-* विशेषताएँ क्या हैं, और उनके क्या लाभ हैं?

RSI 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) ARIA भूमिकाओं और विशेषताओं का उपयोग करके HTML में पहुंच कैसे सुनिश्चित की जाती है?

HTML में सुगम्यता यह सुनिश्चित करती है कि वेब एप्लिकेशन विकलांग व्यक्तियों द्वारा उपयोग योग्य हों। ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) भूमिकाएँ और विशेषताएँ सहायक तकनीकों को अतिरिक्त संदर्भ प्रदान करती हैं।

ARIA विशेषताओं के उदाहरण:

  • role=”navigation” – नेविगेशन मेनू को परिभाषित करता है।
  • aria-label=”Close” – वर्णनात्मक लेबल प्रदान करता है।
  • aria-hidden=”true” – स्क्रीन रीडर्स से तत्वों को छुपाता है।

उदाहरण:

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

ARIA विशेषताओं के साथ अर्थपूर्ण HTML को संयोजित करके, डेवलपर्स समावेशिता में सुधार करते हैं और WCAG जैसे सुगम्यता मानकों का अनुपालन करते हैं।

26) इनलाइन, ब्लॉक और इनलाइन-ब्लॉक तत्वों के बीच क्या अंतर है?

HTML तत्वों को उनके प्रदर्शन व्यवहार के आधार पर वर्गीकृत किया जाता है।

प्रकार विशेषताएँ उदाहरण
इन - लाइन नई लाइन से शुरुआत न करें; केवल विषय-वस्तु जितनी व्यापक हो। ,
खंड एक नई लाइन से शुरू करते हुए, पूरी चौड़ाई पर कब्जा करें। ,
इनलाइन-ब्लॉक इनलाइन की तरह व्यवहार करता है लेकिन ब्लॉक गुणों (ऊंचाई, चौड़ाई) की अनुमति देता है। , शैली

उदाहरण:

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

27) बेहतर प्रदर्शन के लिए आप HTML में छवियों को कैसे अनुकूलित करते हैं?

छवियों को अनुकूलित करने से पृष्ठ लोड समय कम होता है और SEO में सुधार होता है। रणनीतियों में शामिल हैं:

  • जैसे आधुनिक प्रारूपों का उपयोग करना WebP or एवीआईएफ.
  • उत्तरदायी छवियों को लागू करना और srcset.
  • लेआउट शिफ्ट से बचने के लिए चौड़ाई और ऊंचाई विशेषताओं को सेट करना।
  • अपलोड करने से पहले छवियों को संपीड़ित करना।
  • आलसी लोडिंग का उपयोग करना loading="lazy".

उदाहरण:

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

अच्छी तरह से अनुकूलित छवियां उपयोगकर्ता अनुभव को बढ़ाती हैं और कोर वेब विटल्स स्कोर में सुधार करती हैं।

28) ब्राउज़र में HTML पेज का जीवनचक्र क्या है?

HTML पृष्ठ के जीवनचक्र में कई चरण शामिल होते हैं:

  1. पार्सिंग: ब्राउज़र HTML पढ़ता है और डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) का निर्माण करता है।
  2. संसाधन लोडिंग: लिंक किए गए CSS, JS, और छवियाँ प्राप्त की जाती हैं।
  3. प्रतिपादन: ब्राउज़र शैलियाँ और लेआउट तत्व लागू करता है।
  4. पटकथा: Javaयदि आवश्यक हो तो स्क्रिप्ट DOM को निष्पादित और हेरफेर करती है।
  5. इंटरेक्शन: क्लिक और स्क्रॉल जैसी घटनाओं को संसाधित किया जाता है।

इस जीवनचक्र को समझने से डेवलपर्स को अनुकूलन करने में मदद मिलती है रेंडरिंग गति, अवरुद्ध स्क्रिप्ट को न्यूनतम करें, और कुशल पृष्ठ लोड सुनिश्चित करें।

29) सिमेंटिक HTML का उपयोग करने के क्या फायदे और नुकसान हैं?

सिमेंटिक HTML वेब पेजों के अर्थ और पहुंच में सुधार करता है, लेकिन इसमें विचारणीय बातें भी हैं।

फायदे नुकसान
स्क्रीन रीडर्स के लिए पहुंच में सुधार करता है. नये टैग सीखने की आवश्यकता है.
संरचना को स्पष्ट करके SEO को बढ़ाता है। प्रारंभिक विकास समय बढ़ सकता है.
कोड की पठनीयता और रखरखाव आसान। पुराने ब्राउज़रों में सीमित समर्थन हो सकता है।

कुल मिलाकर, इसके फायदे इसके नुकसान से अधिक हैं, जिससे सिमेंटिक 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>

लाभों में मूल नियंत्रण, ऑटोप्ले, लूपिंग और कैप्शन के माध्यम से पहुंच शामिल हैं .

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>

लाभ:

  • फ्लैश पर निर्भरता समाप्त करता है।
  • कैप्शन के साथ अंतर्निहित पहुंच प्रदान करता है।
  • बेहतर प्रदर्शन और सुरक्षा प्रदान करता है.

33) HTML फॉर्म का उपयोग करने के क्या फायदे और नुकसान हैं?

फॉर्म उपयोगकर्ता इनपुट के लिए आवश्यक हैं, लेकिन उनकी अपनी ताकत और कमजोरियां हैं।

फायदे नुकसान
मानकीकृत, सभी ब्राउज़रों में समर्थित। सुरक्षा जोखिमों के प्रति संवेदनशील (जैसे, XSS, CSRF).
बैकएंड सर्वर के साथ आसान एकीकरण. खराब तरीके से डिज़ाइन किये गए फॉर्म उपयोगिता को कम कर देते हैं।
सत्यापन और एकाधिक इनपुट प्रकारों का समर्थन करता है। सुरक्षित डेटा प्रबंधन के लिए HTTPS की आवश्यकता होती है।

सर्वोत्तम अभ्यास: सिमेंटिक फ़ॉर्म टैग, क्लाइंट और सर्वर-साइड सत्यापन, और सुरक्षित ट्रांसमिशन विधियों का उपयोग करें।

34) क्लाइंट-साइड फॉर्म सत्यापन सर्वर-साइड सत्यापन से किस प्रकार भिन्न है?

क्लाइंट-साइड सत्यापन HTML5 विशेषताओं का उपयोग करके ब्राउज़र में किया जाता है ( required, pattern ) या Javaस्क्रिप्ट। यह तत्काल प्रतिक्रिया प्रदान करती है, लेकिन इसे नजरअंदाज भी किया जा सकता है।

सर्वर-साइड सत्यापन यह तब होता है जब डेटा सर्वर पर सबमिट कर दिया जाता है, जिससे सुरक्षा और शुद्धता सुनिश्चित होती है।

पहलू ग्राहक की ओर सर्वर साइड
गति तत्काल प्रतिक्रिया सबमिशन के बाद धीमा
सुरक्षा बाईपास किया जा सकता है ज्यादा सुरक्षित
उदाहरण PHP, Node.js सत्यापन

सर्वोत्तम अभ्यास यह है कि इष्टतम प्रयोज्यता और सुरक्षा के लिए दोनों विधियों को संयोजित किया जाए।

35) इसका उद्देश्य क्या है? viewport उत्तरदायी डिजाइन में मेटा टैग?

RSI viewport मेटा टैग यह सुनिश्चित करता है कि वेब पेज मोबाइल उपकरणों पर ठीक से रेंडर हों। डिफ़ॉल्ट रूप से, कई मोबाइल ब्राउज़र डेस्कटॉप पेजों का आकार छोटा कर देते हैं। व्यूपोर्ट टैग स्केलिंग और चौड़ाई पर नियंत्रण प्रदान करता है।

उदाहरण:

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

लाभ:

  • उत्तरदायी लेआउट सुनिश्चित करता है।
  • ज़ूमिंग संबंधी समस्याओं को रोकता है.
  • कोर वेब वाइटल और छोटी स्क्रीन पर उपयोगिता में सुधार करता है।

इसके बिना, वेबसाइटें मोबाइल डिवाइस पर छोटी और अनुपयोगी दिखाई दे सकती हैं।

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" बाह्य रूप क्रियाओं पर.
  • टोकन के साथ क्रॉस-साइट अनुरोध जालसाजी (सीएसआरएफ) को रोकें।

उदाहरण:

<form method="post" action="/hi/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 इनपुट का वर्णन करने के लिए विशेषताएँ।
  • मल्टीमीडिया: कैप्शन प्रदान करें ( वीडियो के लिए) और प्रतिलिपियाँ।

उदाहरण:

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

सुगम्यता मानकों (WCAG, ARIA) का पालन करने से वेब अनुप्रयोग अधिक उपयोगी और कानूनी रूप से अनुपालन योग्य बन जाते हैं।

41) इसका उपयोग करने के क्या लाभ हैं? मल्टीमीडिया के साथ तत्व?

तत्व का उपयोग अंदर किया जाता है या उपशीर्षक, कैप्शन या विवरण जैसे टेक्स्ट ट्रैक प्रदान करने के लिए। इससे पहुँच और उपयोगिता में सुधार होता है।

लाभ:

  • श्रवण बाधित उपयोगकर्ताओं की सहायता करता है।
  • चूंकि पाठ क्रॉल करने योग्य है, इसलिए SEO में वृद्धि होती है।
  • शोर भरे वातावरण में उपयोगकर्ता अनुभव को बेहतर बनाता है।

उदाहरण:

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

इससे यह सुनिश्चित होता है कि मल्टीमीडिया सामग्री व्यापक दर्शकों तक पहुंच सके।

१) कैसे करता है contenteditable HTML में विशेषता कार्य क्या है?

RSI contenteditable विशेषता उपयोगकर्ताओं को बाहरी उपकरणों के बिना सीधे ब्राउज़र में किसी तत्व की सामग्री को संपादित करने की अनुमति देती है।

उदाहरण:

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

बक्सों का इस्तेमाल करें:

  • ब्राउज़र संपादक.
  • नोट लेने या सीएमएस जैसे अनुप्रयोग।
  • इंटरैक्टिव सुविधाओं का प्रोटोटाइप बनाना।

यद्यपि यह उपयोगी है, लेकिन इसे सावधानी से संभाला जाना चाहिए क्योंकि अनियंत्रित संपादन से सर्वर पर डेटा सबमिट करते समय सुरक्षा जोखिम उत्पन्न हो सकता है।

43) HTML डिज़ाइन में प्रगतिशील संवर्द्धन और सुंदर गिरावट के बीच क्या अंतर है?

ये विभिन्न ब्राउज़र क्षमताओं को संभालने के दो तरीके हैं।

दृष्टिकोण संकल्पना उदाहरण
प्रगतिशील वृद्धि बुनियादी HTML से शुरुआत करें और सक्षम ब्राउज़रों के लिए उन्नत सुविधाएँ जोड़ें। एक फॉर्म मूल HTML के साथ काम करता है, लेकिन इसका उपयोग करता है Javaयदि उपलब्ध हो तो स्क्रिप्ट सत्यापन.
उचित कमी पहले उन्नत सुविधाएं बनाएं और पुराने ब्राउज़रों के लिए फ़ॉलबैक सुनिश्चित करें। कैनवास-आधारित चार्ट एक स्थिर छवि पर वापस आ जाता है।

प्रगतिशील संवर्द्धन आज पसंदीदा रणनीति है क्योंकि यह सार्वभौमिक पहुंच सुनिश्चित करती है।

44) HTML5 में माइक्रोडेटा क्या है, और यह SEO के लिए कैसे उपयोगी है?

माइक्रोडेटा, 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>

लाभ:

  • रिच स्निपेट के साथ दृश्यता बढ़ाता है.
  • खोज इंजन को संदर्भ प्रदान करता है.
  • खोज परिणामों में CTR में सुधार करता है.

45) इनलाइन फ़्रेम का उपयोग करने के क्या फायदे और नुकसान हैं? )?

हमने इस विषय पर चर्चा की पहले भी हमने इस पर चर्चा की है, लेकिन आइये इसके फायदे और नुकसान का सारांश प्रस्तुत करते हैं।

फायदे नुकसान
तृतीय-पक्ष सामग्री का आसान एकीकरण। पृष्ठ प्रदर्शन धीमा कर देता है.
बाह्य संसाधनों को पृथक रखता है। क्लिकजैकिंग के प्रति संवेदनशील.
मानचित्र, वीडियो एम्बेड करने के लिए उपयोगी। एसईओ अनुकूल नहीं, सामग्री अक्सर नजरअंदाज कर दी जाती है।

सर्वोत्तम अभ्यास यह है कि संयम से काम लें और ऐसे API या एम्बेड को प्राथमिकता दें जो अनुकूलन और सुरक्षित एकीकरण की अनुमति देते हों।

46) आप इसका उपयोग कैसे करते हैं? और HTML5 में तत्व क्या हैं?

ये तत्व बिना किसी संक्षिप्त सामग्री अनुभाग का निर्माण करते हैं Javaस्क्रिप्ट।

उदाहरण:

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

लाभ:

  • उपयोगकर्ता सहभागिता में सुधार करता है.
  • पहुंच क्षमता को बढ़ाता है (कीबोर्ड और स्क्रीन रीडर अनुकूल)।
  • कस्टम पर निर्भरता से बचें Javaस्क्रिप्ट समाधान.

यह विशेष रूप से FAQs या प्रगतिशील प्रकटीकरण इंटरफेस के लिए उपयोगी है।

47) HTML और XHTML के बीच मुख्य अंतर क्या हैं?

HTML और XHTML (एक्सटेंसिबल HTML) मार्कअप भाषाएं हैं, लेकिन XHTML सख्त XML नियमों का पालन करता है।

Feature एचटीएमएल एक्सएचटीएमएल
वाक्य - विन्यास लचीला सख्त, XML-अनुपालक
टैग बंद करना ऐच्छिक अनिवार्य
मामले की संवेदनशीलता केस-सेंसिटिव नहीं छोटे अक्षर होने चाहिए
गलती संभालना ब्राउज़र क्षमाशील होते हैं पार्सिंग त्रुटियाँ रेंडरिंग को बाधित करती हैं

उदाहरण: HTML में मान्य है लेकिन होना चाहिए आज, HTML5 ने अपने लचीलेपन के कारण XHTML का बड़े पैमाने पर स्थान ले लिया है।

48) HTML में विभिन्न प्रकार के डॉकटाइप क्या हैं, और वे महत्वपूर्ण क्यों हैं?

डॉकटाइप ब्राउज़र को बताता है कि HTML का कौन सा संस्करण उपयोग करना है।

प्रकार:

  1. एचटीएमएल5: (सरल, आधुनिक).
  2. HTML 4.01 सख्त/संक्रमणकालीन/फ्रेमसेट.
  3. XHTML 1.0 सख्त/संक्रमणकालीन/फ्रेमसेट.

सही डॉकटाइप का उपयोग करने से सभी ब्राउज़रों में एकसमान रेंडरिंग सुनिश्चित होती है। HTML5 डॉकटाइप अब मानक है।

49) आप HTML टैग्स के साथ SEO कैसे सुधारते हैं? , <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 विशेषताएँ अलग-अलग होती हैं, लेकिन उनके उद्देश्य अलग-अलग होते हैं।

टैग उद्देश्य उदाहरण
पृष्ठों के बीच नेविगेट करने के लिए हाइपरलिंक बनाता है। यहाँ क्लिक करें
सीएसएस या आइकन जैसे बाह्य संसाधनों से संबंध परिभाषित करता है।

यह तत्व पृष्ठ के मुख्य भाग में कभी भी प्रकट नहीं होता है, जबकि यह क्लिक करने योग्य पाठ या चित्र बनाता है।

🔍 वास्तविक दुनिया के परिदृश्यों और रणनीतिक प्रतिक्रियाओं के साथ शीर्ष 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 जैसे आधुनिक फ़ॉर्मैट को फ़ॉलबैक के साथ प्रस्तुत करता हूँ।”

4) एक लीगेसी पेज लेआउट के लिए टेबल का इस्तेमाल करता है और वह एक्सेस करने योग्य नहीं होता। आप इसे रीफैक्टरिंग कैसे करेंगे?

साक्षात्कारकर्ता क्या चाहता है: प्रवासन रणनीति, जोखिम प्रबंधन और परीक्षण।

उदाहरण उत्तर (आवश्यक वाक्यांश #1 का उपयोग करता है):

“अपनी पिछली भूमिका में, मैंने टेबल-आधारित संरचनाओं को सिमेंटिक कंटेनरों से बदल दिया जैसे कि , , , और लेआउट के लिए CSS ग्रिड। मैंने जोखिम कम करने के लिए स्लाइस में माइग्रेट किया, प्रत्येक टेबल क्षेत्र को सिमेंटिक सेक्शन में मैप किया और HTML वैलिडेटर और aXe से वैलिडेट किया। मैंने उचित हेडिंग लेवल, लैंडमार्क और कीबोर्ड फ़ोकस ऑर्डर जोड़े। मैंने विज़ुअल रिग्रेशन टेस्ट से समानता की पुष्टि की और स्पेसर इमेज और पुराने एट्रिब्यूट्स को हटाकर प्रदर्शन में सुधार किया।

5) कैसे करें defer और async पर differ, and why should HTML authors care?

साक्षात्कारकर्ता क्या चाहता है: रेंडरिंग और ब्लॉकिंग व्यवहार की समझ।

उदाहरण उत्तर:

"async स्क्रिप्ट उपलब्ध होते ही उसे डाउनलोड और निष्पादित करता है, जिसके कारण निष्पादन में गड़बड़ी हो सकती है। defer पार्सिंग के दौरान डाउनलोड होता है, लेकिन HTML पार्स होने के बाद क्रमानुसार निष्पादन की गारंटी देता है। HTML लेखकों को ध्यान रखना चाहिए क्योंकि ब्लॉकिंग स्क्रिप्ट पहले रेंडर में देरी करती हैं। मैं डिफ़ॉल्ट रूप से defer उन पृष्ठ स्क्रिप्ट के लिए जो DOM तत्परता और रिज़र्व पर निर्भर करती हैं async एनालिटिक्स जैसी स्वतंत्र स्क्रिप्ट के लिए।”

6) उस समय का वर्णन करें जब आपने पिक्सेल-परफेक्ट डिज़ाइन अनुरोधों को अर्थपूर्ण, सुलभ HTML के साथ संतुलित किया था।

साक्षात्कारकर्ता क्या चाहता है: सहयोग, संचार और सिद्धांत आधारित समझौता।

उदाहरण उत्तर (आवश्यक वाक्यांश #2 का उपयोग करता है):

"पिछली स्थिति में, एक डिज़ाइन में नेस्टेड सजावटी रैपर की आवश्यकता थी जो गैर-अर्थपूर्ण मार्कअप को प्रोत्साहित करते थे। मैंने पहले एक अर्थपूर्ण संरचना का प्रस्ताव रखा, फिर अतिरिक्त के बजाय CSS के साथ दृश्य परिणाम प्राप्त किए। तत्वों। मैंने स्क्रीन रीडर नेविगेशन में सुधार प्रदर्शित किए और सहमत घटक API का दस्तावेज़ीकरण किया। इस समझौते ने पहुँच और रखरखाव को बनाए रखते हुए इच्छित रूप को बनाए रखा।"

7) आपको बिना आयामों वाली छवियों और iframe के कारण संचयी लेआउट बदलाव का अनुभव होता है। आपकी क्या योजना है?

साक्षात्कारकर्ता क्या चाहता है: वास्तविक प्रदर्शन संबंधी समस्याओं के व्यावहारिक समाधान।

उदाहरण उत्तर (आवश्यक वाक्यांश #3 का उपयोग करता है):

“अपनी पिछली नौकरी में, मैंने सभी का ऑडिट किया था और तत्वों और जोड़ा आंतरिक width और height स्रोत पहलू अनुपात से मेल खाने वाली विशेषताएँ। मैंने CSS का इस्तेमाल किया max-width: 100% प्रतिक्रियाशील रूप से स्केल करने के लिए और, जब गतिशील सामग्री शामिल थी, तो मैंने सीएसएस लागू किया aspect-ratio प्रॉपर्टी या कंटेनर प्लेसहोल्डर। मैंने परफॉर्मेंस पैनल और लाइटहाउस में सुधारों की पुष्टि की, जिससे लेआउट शिफ्ट में कमी की पुष्टि हुई।”

8) सुलभ HTML तालिकाएँ लिखने के लिए सर्वोत्तम अभ्यास क्या हैं?

साक्षात्कारकर्ता क्या चाहता है: सही संरचनात्मक मार्कअप और सहायक तकनीकी सहायता।

उदाहरण उत्तर:

"मैं उपयोग करता हूं संक्षिप्त शीर्षक के लिए, , , और संरचना के लिए, और हेडर परिभाषित करने के लिए। बहु-स्तरीय हेडर वाली जटिल तालिकाओं के लिए, मैं उपयोग करता हूँ headers और id कोशिकाओं को मैप करने के लिए विशेषताएँ। मैं लेआउट के लिए तालिकाओं का उपयोग करने से बचता हूँ, कोशिकाओं के भीतर सामग्री के लिए पर्याप्त टेक्स्ट कंट्रास्ट सुनिश्चित करता हूँ, और ज़रूरत पड़ने पर संदर्भ के लिए तालिका के बाहर सारांश प्रदान करता हूँ।”

9) जब कई HTML डिलीवरेबल्स ध्यान आकर्षित करने के लिए प्रतिस्पर्धा करते हैं, तो आप तंग समय-सीमाओं को कैसे संभालते हैं?

साक्षात्कारकर्ता क्या चाहता है: दबाव में प्राथमिकता, संचार और गुणवत्ता।

उदाहरण उत्तर (आवश्यक वाक्यांश #4 का उपयोग करता है):

अपनी पिछली भूमिका में, मैंने कार्यों को उपयोगकर्ता प्रभाव और निर्भरता श्रृंखलाओं के आधार पर वर्गीकृत किया। मैंने सबसे ज़्यादा प्रभाव वाले, सबसे कम जोखिम वाले पृष्ठों को पहले वितरित किया, हितधारकों को समझौते के बारे में बताया, और कार्य की एक परिभाषा स्थापित की जिसमें सत्यापन, पहुँच जाँच और बुनियादी प्रदर्शन बजट शामिल थे। मैंने किसी भी विलंबित सुधार का दस्तावेज़ीकरण किया और गुणवत्ता में गिरावट न आए, यह सुनिश्चित करने के लिए अनुवर्ती सुधारों को निर्धारित किया।

10) एकल-पृष्ठ मार्केटिंग साइट को SEO-अनुकूल होना चाहिए, बिना किसी Javaस्क्रिप्ट पर निर्भरता। आप कौन सी HTML रणनीतियाँ लागू करते हैं?

साक्षात्कारकर्ता क्या चाहता है: खोज-अनुकूल, लचीली सामग्री भेजने की क्षमता।

उदाहरण उत्तर:

"मैं सुनिश्चित करता हूं कि प्राथमिक सामग्री HTML में प्रस्तुत की जाए, न कि इंजेक्ट की जाए Javaस्क्रिप्ट। मैं तार्किक शीर्षक पदानुक्रम, वर्णनात्मक का उपयोग करता हूँ और <meta name="description">, कैनोनिकल यूआरएल, और सिमेंटिक सेक्शन। मैं आवश्यकतानुसार उपयुक्त माइक्रोडेटा या JSON-LD के साथ सामग्री को चिह्नित करता हूँ, सार्थक आंतरिक लिंकिंग सुनिश्चित करता हूँ, और पूर्वावलोकन के लिए सोशल मेटा टैग जोड़ता हूँ। मैं दस्तावेज़ की रूपरेखा को सत्यापित करता हूँ और एक स्थिर साइटमैप के साथ क्रॉल करने योग्यता की पुष्टि करता हूँ।

इस पोस्ट को संक्षेप में इस प्रकार लिखें: