01 HTML (The Skeleton)

HTML (HyperText Markup Language) web ka skeleton hai. Bina iske web exist nahi karta.

1. Basic Structure (The Foundation) 🏗️

Har HTML page ka structure same hota hai:

<!DOCTYPE html>: Browser ko batata hai ki ye HTML5 hai.
<html>: Root element.
<head>: Meta info (Title, SEO, CSS links) jo page par nahi dikhta.
<body>: Jo user ko dikhta hai (Text, Images, Buttons).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Namaste World! 🙏</h1>
    <p>Ye mera pehla paragraph hai.</p>
</body>
</html>

2. Most Used Tags (Point-by-Point) 🏷️

Headings: <h1> (Sabse bada) se <h6> (Sabse chhota). Sirf ek <h1> use karein per page.
Paragraph: <p> text likhne ke liye.
Links: <a href="url">Link</a>. (target="_blank" naye tab ke liye).
Images: <img src="image.jpg" alt="Description">. (alt SEO ke liye zaroori hai).
Lists:
- <ul>: Unordered (Bullet points).
- <ol>: Ordered (1, 2, 3..).
- <li>: List Item.

3. Semantic HTML (Modern & SEO Friendly) 🧠

Div (<div>) ka use kam karein, meaning-full tags use karein. Google isse pasand karta hai.

<header>: Logo, Navigation ke liye.
<nav>: Links ke menu ke liye.
<main>: Page ka main content.
<article>: Blog post ya news item ke liye.
<section>: Content ke alag-alag hisso ke liye.
<footer>: Copyright, contact info ke liye.

Example:

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>Blog Title</h2>
    <p>Conte...</p>
  </article>
</main>
<footer>...</footer>

4. Forms (User Input) 📝

Data collection ke liye Forms use hote hain.

<form>: Wrapper tag. action aur method attributes important hain.
<input>:
- type="text": Naam ke liye.
- type="email": Email validation ke sath.
- type="password": Dots dikhane ke liye.
- type="checkbox": Multiple selection.
- type="radio": Single selection.
<label>: Input kiske liye hai, ye batane ke liye (for attribute use karein).
<button>: Form submit karne ke liye.

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" required>

  <button type="submit">Send</button>
</form>

5. Pro Tips for HTML 💡

Hierarchy Follow Karein: h1 -> h2 -> h3. Random mat use karein.
Alt Text: Images me hamesha alt likhein (Screen readers ke liye).
Closing Tags: Hamesha tags close karein (</p>, </div>).

6. Deep Dive: Tables (Data Display) 📊

Advanced data dikhane ke liye Tables use karein.

<table border="1">
  <thead> <!-- Header Row -->
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody> <!-- Body Rows -->
    <tr>
      <td>Aditya</td>
      <td>25</td>
      <td>Dev</td>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>28</td>
      <td rowspan="2">Manager</td> <!-- Row Merge -->
    </tr>
    <tr>
      <td>Amit</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<thead> / <tbody>: Browser ko table ka structure samjhane ke liye.
colspan / rowspan: Cells ko merge karne ke liye.

7. Multimedia (Audio & Video) 🎬

Websites ko interactive banayein.

Video

<video controls width="300">
  <source src="movie.mp4" type="video/mp4">
  Browser doesn't support video.
</video>

controls attribute se Play/Pause buttons aate hain.

Audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

YouTube Embed (Iframe)

Doosri website ka page apni site me dikhane ke liye.

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>

8. Meta Tags (SEO Superchargers) 🚀

Ye <head> ke andar aate hain aur Google/Facebook ko batate hain ki page kiske baare me hai.

<head>
  <!-- Basic SEO -->
  <meta name="description" content="Learn HTML from Basic to Advance in Hinglish.">
  <meta name="keywords" content="HTML, Web Development, Hinglish Tutorial">

  <!-- Social Media (Open Graph) -->
  <meta property="og:title" content="Ultimate HTML Guide">
  <meta property="og:description" content="Click to become an HTML expert today!">
  <meta property="og:image" content="thumbnail.jpg">
</head>

9. Semantic Tags Deep Dive 🧠

Kyun div har jagah nahi use karna chahiye?

Readability: Code padhna aasaan hota hai.
Accessibility: Screen readers (Andhe logon ke liye tools) sahi se kaam karte hain.
SEO: Search engines samajh paate hain ki “Content” kahan hai aur “Footer” kahan hai.

Tag	Use Case
`<article>`	Jo content khud me complete ho (Blog post, News).
`<section>`	Related content ka group (Intro section, Features section).
`<aside>`	Main content se alag info (Sidebar, Adverts).
`<figure>`	Image with Caption (`<figcaption>`).

Next Up: Ab is skeleton ko sundar banate hain CSS ke sath! 🎨