1. What is HTML

HTML ki full form hai Hyper Text Markup Language. Ye web pages banane ke liye use hoti hai. Jab bhi aap koi website kholte ho, jaise YouTube, Amazon, ya Flipkart, toh unke pages ka structure HTML se hi bana hota hai.

HTML ek markup language hai, programming language nahi. Iska kaam sirf content ko structure dena hota hai — jaise heading, paragraph, image, button, link, etc.

2. History and Evolution of HTML

HTML ka sabse first version Tim Berners-Lee ne 1991 me develop kara tha. Tab uska version tha 1.0, ye bahut hi basic version tha sirf kuch hi features tha.

Phir dheere dheere HTML evolve hoti rahi aur new features introduce hote rahe.

HTML 2.0 (1995): Ye ek standard markup language ban gyi for designing and creating web pages till 1997.
HTML 3.2 (1997): Is version mein tables aur scripting support introduce hua.
HTML 4.01 (1999): Forms, multimedia support enhance hua.
HTML5 (2014): Ye sabse latest aur widely used version hai till (2025). Isme modern features jaise audio, video, canvas, local storage, responsive support introduce hua.

3. How HTML Works with CSS & JavaScript

HTML sirf structure provide karta hai. Lekin website ko beautiful aur interactive banane ke liye hum 2 aur technologies use karte hain:

CSS (Cascading Style Sheets) – HTML elements ko style karne ke liye (colors, fonts, layouts, animations)
JavaScript – Page mein interactivity lane ke liye (like button click, popups, sliders)

So, ye 3 technologies milke banta hain Website ka Frontend

HTML => Structure

CSS => Styling

JavaScript => Functionality

4. Setting up Your Development Environment

HTML seekhne aur code karne ke liye aapko kisi special software ki zarurat nahi. Bas aapke paas hona chahiye:

1. Code Editor:

VS Code (Recommended) – Free aur powerful editor hai.
Notepad++, Sublime Text bhi use kar sakte ho.

2. Browser:

Google Chrome, Firefox, Edge, koi bhi browser use kar sakte ho.
Browser mein right-click karke "Inspect" ya "View Page Source" dekhke HTML samajh sakte ho.

HTML Setup:

Step 1: Install VS Code

Visit: https://code.visualstudio.com
Click on "Download for Windows" (ya jo bhi OS aap use kar rahe ho).
Download hone ke baad installer run karo aur simple “Next Next Finish” process se install kar lo.

Step 2: Install Web Browser (if not already)

Aapke computer mein Google Chrome ya Microsoft Edge hona chahiye. Agar nahi hai:

Chrome install karne ke liye visit karo: https://www.google.com/chrome/

Step 3: Create Your First HTML File

VS Code open karo.
Ek naya folder banao (e.g., Learn HTML) aur VS Code mein open karo (File > Open Folder).
Right-click in the Explorer sidebar → New File par click karo.
File ka naam likho: index.html

Step 4: Write Basic HTML Code

index.html file mein ye basic code likho:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Step 5: Install Live Server Extension

VS Code ke sidebar me Extensions icon pe click karo (ya press Ctrl + Shift + X)
Search karo: Live Server
Author: Ritwick Dey ka extension install karo
Install hone ke baad VS Code ko restart karo (optional)

Step 6: Run HTML File in Browser

index.html file open karo
Right-click on the page → Click on "Open with Live Server"
Browser open ho jayega aur output dikhai dega:

Step 7: Make Changes and See Live Output

Ab jab bhi aap file mein kuch change karoge, browser auto refresh ho jayega and latest output dikhega.

Output:

5. Basic Structure of an HTML Document

Har HTML document ka ek basic structure hoti hai. Jise boilerplate code bhi kehte hai, kisi bhi web page ke liye HTML likhne se pehle ye code zarur likhna padhta hai.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Explanation:

<!DOCTYPE html>: Browser ko batata hai ki yeh HTML5 document hai.
<html>: Ye <html> ek tag hai jise andar saara content likhte hain.
<head>: Is tag ke andar "Metadata", "website title", "CSS links" wala code likhte hai.
<body>: Ye tag sabse important hota hai kioki actual content isi mein hota hai jo user ko dikhta hai.
<h1>: Ye ek h1 tag hai jiska matlab hai heading 1, ye webpage par heading likhne ke liye use karte hai.
<p>: Ye tag paragraph likhne ke liye use hota hai.

Note: Har open tag ka ek correspond closing tag bhi hota hai. For eg. <html> </html>. Kuch tags self closing bhi hote hai like <img src="" alt="" />

Introduction to HTML