← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 20 of 20

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:

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

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>
Related Topics

HTML क्विज़ · HTML वैलिडेशन · HTML ब्राउज़र DevTools · HTML इमेज मैप्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. plain divs के मुकाबले semantic HTML इस्तेमाल करने के specific layout और rendering फायदे explain न कर पाना।
  2. default CSS Box Model के अंदर padding और borders element widths को कैसे बढ़ाते हैं यह गलत समझना।
  3. defer और async script loading attributes को confuse कर देना।
चैप्टर सारांश
  • Semantic HTML SEO और web accessibility के लिए बहुत ज़रूरी है, जो आपके page पर structural landmarks का काम करता है।
  • CSS Box Model element widths को govern करता है; calculations आसान बनाने के लिए box-sizing: border-box इस्तेमाल करें।
  • scripts को background में load करने के लिए defer attribute इस्तेमाल करें, और अपनी site को fast और optimized रखने के लिए local web storage options समझें।
ब्राउज़र सपोर्ट

standard HTML interview concepts, semantic layout tags, और CSS box properties सभी web browsers द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Quiz

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.