HTML5 Course in Roman Hindi/Urdu - Lecture 2: Basic Tags (Headings, Lists aur Links) - Fully Detailed
Basic Tags Ki Introduction (Detailed)
HTML5 mein tags content ko organize aur structure dete hain. Har tag ek command hai jo browser ko batata hai ki yeh text ko kaise dikhaaye. Tags hamesha <opening-tag>content</closing-tag> format mein hote hain. Example: <p>Yeh paragraph hai.</p>.
- Self-closing tags: Jaise
<br>(line break) ya<img>– inme closing tag nahi chahiye, sirf<img src="image.jpg" />(slash optional hai). - Attributes: Tags ke andar extra info, jaise
<h1 id="main">Title</h1>. Yeh baad mein CSS ya JS ke liye use hote hain. - Case insensitive:
<H1>ya<h1>same kaam karega, lekin lowercase best practice hai. - Nesting: Tags andar tags daal sakte ho, lekin sahi order mein close karo (LIFO - Last In First Out).
Yeh sab seekhne se aapka code clean aur readable hoga. Ab har section ko detail mein dekhte hain.
Headings Tags (h1 to h6) - Har Ek Ki Full Details
Headings text ko hierarchy (level) dete hain, jaise book mein chapters. Yeh semantic tags hain, matlab browser aur Google samajhte hain ki yeh important hai. SEO ke liye zaroori: h1 page ka main topic batata hai, sirf ek use karo per page. Zyada headings se page organized dikhega.
h1 Tag - Sabse Important Heading
Purpose: Page ka main title. Sabse bada font size (default 2em), bold.
Kab use karein: Article ka top title, jaise "HTML5 Tutorial".
Attributes: id (unique name, jaise <h1 id="main-title">), class (styling ke liye), style (inline CSS, lekin avoid karo).
SEO Tip: Keyword daalo, jaise "HTML5 Basic Tags Hindi".
Common Mistake: Multiple h1 mat banao, warna SEO penalize ho sakta hai.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h1 Example - Detailed Lecture 2</title>
</head>
<body>
<h1 id="main" class="primary" style="color: blue;">Main Heading: Yeh h1 Ka Example Hai</h1>
<!-- Explanation: id se link kar sakte ho, class se CSS, style temporary. -->
</body>
</html>Browser mein dekho: Bada blue title dikhega. Save as "h1-detail.html".
h2 Tag - Sub-Heading
Purpose: Main sections ke liye, h1 se chhota (1.5em).
Kab use karein: Topics jaise "Introduction" ya "Examples".
Attributes: Same as h1 – id, class, title (tooltip dikhata hai hover par).
Tip: Har section shuru mein h2 use karo, readability badhegi.
<h2 title="Yeh sub-topic hai">Sub Heading: Basic Tags Ki Details</h2>Hover karo mouse se – tooltip dikhega.
h3 to h6 Tags - Lower Levels
h3: Sub-sub sections (1.17em), jaise "Step 1". Attributes same.
h4: Aur detail (1em), lists ke pehle.
h5: Chhote points (0.83em).
h6: Sabse chhota (0.67em), footnotes ke liye.
General Tip: Logical order follow karo: h1 > h2 > h3, jump mat karo (h1 se direct h4 nahi). Yeh accessibility ke liye acha hai (screen readers samajhte hain).
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Headings Detailed - Lecture 2</title>
</head>
<body>
<h1>Main Topic: HTML5 Headings</h1>
<h2>Section 1: Purpose</h2>
<h3>Sub-Section: h1 Details</h3>
<h4>Attribute Example</h4>
<h5>Tip for Beginners</h5>
<h6>Footer Note</h6>
<h2>Section 2: Examples</h2>
</body>
</html>Yeh hierarchy banayega – browser mein levels clear dikhenge.
Lists Tags (Unordered, Ordered aur Nested) - Har Element Ki Details
Lists items ko group karte hain. <li> har item ke liye, container <ul> ya <ol>. Nested lists se sub-items banao. Yeh tables se pehle option hai simple data ke liye.
ul Tag - Unordered List (Bullets)
Purpose: Items without order, bullets (dots) se.
Attributes: type (deprecated, ab CSS use), id/class.
Kab use karein: Shopping list, features.
<ul id="skills-list">
<li class="first">HTML5 - Basic Structure</li>
<li>CSS3 - Styling</li>
<li>JavaScript - Interactivity</li>
</ul>Bullets dikhegi, id se target kar sakte ho.
ol Tag - Ordered List (Numbers)
Purpose: Sequential items, numbers/letters se.
Attributes: type ("1","a","A","i","I"), start (starting number, jaise start="5"), reversed (backward count).
Kab use karein: Steps, rankings.
<ol type="1" start="3" reversed>
<li id="step3">Step 3: Code Write Karein</li>
<li>Step 2: Plan Karein</li>
<li>Step 1: Learn Basics</li>
</ol>Yeh 3,2,1 count karega.
li Tag - List Item
Purpose: Har item container.
Attributes: value (ol mein custom number), id/class.
Nested Lists: <li> ke andar <ul> ya <ol> daalo.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Lists Detailed - Lecture 2</title>
</head>
<body>
<h1>Web Skills List</h1>
<ul>
<li>Frontend
<ul>
<li>HTML5</li>
<li>CSS</li>
</ul>
</li>
<li>Backend
<ol type="A" start="1">
<li>Node.js</li>
<li>Database</li>
</ol>
</li>
</ul>
</body>
</html>Sub-bullets aur sub-numbers banenge – easy to understand hierarchy.
Tip: Mobile par lists responsive hote hain, no extra CSS needed.
Links Tags (a Tag) - Har Attribute Ki Full Details
<a> anchor tag hai, hyperlinks banata hai. Yeh navigation ka backbone hai.
Basic a Tag Structure
Purpose: Click par URL par jaaye.
Core Attribute: href (hypertext reference) – must hai, jaise "https://example.com".
<a href="https://www.google.com">Google Jaayein</a>Important Attributes
target: "_self" (same tab, default), "_blank" (new tab), "_parent", "_top".
rel: "nofollow" (SEO nofollow), "noopener" (security ke liye _blank ke saath), "noreferrer".
title: Tooltip text, hover par dikhe.
id/class: Styling/linking ke liye.
download: File download kare, jaise <a href="file.pdf" download>Download PDF</a>.
hreflang: Link ki language, SEO ke liye.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links Detailed Attributes - Lecture 2</title>
</head>
<body>
<h1>Link Examples</h1>
<p>External: <a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer" title="Best HTML Tutorial">W3Schools</a></p>
<p>Internal: <a href="index.html" id="home-link" hreflang="hi">Home Page</a></p>
<p>Email: <a href="mailto:hello@example.com" title="Email Bhejein">Contact</a></p>
<p>Download: <a href="notes.pdf" download="html-notes">Download Notes</a></p>
</body>
</html>External new tab mein khulega, secure rahega.
Title hover par help dikhaayega.
Download sirf same-origin files ke liye best.
Tip: Internal links site ki SEO badhaate hain. Broken links mat banao (href empty nahi).
Practice Tasks (Detailed with Steps)
- Headings Practice: "headings-detail.html" banao. h1 se h6 add karo, har ek mein id aur title attribute daalo. Browser test: Hover tooltips dekho.
- Lists Practice: "lists-detail.html" mein nested ul aur ol banao (apne daily routine ki). Attributes jaise type="A" aur start="10" use karo.
- Links Practice: "links-detail.html" mein 5 links add karo: 2 external (_blank), 1 internal, 1 email, 1 download (koi image file). Rel aur title sab mein daalo.
- Combined: Ek full page banao jisme headings, lists (nested) aur links mix ho. 20 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: h1 multiple kyun nahi?
- A: SEO aur structure ke liye – ek main topic per page. Multiple se confusion.
- Q: ol mein type attribute kya karta?
- A: Number style change: "1" numbers, "a" lowercase letters.
- Q: a tag mein rel="noopener" kyun?
- A: Security – new tab mein popup script block karta hai.
- Q: Nested lists ka limit?
- A: Koi nahi, lekin 3-4 levels tak rakhna readability ke liye.
Next Lecture Teaser
Lecture 3: Images (img tag details), Paragraphs (p, br, hr) aur Div (container) Tags – attributes aur best practices.
Yeh lecture complete. Ab aap basic tags master kar chuke ho.
