Introduction to HTML
HTML का परिचय
What is HTML?
Every single website you have ever opened — Google, YouTube, your school's website — sends HTML to your browser. The browser reads that HTML and paints the page. Press Ctrl+U on any website right now and you will see its HTML with your own eyes.
The House Analogy (remember this forever)
A website is like a house built by three workers:
| Language | Role in the house | What it controls |
|---|---|---|
| HTML | Bricks and walls (structure) | What is ON the page |
| CSS | Paint and decoration | How it LOOKS |
| JavaScript | Electricity and switches | What it DOES on click |
Without walls, there is nothing to paint and nowhere to fit switches. That is why HTML is always learned first — CSS and JavaScript both work ON TOP of HTML.
Your First Look at HTML
<h1>Welcome to My School</h1>
<p>Alpine Public School is located in Khurja.</p>
<img src="school.jpg" alt="School building">
<a href="admission.html">Apply for Admission</a>Read the code like English: <h1> = heading 1, <p> = paragraph, <img> = image, <a> = anchor (link). Tags are instructions wrapped in angle brackets — the browser follows them and shows the result. You already understand 4 tags without studying anything!
HTML Versions — one line of history
| Version | Year | Note |
|---|---|---|
| HTML 1.0 – 4.01 | 1991–1999 | The early web |
| XHTML | 2000 | Strict rules phase |
| HTML5 | 2014 → today | Current standard: video, audio, semantic tags, canvas |
Why Learn HTML First?
- Every web career starts here: frontend, backend, WordPress, SEO, blogging — all touch HTML daily.
- Easiest first win: you can build a visible page within 10 minutes of starting (next chapter!).
- No installation needed: Notepad + browser is enough — both already on your computer.
- Foundation for CSS and JavaScript: both languages select and act on HTML elements, so weak HTML = weak everything.
HTML क्या है?
आज तक आपने जो भी website खोली है — Google, YouTube, आपके school की website — सब browser को HTML भेजती हैं. Browser वह HTML पढ़कर page बनाता है. अभी किसी भी website पर Ctrl+U दबाइए और उसका HTML अपनी आंखों से देखिए.
घर वाली Analogy (हमेशा याद रहेगी)
Website एक घर है जिसे तीन कारीगर बनाते हैं:
| Language | घर में role | क्या control करती है |
|---|---|---|
| HTML | ईंटें और दीवारें (structure) | Page पर क्या HAI |
| CSS | Paint और सजावट | कैसा DIKHTA है |
| JavaScript | बिजली और switches | Click पर क्या KARTA है |
दीवारें नहीं तो paint किस पर होगा और switch कहां लगेगा? इसीलिए HTML हमेशा सबसे पहले सीखा जाता है — CSS और JavaScript दोनों HTML के ऊपर काम करते हैं.
HTML की पहली झलक
<h1>Welcome to My School</h1>
<p>Alpine Public School is located in Khurja.</p>
<img src="school.jpg" alt="School building">
<a href="admission.html">Apply for Admission</a>Code को English की तरह पढ़िए: <h1> = heading 1, <p> = paragraph, <img> = image, <a> = anchor (link). Tags angle brackets में लिपटे निर्देश हैं — browser उन्हें मानकर result दिखाता है. बिना कुछ पढ़े आपको 4 tags पहले से समझ आ गए!
HTML Versions — एक line का इतिहास
| Version | साल | Note |
|---|---|---|
| HTML 1.0 – 4.01 | 1991–1999 | शुरुआती web |
| XHTML | 2000 | सख्त rules वाला दौर |
| HTML5 | 2014 → आज | Current standard: video, audio, semantic tags, canvas |
सबसे पहले HTML क्यों?
- हर web career यहीं से शुरू: frontend, backend, WordPress, SEO, blogging — सबमें रोज़ HTML छूता है.
- सबसे आसान पहली जीत: शुरू करने के 10 minute में दिखने वाला page बन जाता है (अगला chapter!).
- कोई installation नहीं: Notepad + browser काफी है — दोनों आपके computer में पहले से हैं.
- CSS और JavaScript की नींव: दोनों languages HTML elements को ही select करके काम करती हैं, तो कमज़ोर HTML = सब कमज़ोर.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.console.log देखने के लिए F12 दबाइए.