HTML Basics: The Skeleton of the Web

🧱 HTML for Beginners – Webpage ka Skeleton

Socho tum ek ghar bana rahe ho.

Ghar banane se pehle ek naksha (blueprint) banta hai — jisme decide hota hai ki bedroom kidhar hoga, kitchen kaunse kone mein hoga, aur gate kaha lagega.

Waise hi HTML bhi ek webpage ka naksha hota hai.
Yeh batata hai ki webpage ke alag-alag parts ka layout kya hoga – jaise heading kaha aayegi, paragraph kaha, image kaha.

HTML sirf structure deta hai — jaise ghar ki deewar.
Design (color, styling) ke liye CSS hota hai,
aur functionality (click, animation) ke liye JavaScript.

🧾 Ek Simple HTML Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Mera Pehla Page</title>
  </head>
  <body>
    <h1>Namaste Duniya!</h1>
    <p>Yeh mera pehla webpage hai.</p>
  </body>
</html>

🔍 Yeh kya kar raha hai?

<!DOCTYPE html> – Browser ko batata hai ki yeh HTML5 hai.
<html> – Yeh root tag hai, iske andar poora page likha jaata hai.
<head> – Jo cheeze screen par nahi dikhengi (jaise title, SEO info).
<title> – Browser ke tab me jo naam dikhega.
<body> – Yahi main area hai jahan user ko content dikhai deta hai.

🔒 Kuch Zaroori Good Practices:

✅ Har opening tag ka closing tag hona chahiye
✅ Tags ko andar properly nest karo
✅ Tabs/spacing se code ko readable banao
✅ Semantic tags ka use karo — SEO aur screen readers ke liye best

🏷️ HTML Tags aur Elements – Friendly Way mein

🔹 Tag kya hota hai?

Tag ek instruction hai browser ke liye — "ye text ek heading hai", "ye image dikhani hai", etc.

Example:

<h1>Heading</h1>

<h1> = opening tag
</h1> = closing tag
Heading = content

🔹 Element kya hota hai?

Element = tag + content + closing tag

Jise tum aur main dekhte hain browser mein, woh element hota hai.

📘 Semantic vs Non-Semantic Tags – Fark kya hai?

🔤 Semantic Tags:

Aise tags jo apne naam se hi samjha dete hain ki unka kaam kya hai:

<header>Page Ka Header</header>
<article>Ek Article</article>
<footer>Page Ka Footer</footer>

Yeh tags meaning bhi dete hain aur structure bhi.

❓ Non-Semantic Tags:

Aise tags jinka naam se kaam samajh nahi aata:

<div>Header Yahan Hai</div>
<div>Yeh Content Hai</div>

Dono ka kaam same ho sakta hai, lekin semantic tags se search engine aur screen readers ko help milti hai.

Semantic	Non-Semantic
`<header>`	`<div>`
`<nav>`	`<div>`
`<footer>`	`<div>`
`<article>`	`<div>`

📄 HTML Document Ka Structure

<!DOCTYPE html>
└── <html>
    ├── <head>
    │   └── <title>
    └── <body>
        ├── <h1>
        └── <p>

⚖️ Semantic vs Non-Semantic Comparison

Semantic Version:

<section>
  <header>Welcome</header>
  <article>Main Content</article>
  <footer>Contact Info</footer>
</section>

Non-Semantic Version:

<div>
  <div>Welcome</div>
  <div>Main Content</div>
  <div>Contact Info</div>
</div>

Dekhne me same lagta hai, par pehle wale version me structure aur meaning dono clear hai.

🔚 Conclusion – Ek Line Me Samjho:

HTML ek webpage ka dhancha (structure) hai.
Tags aur elements milke us structure ko banate hain.
Semantic tags se meaning aur accessibility dono improve hoti hai.

HTML Basic - The Web's Skeleton