Hirenix kaise padhata hai
Ek chapter. 90 minute.
Interview ke liye taiyaar.
Har concept ek real-world problem se — jaisa production code mein aata hai, waisa. Ratna nahi padta, samajh aa jaata hai. Har question ka model answer diya hai: interviewer ko exactly kya bolna hai, aur kyun. Phir usi chapter ka AI mock interview.
- 📖Concept, 5 min meinJargon nahi — seedhi baat
- 🛠️Real-world problemJaisa production code mein aata hai
- 💬Model answerInterview mein kya bolna hai
- 🧠FlashcardsRevision 10 min mein
- 🤖AI mock interviewFollow-up bhi poochta hai
- 📊Weak topicsKahan phans rahe ho, pata chale
Farq content ka nahi, filter ka hai — sirf wahi jo production mein actually use hota hai aur interview mein actually poocha jaata hai. Kitaabi topics jo industry mein kahin nahi chalte, wo yahan nahi milenge.
What you’ll learn
- ●HTML kya hai?
- ●Text, headings, lists, links
- Semantic HTMLFree account
- Forms aur inputsFree account
- Links aur mediaFree account
- TablesFree account
- Accessibility (a11y)Free account
- Metadata aur SEOFree account
- RecapFree account
- ●Project: Resume Page
- Project: Signup FormFree account
- Project: Blog ArticleFree account
HTML kya hai?
Ek ghar ke construction ko socho. Paint ke colours (CSS) ya kaam karti doorbell aur switches (JavaScript) se pehle, ek ghar ko apna skeleton chahiye — walls, rooms, doors, ek roof. Ye skeleton batata hai har space kya hai: ye bedroom hai, ye kitchen hai, ye front door hai. Koi skeleton ko interior decorator ke kaam se confuse nahi karta — same ghar pe alag-alag jobs hain.
In HTML, wahi skeleton tum banate ho. HTML (HyperText Markup Language) content ko mark karti hai ye batane ke liye ki wo kya hai — ek heading, ek paragraph, ek list, ek link — ye nahi ki dikhta kaisa hai (wo CSS ka kaam hai) ya click pe kya karta hai (wo JavaScript ka kaam hai). Browser tumhari HTML file padhta hai aur usse page ka structure banata hai.
🌍 Real-world example: Ek news website ke article ka title heading ke roop mein mark hota hai, byline ek paragraph ke roop mein, aur "related articles" ek list ke roop mein — chahe designer baad mein koi bhi colour ya font chune.
💡 Tag = marker khud, jaise
<p>(opening) ya</p>(closing) — bas bracket wala part. 💡 Element = tag PLUS uska content PLUS closing tag:<p>Hello</p>ek element hai. 💡 Attribute = extra information jo opening tag ke andar likhi jaati hai,name="value"pairs ke roop mein — jaiseclass="intro"<p class="intro">ke andar. 💡 DOM (Document Object Model) = tree-shaped structure jo browser tumhari HTML padhne ke baad memory mein banata hai — har element us tree mein ek node ban jaata hai, aur ye wahi cheez hai jise JavaScript actually manipulate karta hai.
Har HTML file ek jaisi shuru hoti hai: <!DOCTYPE html> browser ko batata hai "mujhe modern HTML5 rules se parse karo" — ye khud koi tag ya element nahi hai, bas ek one-line declaration hai. Phir <html lang="en"> sab kuch wrap karta hai. Uske andar, <head> metadata rakhta hai jo page pe dikhta nahi (title, character encoding, stylesheets ke links), aur <body> wo sab rakhta hai jo dikhta HAI — text, images, buttons, actual page content.
Ek aur classic interview point: HTML programming language nahi hai. Isme koi variables nahi, loops nahi, if conditions nahi, koi logic nahi — ye sirf structure describe karti hai elements aur attributes use karke. Web ki logic layer JavaScript hai; HTML bas batati hai ki kya exist karta hai.
Standard definition (interview me bolo): HTML (HyperText Markup Language) is the markup language used to structure content on the web; the browser parses an HTML document into the DOM, a tree of elements it can render and that JavaScript can manipulate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome</h1>
<p class="intro">This is my first HTML page.</p>
</body>
</html>Text, headings, lists, links
Socho tum ek book manuscript likh rahe ho editor ke liye. Tum sirf text ki deewar nahi daalte — tum mark karte ho chapter titles, section titles, normal paragraphs, ingredients ki bullet list, instructions ke numbered steps, aur dusre pages ya sources ki taraf ishaara karne wale footnote references. Editor ko (aur screen reader ko, aur Google ko) pata hona chahiye kaunsa text kya hai — sirf font kitna bada dikhta hai wo nahi.
HTML mein, <h1> se <h6> tak wahi chapter/section titles hain — <h1> book ka title hai, <h2> ek chapter, <h3> ek sub-section, aur aise hi <h6> tak. Sab milke page ka document outline banate hain, bilkul table of contents ki tarah nested. <p> ek normal paragraph hai. <ul> (unordered list) tumhari bullet list hai — order matter nahi karta; <ol> (ordered list) tumhare numbered steps hain — order matter karta hai. Dono ke andar har item ek <li> hota hai. <a href="..."> footnote reference hai — click karo aur kahin jump kar jaate ho: dusra page (about.html), dusri site (https://example.com), ya isi page ki koi jagah (#contact). Emphasis ke liye, <strong> bolta hai "ye word important hai" aur <em> bolta hai "ise stress ke saath bolo" — ye meaning hai; <b> aur <i> sirf look badalte hain (bold/italic), koi meaning nahi jodte.
🌍 Real-world example: Ek recipe page —
<h1>Chai Recipe</h1>, phir<h2>Ingredients</h2>with a<ul>of items,<h2>Steps</h2>with an<ol>of instructions, aur ek<p>with<strong>Tip:</strong>plus ek<a href="#steps">jump to steps</a>link.
💡 Document outline = nested h1→h6 structure jise screen reader ya browser page ke table of contents ki tarah list kar sakta hai. 💡 Relative URL = current page se ek path (
about.html,../images/pic.png) — domain ki zaroorat nahi. 💡 Absolute URL = poora address including protocol + domain (https://example.com/about). 💡 Fragment link =href="#id"isi page pe usidwale element pe jump karta hai.
Standard definition (interview me bolo): Headings (h1–h6) define a page's document outline and must not skip levels for styling reasons; <p> marks a paragraph; <ul>/<ol> with <li> mark unordered/ordered lists; <a href> creates a hyperlink using a relative, absolute, or fragment URL; <strong>/<em> add semantic emphasis while <b>/<i> are purely presentational with no meaning.
<h1>Chai Recipe</h1>
<p>A quick <strong>5-minute</strong> chai for one cup.</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup water</li>
<li>1 tsp tea leaves</li>
<li>Milk and sugar to taste</li>
</ul>
<h2 id="steps">Steps</h2>
<ol>
<li>Boil the water.</li>
<li>Add tea leaves and simmer.</li>
<li>Add milk and sugar, then strain.</li>
</ol>
<p><em>Note:</em> for more recipes visit our <a href="recipes.html">recipes page</a>,
or read about us <a href="https://example.com/about">on our main site</a>,
or jump back to <a href="#steps">the steps above</a>.</p>Project: Resume Page
Kya bana rahe hain: Ek real, semantic HTML resume/CV page — bilkul wahi page jo tum yourname.com pe deploy karoge aur apni job applications se link karoge. Ek header naam aur contact links ke saath, ek Experience section, ek Education section, ek Skills section, aur ek photo — har piece of meaning ke liye sahi element se banaya, <div> soup se nahi. Ye HTML chapter ka entry project hai — ye Topics 1 aur 2 se sab kuch lock kar deta hai (structure, headings, lists, links) aur semantics (Topic 3) ka preview deta hai, us word se formally milne se pehle hi.
Important scope note: ye project structure only hai. Koi colours nahi, koi fonts nahi, koi spacing nahi — wo CSS chapter hai, agla. Abhi ek recruiter ka browser is page ko plain black-on-white mein default browser styling ke saath render karega, aur ye is stage ke liye sahi hai — hum pehle meaning sahi kar rahe hain, look baad mein aata hai. Ek resume jo real HTML se sahi structure ho, wo ek aisa page bhi hai jise screen reader theek se bol sake, aur jise ATS (Applicant Tracking System) parser clean text nikaal sake — dono is step ko sahi se karne ke real payoffs hain.
Har step type karo, file save karo, browser mein kholo (.html file pe double-click karo, ya Live Server extension use karo), aur agle step pe jaane se pehle result dekho.
Step 1 — Document skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditi Sharma — Resume</title>
</head>
<body>
</body>
</html>
Ho ye raha hai: <!DOCTYPE html> bilkul pehli line hai — ye browser ko batati hai "ise modern standards mode mein render karo," aur ye ek declaration hai, HTML element nahi (koi closing tag nahi, andar kuch nest karne wala nahi). <html lang="en"> poore document ko wrap karta hai; lang yahan sach mein matter karta hai — screen reader isse use karta hai sahi pronunciation rules chunne ke liye jab wo tumhara resume assistive tech use kar rahe recruiter ko bol ke sunata hai.
<head> ke andar (metadata — yahan kuch bhi page pe draw nahi hota) hum teen cheezein daalte hain jo har page ko chahiye: <meta charset="UTF-8"> (taaki accented characters aur symbols sahi render hon), viewport meta (iske bina, mobile browsers page ko zoomed-out aur chhota render karte hain — ek recruiter jo tumhara resume link phone pe khole use padhne ke liye fight karna padega), aur <title> — ye wahi hai jo browser tab mein dikhta hai aur bilkul wahi hai jo clickable headline ban ke dikhta hai agar tumhara resume page kabhi search engine mein index ho jaye. Apna real naam use karo, "My Resume" nahi — recruiters naam search karte hain.
Jo bhi visible hai wo <body> ke andar jaata hai — wahi Step 2 se aage fill hoga.
Step 2 — Header: naam + contact
<header>
<h1>Aditi Sharma</h1>
<p>Frontend Developer</p>
<ul>
<li><a href="mailto:aditi.sharma@example.com">aditi.sharma@example.com</a></li>
<li><a href="tel:+911234567890">+91 12345 67890</a></li>
<li><a href="https://github.com/aditisharma">github.com/aditisharma</a></li>
<li><a href="https://linkedin.com/in/aditisharma">linkedin.com/in/aditisharma</a></li>
</ul>
</header>
Ho ye raha hai: <header> ek semantic element hai jiska matlab hai "jis cheez ke andar hai uska intro/branding block" — yahan, <body> ke top level pe, ye page header hai: tumhara identity card. Uske andar, <h1>Aditi Sharma</h1> is page ka ek aur sirf ek <h1> hai — heading outline ka top. Resume page pe exactly ek person ka naam hi uska sabse important heading hota hai; niche ka har section title <h2> hoga, kabhi dusra <h1> nahi.
Job title <p>Frontend Developer</p> ek plain paragraph hai — ye ek caption hai, heading nahi, kyunki ye content ka naya section shuru nahi karta.
Contact info ek genuine items ki list hai — bilkul wahi jiske liye <ul>/<li> bane hain, to hum links ko <br> se alag karne ke bajaye inhe use karte hain (ek classic gotcha: <br> presentational line-breaking hai, cheezon ki list ko markup karne ka tareeka nahi). Har contact method ek real, working <a href> hai: mailto: visitor ka email client tumhare liye pre-addressed khol deta hai, tel: ek tap mein phone tumhara number dial kar deta hai, aur GitHub/LinkedIn links plain absolute URLs hain. Real, clickable contact info ek recruiter ke liye us text se zyada valuable hai jo unhe retype karna padta.
Step 3 — Ek <main>, poori resume body ko wrap karke
<main>
</main>
Ho ye raha hai: <main> page ka primary content mark karta hai — jo bhi header/footer chrome nahi hai wo sab. Yaad rakhne wala rule: har page pe exactly ek <main> hona chahiye. Jo sections tum abhi add karne wale ho (Summary, Experience, Education, Skills) sab is ek <main> ke andar rehte hain, siblings ki tarah — ek dusre ke andar nested nahi, <header> ke andar bhi nested nahi. Ek screen reader user ek keystroke mein seedha <main> pe jump kar sakta hai aur tumhara header skip kar sakta hai — yahi accessibility payoff hai real landmark element use karne ka, <div id="main"> ke bajaye.
Step 4 — Summary section
<section>
<h2>Summary</h2>
<p>Frontend developer with 1 year of experience building responsive, accessible web interfaces with React and semantic HTML. Comfortable working across the full page — from markup to styling to interactivity.</p>
</section>
Ho ye raha hai: <section> ek thematic content ka chunk group karta hai jiski apni heading ho — yahi poora test hai <section> ke liye reach karne ka, plain <div> ke bajaye: kya is block ko apni heading deserve karni chahiye? Summary ko chahiye, to isko milti hai: <h2>Summary</h2>. Heading level dhyaan do — hum <h1> (naam, Step 2 mein) se seedha <h2> pe aaye hain yahan. Ye ek sahi heading outline hai: level 2, level 1 ka direct child topic hai, koi level skip nahi hua. Yahan seedha <h3> pe jump karna (bas isliye ki "chhota lag raha tha") us outline ko tod deta jo screen reader tumhare resume ke table of contents ki tarah announce karta hai.
Step 5 — Experience section (har job ek <article> hai)
<section>
<h2>Experience</h2>
<article>
<h3>Frontend Developer Intern — Codewave Technologies</h3>
<p>June 2025 – Present</p>
<ul>
<li>Built 6 reusable React components used across the company's client dashboard.</li>
<li>Fixed accessibility issues flagged by a screen-reader audit, including missing alt text and unlabeled form inputs.</li>
</ul>
</article>
<article>
<h3>Freelance Web Developer</h3>
<p>Jan 2024 – May 2025</p>
<ul>
<li>Delivered 4 static business websites for local clients using semantic HTML and CSS.</li>
</ul>
</article>
</section>
Ho ye raha hai: Section-level heading wahi <h2>Experience</h2> rehti hai — Step 4 wala hi rule. Par ab andar dekho: har job apne khud ke <article> mein wrap hai. <article> ka matlab hai "ek self-contained piece of content jo tab bhi sense banaye agar tum ise nikaal ke kahin aur, apne aap, rakh do" — ek job entry bilkul wahi hai; tum sirf us <article> ko copy karke kisi dusre page pe (maan lo, ek LinkedIn post) daal sakte ho aur wo standalone khada rahega aur pura sense banayega. Yahi test hai <article> vs plain <section> ka.
Har <article> ko apna khud ka <h3> milta hai — us <h2>Experience</h2> se ek level neeche jo use contain karta hai, outline sahi continue karte hue: h1 → h2 → h3, koi gap nahi. Role/company line article ki heading hai; uske neeche ki date range ek plain <p> hai, heading nahi (ye naya topic shuru nahi karti); aur bullet responsibilities ek genuine unordered list hai — phir se <ul>/<li>, kyunki ye items ka ek set hai jinka koi required order nahi, bilkul wahi jiske liye <ul> bana hai (<ol> sirf tab use karo jab sequence khud matter kare, jaise numbered steps).
Step 6 — Education section
<section>
<h2>Education</h2>
<article>
<h3>B.Tech in Computer Science — Delhi Technical University</h3>
<p>2021 – 2025</p>
</article>
</section>
Ho ye raha hai: Experience wala hi pattern, ek level neeche: <section> ek <h2> ke saath, har degree ke liye ek <article> apne <h3> ke saath. Sirf ek entry ke saath bhi, ise <article> mein wrap karna structure ko consistent aur badhne ke liye ready rakhta hai — baad mein doosri degree add karo aur wo bas ek aur <article> sibling ban jaati hai, koi restructuring nahi chahiye.
Step 7 — Skills section
<section>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Git</li>
</ul>
</section>
Ho ye raha hai: Skills list items hain, self-contained pieces of content nahi — ek akela skill ("HTML") apne aap nikaal ke rakhne pe sense nahi banata jaise ek job entry banati hai, to ye ek plain <ul> hai <section> ke andar, <article>s ki list nahi. Ye distinction sahi karna (items ki list vs. self-contained pieces ki list) bilkul wahi judgement call hai jo <article> vs <ul>/<li> test kar raha hai.
Step 8 — Ek photo, real alt text ke saath
<header>
<img src="aditi-headshot.jpg" alt="Headshot of Aditi Sharma">
<h1>Aditi Sharma</h1>
...
</header>
Ho ye raha hai: Hum <img> header mein add karte hain, naam ke saath. Do facts bilkul sahi samajhna: <img> ek void element hai — iski koi closing tag nahi hai aur tags ke beech koi content nahi hai (kabhi </img> mat likho), aur iska alt attribute headshot jaisi meaningful image ke liye optional nahi hai. Screen reader alt text ko image ki jagah announce karta hai, to alt="Headshot of Aditi Sharma" wahi hai jo ek visually-impaired recruiter asal mein sunta hai jahan ek sighted recruiter tumhari photo dekhta hai. (Agar ye purely decorative image hoti — ek divider graphic jiska koi meaning nahi — to alt="" empty-but-present sahi choice hoti, assistive tech ko chupchap skip karne bolti; ye laziness nahi, sahi usage hai. Ek headshot meaningful content hai, to use real describing text chahiye, empty string nahi.) Agar file aditi-headshot.jpg tumhari HTML file ke paas nahi milti, to zyada tar browsers ek broken-image icon dikhayenge aur uske saath picture ki jagah alt text display karenge — to ek achha alt ek safety net ki tarah bhi kaam karta hai.
🔎 Poora flow (wiring recap)
<!DOCTYPE html>+<html lang="en">+<head>(charset, viewport, title) ek sahi-render hone wala, sahi-titled, mobile-friendly page set up karte hain, kuch bhi visible load hone se pehle.<header>identity rakhta hai:<h1>naam (page ka ek hi h1), job title<p>, realaltwali photo, aur clickablemailto:/tel:/URL contact links ki<ul>.- Ek
<main>baaki sab kuch wrap karta hai — accessibility landmark jahan screen reader user seedha jump karta hai. - Har content block jo apni heading deserve karta hai wo ek
<section>hai<h2>ke saath: Summary, Experience, Education, Skills —<main>ke andar flat siblings, sab same outline depth pe. - Experience aur Education ke andar, har self-contained entry (ek job, ek degree) apna khud ka
<article>hai<h3>ke saath, ek level neeche — h1 → h2 → h3, page pe kahin bhi level skip nahi hua. - Bullet content jo genuine items ka set hai (responsibilities, skills, contact links) ek
<ul>/<li>list hai, kabhi<br>-separated text nahi. - Kahin bhi CSS nahi — browser ki default styling (default relative sizes ki block headings, bulleted
<ul>, underlined blue links) bilkul wahi hai jo abhi dikhni chahiye.
✅ Ye tumne seekha
- Ek real page skeleton:
<!DOCTYPE html>,<html lang>,<head>metadata (charset,viewport,title) vs<body>content. - Semantic landmarks: identity ke liye
<header>, har page pe exactly ek<main>. <section>(apni heading wala themed block) vs<article>(self-contained entry jo standalone sense banaye) vs<ul>/<li>(items ki plain list) — teeno ke beech judgement call.- Ek sahi heading outline koi level skip kiye bina: h1 (naam) → h2 (section titles) → h3 (entry titles).
- Real, working links:
mailto:,tel:, aur absolute URLs<a href>ke andar. <img>void element hai, aur meaningful image kaalttext optional nahi hai — yahi hai jo bol ke sunaya jaata hai, aur yahi hai jo dikhta hai agar image load na ho.- Ye job ke liye kyun matter karta hai: abhi sahi structure = ATS/screen-reader is resume ko sahi se padh sakta hai, aur ye bilkul wahi skeleton hai jise agle chapter mein CSS style karega.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditi Sharma — Resume</title>
</head>
<body>
<header>
<img src="aditi-headshot.jpg" alt="Headshot of Aditi Sharma">
<h1>Aditi Sharma</h1>
<p>Frontend Developer</p>
<ul>
<li><a href="mailto:aditi.sharma@example.com">aditi.sharma@example.com</a></li>
<li><a href="tel:+911234567890">+91 12345 67890</a></li>
<li><a href="https://github.com/aditisharma">github.com/aditisharma</a></li>
<li><a href="https://linkedin.com/in/aditisharma">linkedin.com/in/aditisharma</a></li>
</ul>
</header>
<main>
<section>
<h2>Summary</h2>
<p>Frontend developer with 1 year of experience building responsive, accessible web interfaces with React and semantic HTML. Comfortable working across the full page — from markup to styling to interactivity.</p>
</section>
<section>
<h2>Experience</h2>
<article>
<h3>Frontend Developer Intern — Codewave Technologies</h3>
<p>June 2025 – Present</p>
<ul>
<li>Built 6 reusable React components used across the company's client dashboard.</li>
<li>Fixed accessibility issues flagged by a screen-reader audit, including missing alt text and unlabeled form inputs.</li>
</ul>
</article>
<article>
<h3>Freelance Web Developer</h3>
<p>Jan 2024 – May 2025</p>
<ul>
<li>Delivered 4 static business websites for local clients using semantic HTML and CSS.</li>
</ul>
</article>
</section>
<section>
<h2>Education</h2>
<article>
<h3>B.Tech in Computer Science — Delhi Technical University</h3>
<p>2021 – 2025</p>
</article>
</section>
<section>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Git</li>
</ul>
</section>
</main>
<footer>
<p>References available on request.</p>
</footer>
</body>
</html>HTMLinterview questions & answers
10 sample questions below — 147+ in the full bank inside.
Landmark region kya hota hai, aur ye screen reader user ki kaise help karta hai?
Landmark region ek semantic element hai jaise <header>, <nav>, <main>, ya <footer> jise screen reader ek jump-to target ki tarah pehchanta hai. Har link ko linearly tab karne ke bajaye, user seedha "main content" ya "navigation" pe jump kar sakta hai, aur repeated boilerplate jaise har page load pe header skip kar sakta hai.
In simple terms: Ye museum guide ke shortcut button jaisa hai — "press 3 for the modern art wing" — har baar poora lobby walk karne ke bajaye. Example: ek recipe site pe screen reader user seedha <main> pe jump karta hai aur har page pe repeat hote logo aur nav links skip kar deta hai.
alt="" kab sahi choice hoti hai, aur kab galat hoti hai?
alt="" sirf ek purely decorative image ke liye sahi hai jo koi information add nahi karti — jaise ek background divider swirl — kyunki ye screen reader ko batata hai image ko bilkul skip karo, sunne wale ka time waste karne ke bajaye. Ye galat hai kisi bhi aisi image ke liye jo content ya meaning carry karti hai, including ek logo image jo link ke andar sirf content hai, jahan alt text link ka accessible name ban jaata hai.
In simple terms: Ye waise hi hai jaise decide karna ki museum guide ek plain wall ke baare mein kuch bole ya nahi, painting ke muqable — khaali wall skip hoti hai, painting describe hoti hai. Example: <img src="divider.png" alt=""> ek decorative line ke liye sahi hai, lekin <img src="sunset.jpg" alt=""> us photo ke liye jo page ka poora point hai, screen reader user ko kuch nahi milega.
Screen reader kya hota hai, aur ye HTML likhne ke tareeke ke liye kyun matter karta hai?
Screen reader ek software hai (VoiceOver, NVDA, JAWS) jo page ka text aur structure zor se padhta hai us user ke liye jo screen dekh nahi sakta. Ye sirf wahi describe kar sakta hai jo markup mein likha hai, isliye meaningless divs, missing alt text, ya unlabeled inputs us user ke liye dead-end ban jaate hain, jabki ek sighted user unhe theek se dekh leta hai.
In simple terms: Screen reader ko museum audio guide samjho — ye sirf wahi bata sakta hai jo painting ke bagal ke plaque pe likha hai; agar plaque khaali hai to visitor ko kuch nahi milta. Example: ek <img> jisme alt attribute hi nahi hai, wo khaali plaque jaisa hai — screen reader ke paas us photo ke baare mein kuch bolne ko nahi hota.
<label for="email"> ka <input id="email"> se match hona kyun zaroori hai?
Matching for/id hi hai jo label ko input se programmatically associate karta hai, isliye label pe click karne se input focus hota hai aur screen reader field ko uske naam se announce karta hai ("Email, edit text") bajaye ek naam-less edit box announce karne ke. Match na ho to dono elements visually paas hote hain lekin actually connected nahi hote.
In simple terms: Ye ek switch ke bagal wale printed sign jaisa hai — agar sign physically us specific switch se attached nahi hai, to andhere mein tatolne wala insaan sure nahi ho sakta ye kaunsa switch describe kar raha hai. Example: <label for="email">Email</label> <input id="email" type="email"> — "Email" word pe click karne se input focus hota hai kyunki ids match karte hain.
Form pe GET vs POST?
GET submit hui field name/value pairs ko `action` URL pe `?key=value&key2=value2` query string ki tarah jod deta hai — address bar mein dikhta hai, bookmark ho sakta hai, aur browsers ki taraf se ek length limit hoti hai. POST wahi pairs request body mein bhejta hai, isliye wo URL ka hissa nahi hote aur HTML ki taraf se koi practical length limit nahi.
In simple terms: GET aisa hai jaise parcel ke bahar order likh diya sabko dikhne ke liye; POST use andar seal karke bhejna hai. Jaise: `<form method="get" action="/search">` mein ek `q` field submit hoke `/search?q=html+forms` banta hai — URL mein dikh jaata hai aur us link ko directly share bhi kar sakte ho.
`<form>` pe `action` aur `method` attributes kya karte hain?
`action` wo URL hai jo submit hui data ko receive karta hai. `method` batata hai kaise bheji jaati hai — `get` data ko us URL pe query string ki tarah jod deta hai, `post` isse request body mein bhejta hai. Dono milke decide karte hain form ka data kahan jaata hai aur kaise travel karta hai.
In simple terms: Form ko ek bhare hue application jaisa socho: action wo desk address hai jahan deliver hota hai, method ye hai ki tum use darwaze ke neeche se public mein slide karte ho (GET) ya seal karke envelope mein handover karte ho (POST). Jaise: `<form action="/signup" method="post">`.
`<label>` ko `<input>` se sahi tarah kaise associate karte ho, aur ye matter kyun karta hai?
Label ke `for` attribute ko input ke `id` attribute se match karo — `<label for="email">Email</label>` ke saath `<input id="email">` — ya input ko label tag ke andar wrap kar do. Ye accessibility ke liye matter karta hai: screen reader label ko announce karta hai jab input focus paata hai, aur label text pe click karne se input bhi focus/toggle hota hai.
In simple terms: Ye aisa hai jaise ek name tag kisi specific insaan pe pin kiya ho, versus ek name tag bas table pe paas mein pada ho — sirf pin kiya hua clearly connected hai. Jaise: `<label for="terms">I agree</label><input type="checkbox" id="terms">` — "I agree" words pe click karne se checkbox bhi tick ho jaata hai.
Har form input ko `name` attribute kyun chahiye?
`name` wo key hai jiske under us field ki value server ko bheji jaati hai. `name` ke bina, browser ke paas koi key nahi hoti value bhejne ke liye, isliye field chup-chaap submission se bahar reh jaati hai — koi error nahi, bas kabhi pahunchti hi nahi.
In simple terms: Ye aisa hai jaise exam sheet pe answer likh diya bina question number ke saamne — checker ko pata hi nahi chalta ye kis question ka hai, isliye ignore ho jaata hai. Jaise: `<input type="text" id="city">` bina `name` ke server tak kabhi nahi pahunchta, chahe user ne kuch bhi type kiya ho.
Kya `<input>` ek void element hai? Isse likhne pe kya farak padta hai?
Haan — `<input>` ek void (empty) element hai, isliye iska kabhi closing tag nahi hota aur tags ke beech content bhi nahi hota. Tum `<input type="text" name="city">` likhte ho aur wahin ruk jaate ho, kabhi `<input>...</input>` nahi.
In simple terms: Ye aisa hai jaise kaagaz pe ek single stamped form field — usme "close" karne ko kuch hai hi nahi, bas ek slot hai. Compare karo `<textarea>` se, jo void NAHI hai aur `</textarea>` chahiye kyunki uska default text tags ke beech mein rehta hai.
alt="" aur alt attribute bilkul na dena — dono mein farak kya hai?
alt="" ek jaan-boojh kar diya gaya, sahi signal hai ki image decorative hai aur assistive tech use skip kare. Alt attribute na hona incomplete markup hai — screen readers aksar filename ya "image" word announce kar dete hain fallback mein, jo chup rehne se bhi bura hai.
In simple terms: Ye us plaque ka farq hai jo jaan-boojh kar plain wall ke bagal kuch nahi kehta, versus ek painting jiske paas plaque hi nahi hai to guide frame ke peeche likha file number bol deta hai. Example: <img src="IMG_4821.jpg"> bina alt ke "IMG 4821 dot jpg, image" announce ho sakta hai — confusing aur useless.
137+ more HTML questions inside
Create a free account to read the full question bank, learn every topic, and practise with an AI mock interview.
Unlock all questions — freeReady to practise HTML?
Unlock every topic free, then face an AI interviewer that asks follow-ups and grades your answers.