✅ Practice + Quiz · Lesson 38
Top 25 HTML Interview Questions
Top 25 HTML Interview Questions
Basics (Q1–Q8)
Q1. What is HTML? HyperText Markup Language — the standard markup language that structures content (headings, text, images, links) on web pages. It's a markup, not a programming, language.
Q2. What is the difference between a tag and an element? A tag is the markup itself (<p>); an element is the complete unit — opening tag + content + closing tag.
Q3. What does DOCTYPE do? Is it a tag? It tells the browser which HTML version to use and to render in standards mode. It's a declaration, not a tag;
Q4. Difference between HTML and HTML5? HTML5 is the latest version (2014): simpler doctype, native audio/video, semantic tags, new input types, canvas, local storage, built-in validation.
Q5. What are empty (void) elements? Give examples. Elements with no content and no closing tag: br, hr, img, input, meta, link.
Q6. Difference between <head> and <body>? head holds info ABOUT the page (title, meta, CSS links) — invisible; body holds visible content.
Q7. What is the purpose of the alt attribute? Alternative text for images — shown if the image fails, read by screen readers, and used by Google for image SEO.
Q8. Are HTML tags case-sensitive? No, but lowercase is the universal convention (and required in XHTML/JSX).
Q2. What is the difference between a tag and an element? A tag is the markup itself (<p>); an element is the complete unit — opening tag + content + closing tag.
Q3. What does DOCTYPE do? Is it a tag? It tells the browser which HTML version to use and to render in standards mode. It's a declaration, not a tag;
<!DOCTYPE html> is the HTML5 one.Q4. Difference between HTML and HTML5? HTML5 is the latest version (2014): simpler doctype, native audio/video, semantic tags, new input types, canvas, local storage, built-in validation.
Q5. What are empty (void) elements? Give examples. Elements with no content and no closing tag: br, hr, img, input, meta, link.
Q6. Difference between <head> and <body>? head holds info ABOUT the page (title, meta, CSS links) — invisible; body holds visible content.
Q7. What is the purpose of the alt attribute? Alternative text for images — shown if the image fails, read by screen readers, and used by Google for image SEO.
Q8. Are HTML tags case-sensitive? No, but lowercase is the universal convention (and required in XHTML/JSX).
Elements and Structure (Q9–Q16)
Q9. Difference between block and inline elements? Block elements start on a new line and take full width (div, p, h1); inline elements flow within a line and take only their content's width (span, a, b).
Q10. Difference between div and span? Both are non-semantic containers; div is block-level (grouping sections), span is inline (styling words within text).
Q11. Difference between id and class? id is unique (one per page); class is reusable (many elements). One element can have one id and multiple classes. CSS: # for id, . for class.
Q12. What are semantic tags? Give examples. Tags that describe their meaning/role: header, nav, main, section, article, aside, footer. They improve SEO and accessibility over plain divs.
Q13. Difference between section and article? article is self-contained, independently reusable content (a blog post); section is a thematic part of a page.
Q14. How do you create a hyperlink that opens in a new tab?
Q15. What is the difference between b/strong and i/em? b and i are visual only; strong and em are semantic (importance/emphasis) — same look, but meaningful to screen readers and SEO.
Q16. What are colspan and rowspan? Table attributes to merge cells: colspan merges across columns (wide), rowspan merges down rows (tall).
Q10. Difference between div and span? Both are non-semantic containers; div is block-level (grouping sections), span is inline (styling words within text).
Q11. Difference between id and class? id is unique (one per page); class is reusable (many elements). One element can have one id and multiple classes. CSS: # for id, . for class.
Q12. What are semantic tags? Give examples. Tags that describe their meaning/role: header, nav, main, section, article, aside, footer. They improve SEO and accessibility over plain divs.
Q13. Difference between section and article? article is self-contained, independently reusable content (a blog post); section is a thematic part of a page.
Q14. How do you create a hyperlink that opens in a new tab?
<a href="url" target="_blank" rel="noopener"> — rel="noopener" for security.Q15. What is the difference between b/strong and i/em? b and i are visual only; strong and em are semantic (importance/emphasis) — same look, but meaningful to screen readers and SEO.
Q16. What are colspan and rowspan? Table attributes to merge cells: colspan merges across columns (wide), rowspan merges down rows (tall).
Forms and Media (Q17–Q21)
Q17. Difference between GET and POST? GET sends data in the URL (visible, bookmarkable, ~2KB, for reading); POST sends it in the request body (hidden, no size limit, for saving/changing data).
Q18. Why is the name attribute important in forms? Form data is sent as name=value pairs; a field without a name submits nothing.
Q19. Difference between radio buttons and checkboxes? Radio = choose one from a group (shared name groups them); checkbox = choose many.
Q20. Difference between readonly and disabled? Both prevent editing; readonly still submits its value, disabled does NOT submit and is greyed out.
Q21. Why is server-side validation necessary despite HTML5 validation? Client validation can be bypassed via DevTools or direct requests; only the server can't be skipped. Validate on client for UX, re-validate on server for security.
Q18. Why is the name attribute important in forms? Form data is sent as name=value pairs; a field without a name submits nothing.
Q19. Difference between radio buttons and checkboxes? Radio = choose one from a group (shared name groups them); checkbox = choose many.
Q20. Difference between readonly and disabled? Both prevent editing; readonly still submits its value, disabled does NOT submit and is greyed out.
Q21. Why is server-side validation necessary despite HTML5 validation? Client validation can be bypassed via DevTools or direct requests; only the server can't be skipped. Validate on client for UX, re-validate on server for security.
HTML5 and SEO (Q22–Q25)
Q22. Name key HTML5 features. Semantic tags, native audio/video, new input types, canvas and SVG, localStorage/sessionStorage, geolocation, drag-and-drop, built-in form validation.
Q23. Difference between localStorage and sessionStorage? Same API; localStorage persists until deleted, sessionStorage clears when the tab closes.
Q24. What does the viewport meta tag do? Makes the page fit the device width so it's mobile-friendly; without it, responsive CSS fails on phones.
Q25. Difference between canvas and SVG? canvas is pixel-based (a painted image, blurs when scaled, good for games); SVG is vector-based (real editable elements, sharp at any size, good for logos/icons).
Q23. Difference between localStorage and sessionStorage? Same API; localStorage persists until deleted, sessionStorage clears when the tab closes.
Q24. What does the viewport meta tag do? Makes the page fit the device width so it's mobile-friendly; without it, responsive CSS fails on phones.
Q25. Difference between canvas and SVG? canvas is pixel-based (a painted image, blurs when scaled, good for games); SVG is vector-based (real editable elements, sharp at any size, good for logos/icons).
Interview Tips
How to stand out: Don't just define — explain WHY. "strong is semantic" is okay; "strong looks like b but tells screen readers and Google the text is important" is a hire. Mention the tags' real purpose (SEO, accessibility) and you sound like someone who has built real pages, not memorised a list. Two phrases interviewers love: "semantic HTML for structure, CSS for styling" and "validate on the client for UX, on the server for security." Drop these naturally and you signal genuine understanding.
Basics (Q1–Q8)
Q1. HTML क्या है? HyperText Markup Language — standard markup language जो web pages पर content (headings, text, images, links) की structure बनाती है. यह markup है, programming language नहीं.
Q2. Tag और element में अंतर? Tag markup खुद है (<p>); element पूरी unit है — opening tag + content + closing tag.
Q3. DOCTYPE क्या करता है? क्या यह tag है? Browser को बताता है कौन-सा HTML version use करना और standards mode में render करना. यह declaration है, tag नहीं;
Q4. HTML और HTML5 में अंतर? HTML5 latest version (2014): आसान doctype, native audio/video, semantic tags, नए input types, canvas, local storage, built-in validation.
Q5. Empty (void) elements क्या हैं? Examples दीजिए. बिना content और closing tag वाले: br, hr, img, input, meta, link.
Q6. <head> और <body> में अंतर? head page के BAARE में info रखता है (title, meta, CSS links) — invisible; body दिखने वाला content रखता है.
Q7. alt attribute का उद्देश्य? Images का alternative text — image fail हो तो दिखता है, screen readers पढ़ते हैं, Google image SEO के लिए use करता है.
Q8. क्या HTML tags case-sensitive हैं? नहीं, पर lowercase universal convention है (और XHTML/JSX में ज़रूरी).
Q2. Tag और element में अंतर? Tag markup खुद है (<p>); element पूरी unit है — opening tag + content + closing tag.
Q3. DOCTYPE क्या करता है? क्या यह tag है? Browser को बताता है कौन-सा HTML version use करना और standards mode में render करना. यह declaration है, tag नहीं;
<!DOCTYPE html> HTML5 वाला है.Q4. HTML और HTML5 में अंतर? HTML5 latest version (2014): आसान doctype, native audio/video, semantic tags, नए input types, canvas, local storage, built-in validation.
Q5. Empty (void) elements क्या हैं? Examples दीजिए. बिना content और closing tag वाले: br, hr, img, input, meta, link.
Q6. <head> और <body> में अंतर? head page के BAARE में info रखता है (title, meta, CSS links) — invisible; body दिखने वाला content रखता है.
Q7. alt attribute का उद्देश्य? Images का alternative text — image fail हो तो दिखता है, screen readers पढ़ते हैं, Google image SEO के लिए use करता है.
Q8. क्या HTML tags case-sensitive हैं? नहीं, पर lowercase universal convention है (और XHTML/JSX में ज़रूरी).
Elements और Structure (Q9–Q16)
Q9. Block और inline elements में अंतर? Block elements नई line से शुरू होकर पूरी width लेते हैं (div, p, h1); inline elements line के अंदर बहते हैं और सिर्फ content जितनी width (span, a, b).
Q10. div और span में अंतर? दोनों non-semantic containers; div block-level (sections group), span inline (text में शब्द style).
Q11. id और class में अंतर? id unique (page में एक); class reusable (कई elements). एक element की एक id और कई classes. CSS: id के लिए #, class के लिए .
Q12. Semantic tags क्या हैं? Examples? अपना अर्थ/भूमिका बताने वाले tags: header, nav, main, section, article, aside, footer. सादे divs से SEO और accessibility बेहतर.
Q13. section और article में अंतर? article अपने आप में पूरा, स्वतंत्र रूप से reusable (blog post); section page का thematic हिस्सा.
Q14. नए tab में खुलने वाला hyperlink कैसे?
Q15. b/strong और i/em में अंतर? b और i सिर्फ visual; strong और em semantic (importance/emphasis) — दिखते same, पर screen readers और SEO के लिए meaningful.
Q16. colspan और rowspan क्या हैं? Cells merge करने के table attributes: colspan columns के पार (चौड़ा), rowspan rows में नीचे (लंबा).
Q10. div और span में अंतर? दोनों non-semantic containers; div block-level (sections group), span inline (text में शब्द style).
Q11. id और class में अंतर? id unique (page में एक); class reusable (कई elements). एक element की एक id और कई classes. CSS: id के लिए #, class के लिए .
Q12. Semantic tags क्या हैं? Examples? अपना अर्थ/भूमिका बताने वाले tags: header, nav, main, section, article, aside, footer. सादे divs से SEO और accessibility बेहतर.
Q13. section और article में अंतर? article अपने आप में पूरा, स्वतंत्र रूप से reusable (blog post); section page का thematic हिस्सा.
Q14. नए tab में खुलने वाला hyperlink कैसे?
<a href="url" target="_blank" rel="noopener"> — security के लिए rel="noopener".Q15. b/strong और i/em में अंतर? b और i सिर्फ visual; strong और em semantic (importance/emphasis) — दिखते same, पर screen readers और SEO के लिए meaningful.
Q16. colspan और rowspan क्या हैं? Cells merge करने के table attributes: colspan columns के पार (चौड़ा), rowspan rows में नीचे (लंबा).
Forms और Media (Q17–Q21)
Q17. GET और POST में अंतर? GET data URL में भेजता है (दिखता, bookmarkable, ~2KB, पढ़ने के लिए); POST request body में (छुपा, size limit नहीं, save/change करने के लिए).
Q18. Forms में name attribute क्यों ज़रूरी? Form data name=value जोड़ों में जाता है; बिना name का field कुछ नहीं भेजता.
Q19. Radio buttons और checkboxes में अंतर? Radio = group में से एक (shared name group बनाता है); checkbox = कई.
Q20. readonly और disabled में अंतर? दोनों editing रोकते हैं; readonly फिर भी value submit करता है, disabled submit NAHI करता और grey होता है.
Q21. HTML5 validation के बावजूद server-side validation क्यों ज़रूरी? Client validation DevTools या direct requests से bypass होती है; सिर्फ server skip नहीं होता. UX के लिए client पर, security के लिए server पर validate.
Q18. Forms में name attribute क्यों ज़रूरी? Form data name=value जोड़ों में जाता है; बिना name का field कुछ नहीं भेजता.
Q19. Radio buttons और checkboxes में अंतर? Radio = group में से एक (shared name group बनाता है); checkbox = कई.
Q20. readonly और disabled में अंतर? दोनों editing रोकते हैं; readonly फिर भी value submit करता है, disabled submit NAHI करता और grey होता है.
Q21. HTML5 validation के बावजूद server-side validation क्यों ज़रूरी? Client validation DevTools या direct requests से bypass होती है; सिर्फ server skip नहीं होता. UX के लिए client पर, security के लिए server पर validate.
HTML5 और SEO (Q22–Q25)
Q22. मुख्य HTML5 features बताइए. Semantic tags, native audio/video, नए input types, canvas और SVG, localStorage/sessionStorage, geolocation, drag-and-drop, built-in form validation.
Q23. localStorage और sessionStorage में अंतर? Same API; localStorage delete होने तक रहता है, sessionStorage tab बंद होने पर मिटता है.
Q24. viewport meta tag क्या करता है? Page को device width में fit करके mobile-friendly बनाता है; इसके बिना responsive CSS phones पर fail.
Q25. canvas और SVG में अंतर? canvas pixel-based (painted image, scale पर blur, games के लिए); SVG vector-based (असली editable elements, हर size पर sharp, logos/icons के लिए).
Q23. localStorage और sessionStorage में अंतर? Same API; localStorage delete होने तक रहता है, sessionStorage tab बंद होने पर मिटता है.
Q24. viewport meta tag क्या करता है? Page को device width में fit करके mobile-friendly बनाता है; इसके बिना responsive CSS phones पर fail.
Q25. canvas और SVG में अंतर? canvas pixel-based (painted image, scale पर blur, games के लिए); SVG vector-based (असली editable elements, हर size पर sharp, logos/icons के लिए).
Interview Tips
कैसे अलग दिखें: सिर्फ definition मत दीजिए — KYON समझाइए. "strong semantic है" ठीक है; "strong दिखता b जैसा है पर screen readers और Google को बताता है text ज़रूरी है" — यह hire है. Tags का असली मकसद (SEO, accessibility) बताइए और आप उस इंसान जैसे लगेंगे जिसने असली pages बनाए हैं, list रटी नहीं. दो phrases जो interviewers को पसंद हैं: "semantic HTML structure के लिए, CSS styling के लिए" और "UX के लिए client पर validate, security के लिए server पर." इन्हें स्वाभाविक रूप से बोलिए और असली समझ का संकेत दीजिए.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.