HTML इंटरव्यू प्रेप

फ़र्ज़ करें आप किसी बड़े job interview के लिए practice कर रहे हैं। आपने सारी complex tech पढ़ ली है, लेकिन जब आप बैठते हैं, तो interviewer साधारण, foundational questions से शुरू करता है, जैसे: 'हम divs की बजाय semantic HTML क्यों इस्तेमाल करते हैं?' या 'CSS Box Model widths कैसे calculate करता है?' यही foundational questions average coders को असली experts से अलग करते हैं। HTML concepts को साफ-साफ समझाना जानना आपके अगले technical interview में अच्छा perform करने के लिए ज़रूरी है। यह guide सबसे common HTML interview topics को कवर करती है, साथ में साफ, professional explanations और code examples भी।

In this page:

Semantic HTML समझाना
CSS बॉक्स मॉडल समझाना
स्क्रिप्ट प्लेसमेंट: defer बनाम async
लोकल वेब स्टोरेज ऑप्शन्स की तुलना करना
एक्सेसिबिलिटी बेस्ट प्रैक्टिसेज हैंडल करना

Semantic HTML समझाना

Interviewers अक्सर आपसे यह समझाने को कहते हैं कि semantic HTML क्यों ज़रूरी है। semantic tags (जैसे header, article, और nav) browsers और developers दोनों को अपना meaning स्पष्ट रूप से बताते हैं, जो SEO और accessibility दोनों के लिए महत्वपूर्ण है।

Note: समझाएं कि semantic elements layout landmarks की तरह काम करते हैं, जो सर्च इंजनों को आपके content को index करने और screen readers को आपके page को navigate करने में मदद करते हैं।

Warning: सिर्फ यह न कहें कि semantic HTML 'ज़्यादा साफ दिखता है'; measurable accessibility और SEO benefits पर focus करें।

उदाहरण: Explaining Semantic HTML

markup

<article>
  <header>Post title</header>
  <p>Post content</p>
</article>

CSS बॉक्स मॉडल समझाना

CSS Box Model web design की नींव है। यह तय करता है कि elements screen पर कैसे sized और spaced होते हैं, अंदर से बाहर की ओर चार layers stack करते हुए: Content, Padding, Border, और Margin।

Note: समझाएं कि box-sizing: border-box; सेट करने से padding और borders को अपनी width calculations में शामिल करके layout sizing आसान हो जाती है।

Warning: padding और borders element widths को कैसे बढ़ाते हैं यह न समझा पाना CSS basics की कमज़ोर समझ दिखा सकता है।

उदाहरण: Explaining the CSS Box Model

markup

<div style="box-sizing: border-box; width: 200px; padding: 10px; border: 1px solid black;">
  Content
</div>

स्क्रिप्ट प्लेसमेंट: defer बनाम async

Interviewers page optimization के बारे में पूछना पसंद करते हैं। डिफ़ॉल्ट रूप से, browsers script files download और run करने के लिए आपके webpage layout को लोड होने से रोक देते हैं, जिससे आपकी site की load speed धीमी हो सकती है।

defer या async attributes इस्तेमाल करने से browser layout rendering को रोके बिना background में scripts download कर सकता है।

Note: समझाएं कि defer scripts को page के render हो जाने के बाद ही चलाता है, जिससे execution order sequential बना रहता है, जबकि async scripts को download होते ही तुरंत चलाता है, जो independent analytics के लिए बिल्कुल सही है।

Warning: defer या async के बिना अपने head section में heavy script files लोड करने से आपके page load times देर से होंगे और blank white screens दिखेंगी।

उदाहरण: Script Placement: defer vs. async

markup

<script src="analytics.js" async></script>
<script src="app.js" defer></script>

लोकल वेब स्टोरेज ऑप्शन्स की तुलना करना

आपको standard storage methods की तुलना करने के लिए तैयार रहना चाहिए: localStorage (browser restarts के बीच persistently बना रहता है), sessionStorage (temporary, session-bound data), और Cookies (session tokens के लिए इस्तेमाल होने वाले छोटे, server-shared variables)।

Note: समझाएं कि web storage पारंपरिक cookies (4KB तक सीमित) से कहीं ज़्यादा तेज़ है और कहीं ज़्यादा data (5MB तक) रख सकता है।

Warning: web storage में passwords जैसा sensitive data store न करें, क्योंकि यह plain text के रूप में save होता है और चोरी होने का खतरा रहता है।

उदाहरण: Comparing Local Web Storage Options

markup

<script>
  localStorage.setItem('theme', 'dark');
  sessionStorage.setItem('step', '2');
  document.cookie = "session=abc123";
</script>

एक्सेसिबिलिटी बेस्ट प्रैक्टिसेज हैंडल करना

Accessible coding (A11y) आधुनिक companies के लिए एक top priority है।

समझाएं कि आप अपने pages को screen readers और keyboard-only users के लिए accessible रखने के लिए buttons और headers जैसे standard, semantic HTML elements और aria-label जैसे ARIA attributes कैसे इस्तेमाल करते हैं।

Note: समझाएं कि native tags इस्तेमाल करना built-in focus और keyboard support अपने आप inherit करने का सबसे अच्छा तरीका है।

Warning: custom focus styles से replace किए बिना browser focus outlines छिपाने के लिए CSS outline: none कभी इस्तेमाल न करें।

उदाहरण: Handling Accessibility Best Practices

markup

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

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Quiz

HTML इंटरव्यू प्रेप

Semantic HTML समझाना

CSS बॉक्स मॉडल समझाना

स्क्रिप्ट प्लेसमेंट: defer बनाम async

लोकल वेब स्टोरेज ऑप्शन्स की तुलना करना

एक्सेसिबिलिटी बेस्ट प्रैक्टिसेज हैंडल करना

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code