⚠ यह कार्रवाई अनुमति नहीं है!
🧱 NIELIT O Level · M2-R5 Web Design · Hindi Notes

Chapter 3: HTML Basics — वेब पेज की ईंट-गारा

अब असली coding शुरू! इस chapter में — HTML Introduction व Structure, Head Section, Formatting Tags, Anchors, Images, Paragraphs, Tables, Lists, Forms, Frames (legacy), और HTML5 — Semantic Elements, Audio/Video, Form Validations, Embed Multimedia, Layout व Iframe — 40+ examples के साथ, हर code में Copy button!

📑 16 Topics 💻 40+ Examples 📊 Tables & Diagrams ❓ 50 MCQs + Theory 🗓 Updated 2026
🏠 O Level Home 📘 Paid PDF Course 🧩 Free Mock Test
👉 सभी chapters देखने के लिए swipe करें
📑 Table of Contents — किसी भी topic पर सीधे जाएँ
3.0

HTML Introduction & Basic Structure — वेब पेज का ढाँचा

HTML (HyperText Markup Language) वह भाषा है जिससे वेब पेज का ढाँचा बनाया जाता है। यह content को structure देती है ताकि browser उसे सही तरह दिखा सके।

🧩 "Markup" का मतलब

"Markup" का मतलब है — किसी text को tags से घेरकर उसका अर्थ बताना।

🌐 एक साधारण paragraph tag
<p>यह एक पैराग्राफ है</p>

यहाँ <p> टैग बताता है कि अंदर का text एक paragraph है।

💡 Remember: HTML केवल structure बनाती है; रंग-रूप के लिए CSS और behaviour (क्लिक, animation) के लिए JavaScript का प्रयोग होता है।

📚 Types of HTML (Versions)

Versionविवरण
HTML 4.01पुराना standard, आज भी कुछ जगह मिलता है
XHTMLHTML + XML rules का मिश्रण, strict syntax
HTML5वर्तमान standard — semantic tags, audio/video, form validations आदि के साथ

📦 HTML Elements के प्रकार

  • Block-level: नई लाइन से शुरू होते हैं (जैसे <div>, <p>, <section>)।
  • Inline: एक ही लाइन में आते हैं (जैसे <span>, <a>, <strong>)।
  • Semantic: जिनके नाम से मतलब स्पष्ट हो (जैसे <header>, <nav>, <article>)।

🧱 Basic Structure of an HTML Document

हर HTML फ़ाइल की शुरुआत DOCTYPE से होती है, उसके बाद <html>, <head> व <body> आते हैं।

HTML Document का Skeleton

<!DOCTYPE html> <html> <head> — title, meta, CSS/JS links(user को नहीं दिखता) <body> — heading, paragraph, image...(browser में दिखने वाला content) </html>
🌐 index.html — पूरा template
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, HTML!</h1>
  <p>यह मेरा पहला वेब पेज है।</p>
</body>
</html>

🔍 Line-by-line Explanation

Tagकाम
<!DOCTYPE html>बताता है कि यह HTML5 document है
<html lang="en">पूरी HTML का root element व भाषा घोषित करता है
<head>metadata — title, meta tags, CSS/JS links
<meta charset="UTF-8">सभी भाषाओं (हिन्दी सहित) के characters सही दिखाने के लिए
<meta name="viewport">mobile devices के लिए responsive layout
<title>browser tab में दिखने वाला page title
<body>यूज़र को दिखने वाला content

✅ Quick Checklist

  • ऊपर हमेशा <!DOCTYPE html> लिखें।
  • <meta charset="UTF-8"> व viewport meta ज़रूर रखें।
  • एक ही <h1> per page हो।
  • Semantic structure use करें — header, main, footer।
  • External CSS/JS files से design व logic अलग रखें।
Exam Point: HTML document 4 मुख्य parts से बनता है — DOCTYPE, html, head, body। meta charset="UTF-8" व viewport meta हर page में ज़रूरी हैं। एक page पर सिर्फ एक <h1> होना चाहिए।
3.1

Head Section & Elements — पेज की Metadata

<head> वह भाग है जहाँ पेज के बारे में metadata होता है — ज़्यादातर स्क्रीन पर दिखता नहीं, पर browser, search engines, performance व accessibility के लिए बहुत ज़रूरी है।

🧱 Minimal, Correct Head (HTML5)

🌐 head.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <meta name="description" content="Short SEO description (140–160 chars)">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="/styles.css">
  <script src="/script.js" defer></script>
</head>

📑 Common Head Elements

Elementकाम
meta charset="UTF-8"Unicode support — हिन्दी/इमोजी सही दिखें; head के सबसे ऊपर रखें
meta name="viewport"Mobile responsive layout के लिए ज़रूरी
<title>Tab title; search result में blue link भी यही; 60-65 chars तक
meta name="description"SEO summary, 140-160 characters
link rel="canonical"Duplicate URLs avoid करने के लिए
link rel="icon"Favicon (tab पर छोटा icon)
link rel="stylesheet"CSS file जोड़ना (render-blocking)

⚡ JavaScript — defer vs async

⚙️ script loading strategies
<script src="/app.js" defer></script>
<!-- HTML parse खत्म होने के बाद, order बना रहता है -->

<script src="/ads.js" async></script>
<!-- जैसे ही load हो, order की गारंटी नहीं -->
💡 Note: defer = ज़्यादातर sites के लिए default choice (safe ordering + non-blocking)। async = independent scripts (analytics/ads) के लिए ठीक।

📱 Social Share (Open Graph)

🌐 Open Graph meta tags
<meta property="og:title" content="HTML Head – Guide">
<meta property="og:description" content="Everything explained.">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:type" content="article">

✅ Head Checklist

  • UTF-8, viewport, सही title व meaningful description।
  • एक favicon, canonical link, robots meta (जब ज़रूरी हो)।
  • CSS ऊपर; JS को defer (या async) के साथ नीचे load करें।
  • Social share meta (OG/Twitter) — blog/article pages पर helpful।
Exam Point: Head में content दिखता नहीं (सिवाय title tab में)। meta charset सबसे ऊपर, viewport responsive के लिए, defer script ordering बनाए रखता है जबकि async नहीं।
3.2

Formatting Tags + Div & Pre — Text को Meaning व Style देना

Formatting Tags टेक्स्ट को सुंदर व अर्थपूर्ण बनाते हैं — बताते हैं कि कौन-सा शब्द महत्वपूर्ण है, कौन-सा emphasized है। HTML में ये केवल "style" नहीं बल्कि "meaning" भी बताते हैं।

🧩 Common Formatting Tags

🌐 formatting-tags.html
<p><b>Bold Text</b> — सिर्फ मोटा दिखता है (visual)</p>
<p><strong>Strong Text</strong> — महत्वपूर्ण शब्द (semantic)</p>
<p><i>Italic Text</i> — तिरछा दिखता है</p>
<p><em>Emphasized Text</em> — किसी शब्द पर ज़ोर</p>
<p><mark>Highlighted Text</mark></p>
<p>Water formula: H<sub>2</sub>O</p>
<p>10<sup>2</sup> = 100</p>
<p><del>Deleted Text</del></p>
Tagकाम
<b>केवल bold दिखाता है; meaning नहीं बताता
<strong>महत्वपूर्ण टेक्स्ट; screen readers भी emphasis देते हैं
<i>italic दिखाता है — foreign words/thoughts के लिए
<em>किसी शब्द पर भावनात्मक ज़ोर
<mark>text को highlight करता है (yellow background)
<sub>/<sup>subscript/superscript (H₂O, 10²)
<del>/<s>हटाए गए text को दिखाने के लिए
💡 Tip: Visual tags (<b>, <i>) और semantic tags (<strong>, <em>) में फर्क समझें — दोनों दिखने में एक जैसे, पर meaning अलग।

📦 <div> Tag (Block Container)

<div> HTML में content के sections को group करने के लिए उपयोग होता है। यह block-level element है — नई लाइन से शुरू होता है व पूरी चौड़ाई लेता है।

🌐 div example — id व class के साथ
<div id="intro" class="box">
  Welcome to my website!
</div>

<style>
  .box { background:#eaf2ff; padding:10px; border-radius:8px; }
</style>
  • id: Unique identifier (हर पेज में केवल एक बार)।
  • class: Reusable group name (multiple elements में use हो सकता है)।

📜 <pre> Tag (Preformatted Text)

<pre> tag text को उसी spacing व line-breaks में दिखाता है जैसे लिखा गया है — fixed-width (monospace) font में।

🌐 pre + code — documentation style
<pre><code>
function greet() {
  console.log("Hello World!");
}
</code></pre>
💡 Tip: <pre> के अंदर <code> tag मिलाकर code block दिखाना documentation/tutorials में सबसे common तरीका है।
Exam Point: <b> visual, <strong> semantic (महत्वपूर्ण)। <div> block-level container है। <pre> spacing/line-breaks को हूबहू (as-is) दिखाता है।
3.3

Anchor Links & Named Anchors — Navigation का दिल

<a> (anchor) से हम किसी URL पर navigate करते हैं — यह पेज के बाहर भी हो सकता है (external link) और उसी पेज के अंदर किसी section तक jump भी कर सकता है (named anchor)।

🔗 External Link

🌐 external link with security
<a href="https://example.com" target="_blank" rel="noopener">
  Visit Example.com
</a>
  • href = जहाँ जाना है।
  • target="_blank" = नई tab में खोलो।
  • rel="noopener" = सुरक्षा के लिए (नई tab को parent तक पहुँच न मिले)।

📧 Email / Phone / Download

🌐 special href types
<a href="mailto:support@example.com">Email us</a>
<a href="tel:+911234567890">Call: +91 12345 67890</a>
<a href="/notes/cheatsheet.pdf" download>Download PDF</a>

⚓ Named Anchors (Same-page Navigation)

Section को id दीजिए, और link में #id लिखिए। क्लिक करने पर पेज उसी section तक स्क्रॉल कर जाता है।

🌐 same-page jump navigation
<nav>
  <a href="#intro">Intro</a> |
  <a href="#contact">Contact</a>
</nav>

<h2 id="intro">Introduction</h2>
<p>This is the intro section.</p>

<h2 id="contact">Contact</h2>
<p>Email: hello@example.com</p>
🧭 UX Tip: लंबे पेज में ऊपर "Back to Top" लिंक दें — <a href="#top">⬆ Back to top</a>, और पेज के ऊपर किसी element को id="top" दे दें।

🔀 Relative vs Absolute URLs

TypeExampleकब उपयोग
Absolutehttps://site.com/pageपूरा address, दूसरे domain के लिए
Relative/page.html या ../index.htmlउसी site के भीतर links

♿ Accessibility & SEO Best Practices

  • Link text अर्थपूर्ण रखें — "Read HTML Tables Guide" ✔, "Click here" ✖।
  • एक ही पेज पर duplicate link text अलग-अलग गंतव्य पर न दें।
  • स्क्रीन-रीडर users के लिए skip link जोड़ें।
Exam Point: Same-page jump = target element को id, link में #id। External link सुरक्षित रखने के लिए target="_blank" + rel="noopener"। mailto: व tel: से email/call link बनते हैं।
3.4

Image Tag (img) — पेज पर चित्र दिखाना

<img> tag का उपयोग webpage पर image दिखाने के लिए किया जाता है। यह self-closing tag है। हर image के लिए कम-से-कम src व alt देना अनिवार्य है।

📷 Basic Example

🌐 basic image tag
<img src="flower.jpg" alt="Beautiful Flower">
  • src: image file का location या URL।
  • alt: alternate text — image load न होने पर दिखता है व screen readers पढ़ते हैं।

⚙️ Common Image Attributes

🌐 width, height, title, lazy loading
<img src="nature.jpg" alt="Nature Scene"
     width="300" height="200"
     title="Green Forest" loading="lazy">
Attributeकाम
width / heightimage का आकार (px या %)
titlehover करने पर tooltip दिखाता है
loading="lazy"scroll करके पहुँचने पर ही load — performance के लिए

🖼️ Image + Caption (figure/figcaption)

🌐 figure with caption
<figure>
  <img src="sunset.jpg" alt="Sunset over the sea" width="400">
  <figcaption>A beautiful sunset view over the sea.</figcaption>
</figure>

🌐 Clickable Image

🌐 image wrapped in a link
<a href="https://boostingskills.com" target="_blank">
  <img src="logo.png" alt="Boosting Skills Logo" width="150">
</a>

📱 Responsive Images

🌐 responsive width
<img src="banner.jpg" alt="Responsive Banner"
     style="width:100%; height:auto;">
💡 Tip: हमेशा height को auto रखें ताकि image का aspect ratio बिगड़े नहीं।

🚫 Common Image Errors

  • ❌ Wrong path — src गलत folder में point कर रहा है।
  • ❌ Missing file — नाम या extension गलत (.jpeg vs .jpg)।
  • ❌ No alt — SEO व accessibility में नुकसान।
Exam Point: img self-closing tag है; src व alt अनिवार्य attributes हैं। figure+figcaption से caption दिखता है। loading="lazy" performance बढ़ाता है।
3.5

Paragraphs & Comments — Text व Developer Notes

HTML में text को अलग-अलग भागों में बाँटने के लिए <p> tag का प्रयोग होता है — यह block-level element है व अपने आप vertical spacing देता है।

🧩 Basic Syntax

🌐 दो paragraphs
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
⚠️ ध्यान रखें: <p> के अंदर कभी block elements जैसे <div> या <h1> न डालें — यह invalid HTML है।

🧭 Paragraph Alignment

🌐 text-align values
<p style="text-align:left;">Left aligned</p>
<p style="text-align:center;">Center aligned</p>
<p style="text-align:justify;">Justified paragraph.</p>

💬 Comments (<!-- -->)

Comments केवल developer के लिए notes होते हैं — browser में दिखाई नहीं देते। Code समझाने, याद रखने या temporarily disable करने के लिए उपयोगी।

🌐 single व multi-line comments
<!-- यह एक single-line comment है -->

<p>HTML Comments Example</p>

<!--
  यह एक multi-line comment है।
  Browser इस हिस्से को ignore करेगा।
-->
💡 Tip: किसी section को अस्थायी रूप से hide करना हो तो उसे comment में लपेट दें: <!-- <p>...</p> -->
Exam Point: <p> block-level है; अंदर block elements नहीं डाल सकते। Comment syntax: <!-- comment --> — browser में render नहीं होता, केवल developer के लिए।
3.6

Tables — Rows व Columns में Data

HTML में <table> का उपयोग data को rows व columns में दिखाने के लिए होता है — ठीक Excel जैसा। Basic structure: table → tr → th/td।
🌐 basic table
<table>
  <tr>
    <th>Name</th>
    <th>Course</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>HTML</td>
    <td>85</td>
  </tr>
</table>
Tagकाम
<table>पूरी टेबल का container
<tr>एक row (table row)
<th>heading cell (bold व centered by default)
<td>data cell

🎨 Border, Cellpadding & Cellspacing

cellpadding = cell के अंदर का spacing (text व border के बीच)। cellspacing = दो cells के बीच की दूरी।

🌐 border + cellpadding + cellspacing
<table border="1" cellpadding="10" cellspacing="5">
  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Delhi</td>
  </tr>
</table>
🧠 Modern तरीका: इन्हें CSS से control किया जाता है — border-spacing व padding properties से।

📏 Border-Collapse (CSS)

🌐 double borders हटाना
<table style="border-collapse: collapse;" border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Sneha</td><td>95</td></tr>
</table>

📚 Rowspan & Colspan

Cell को कई rows/columns तक फैलाने के लिए rowspan व colspan attributes उपयोग होते हैं।

🌐 merged cells
<table border="1" cellpadding="8">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>HTML</th>
    <th>CSS</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>85</td>
    <td>88</td>
  </tr>
</table>
rowspan="2" → cell दो rows तक फैलेगा। colspan="2" → cell दो columns तक फैलेगा।
Exam Point: table→tr→th/td structure। rowspan cell को rows में, colspan columns में फैलाता है। border-collapse:collapse से double borders एक line में merge होते हैं।
3.7

Lists: Ordered, Unordered, Definition — क्रमबद्ध व Bullet सूचियाँ

HTML में तीन मुख्य प्रकार की lists होती हैं — Ordered (<ol>) numbers के साथ, Unordered (<ul>) bullets के साथ, व Definition (<dl>) term व meaning के लिए। हर item <li> में लिखा जाता है।

1️⃣ Ordered List (<ol>)

🌐 numbered list
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
type valueResult
1 (default)1, 2, 3...
AA, B, C...
aa, b, c...
II, II, III... (Roman)
ii, ii, iii... (small Roman)
🌐 type attribute से numbering बदलना
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
</ol>

2️⃣ Unordered List (<ul>)

🌐 bulleted list
<ul type="square">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

type values: disc (default black circle), circle (hollow), square।

3️⃣ Nested Lists

🌐 list के अंदर list
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

4️⃣ Definition List (<dl>)

शब्दों व उनके अर्थों को dictionary-style दिखाने के लिए — <dt> (term) व <dd> (definition)।

🌐 dl/dt/dd
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language – structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets – styling web pages.</dd>
</dl>
🧠 Use Case: Glossaries, FAQs, Terminology sections।
Exam Point: ol=ordered (numbered), ul=unordered (bulleted), dl=definition (dt+dd)। type attribute से numbering/bullet style बदलती है — A/a/I/i for ol, disc/circle/square for ul।
3.8

Forms & Input Types — User से Data लेना

Web pages पर user से data collect करने के लिए HTML forms का उपयोग होता है — login, contact, feedback, signup आदि।
🌐 basic form
<form action="submit.php" method="post">
  <label>Enter your name:</label>
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

🧩 Important Form Attributes

Attributeकाम
actionform data कहाँ भेजना है (URL/file)
methoddata भेजने का तरीका — get या post
nameform की पहचान
targetresponse कहाँ दिखेगा (_blank, _self)
GET data को URL में दिखाता है (search forms में useful)। POST data छुपाकर भेजता है (login/signup जैसे secure forms में useful)।

🧱 Form Elements

  • <input> → single-line input field
  • <textarea> → multi-line text field
  • <select><option> → dropdown menu
  • <button> → button (submit/reset/custom)
  • <label> → input के लिए text label

🔽 Dropdown, Radio & Checkbox

🌐 select, radio, checkbox
<select name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<input type="checkbox" name="skill" value="html"> HTML
<input type="checkbox" name="skill" value="css"> CSS
💡 Note: एक ही name रखने से radio group में केवल एक option select होता है। Checkbox से user एक या अधिक options चुन सकता है।

📅 Other Common Input Types

typeकाम
emailEmail address input
passwordPassword hidden with ●
numberNumeric input with arrows
dateDate picker
colorColor selector
rangeSlider input
fileFile upload

⚙️ Important Input Attributes

🌐 required, pattern, autofocus
<input type="text" name="username" placeholder="Enter name" required autofocus>
<input type="password" name="pass" minlength="6" maxlength="12">
Attributeकाम
placeholderhint text दिखाता है
requiredsubmit से पहले भरना ज़रूरी
readonlyfield read-only बनाता है
disabledinput को बंद करता है
maxlengthmaximum character limit
autofocuspage load पर focus set करता है

🚀 Submit & Reset Buttons

🌐 submit/reset
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
Exam Point: action=कहाँ भेजना है, method=कैसे (get/post)। GET data URL में दिखता है, POST छुपा रहता है। required/pattern/autofocus HTML5 validation attributes हैं।
3.9

Frames (Legacy) — पुराना तरीका, अब Deprecated

Frames का उपयोग एक ही webpage में कई HTML documents को साथ दिखाने के लिए होता था — <frameset> व <frame> tags से। HTML5 में यह deprecated है; अब <iframe> उपयोग होता है।

🧩 Frameset Basic Structure

🌐 frameset (legacy, HTML4 तक)
<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>
⚠️ Note: <frameset> केवल पुराने HTML versions (HTML 4.01 तक) में चलता था। HTML5 में यह tag काम नहीं करता।

📏 Frameset Attributes

Attributeकाम
colswindow को vertical columns में बाँटता है
rowswindow को horizontal rows में बाँटता है
srcframe में कौन-सी file load होगी
nameframe का नाम (target linking के लिए)

🧱 Nested Frames

🌐 frame के अंदर frameset
<frameset rows="25%,75%">
  <frame src="top.html">
  <frameset cols="50%,50%">
    <frame src="left.html">
    <frame src="right.html">
  </frameset>
</frameset>

🚫 Frames क्यों Deprecated हैं?

  • ❌ Search engines frames को ठीक से crawl नहीं कर पाते।
  • ❌ Bookmarking व navigation में समस्या।
  • ❌ Mobile responsive design में compatibility खराब।
  • ✅ Modern replacement: <iframe> tag।
Exam Point: frameset body की जगह layout बनाता था (HTML4 तक)। cols=vertical split, rows=horizontal split। SEO व mobile issues के कारण deprecated; आज iframe उपयोग होता है।
3.10

HTML5 & Semantic Elements — अर्थपूर्ण Structure

HTML5 HTML का latest व सबसे powerful version है, जिसे W3C ने officially release किया। इसका उद्देश्य webpages को modern, fast व interactive बनाना है — Structure + Multimedia + Semantics + APIs।

📋 HTML5 Document Structure

🌐 semantic layout skeleton
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Example</title>
</head>
<body>
  <header>Header Area</header>
  <nav>Navigation Menu</nav>
  <section>
    <article>Main Content</article>
  </section>
  <aside>Sidebar</aside>
  <footer>Footer Area</footer>
</body>
</html>

Semantic Layout — Page का Anatomy

<header> <nav> <main> / <section><article> — main content <aside>Sidebar <footer>

🧩 What are Semantic Elements?

Semantic Elements वे HTML tags हैं जो अपने नाम से ही बताते हैं कि उनके अंदर किस प्रकार का content होगा — developer व browser दोनों को content का अर्थ स्पष्ट होता है।

🌐 Common HTML5 Semantic Elements

TagDescription
<header>Website/section का शीर्ष भाग (logo, heading, menu)
<nav>Navigation links के लिए
<section>Page को logical parts में बाँटने के लिए
<article>Independent content जैसे blog post
<aside>Side info या advertisement
<footer>Copyright/contact info
<main>Page के central content area के लिए
<figure>/<figcaption>Images व उनके captions के लिए

💡 Advantages of Semantic Tags

  • ✅ Code readability व structure बेहतर।
  • ✅ SEO में मदद मिलती है।
  • ✅ Accessibility tools (screen readers) content समझ पाते हैं।
  • ✅ Maintenance आसान व organized रहता है।
Exam Point: HTML5 = Structure+Multimedia+Semantics+APIs। Semantic tags नाम से meaning बताते हैं (header, nav, section, article, aside, footer, main) — SEO व accessibility दोनों सुधारते हैं।
3.11

HTML5 Audio & Video — बिना Plugin Multimedia

HTML5 में अब audio/video play करने के लिए किसी external plugin (जैसे Flash) की ज़रूरत नहीं। इसके लिए दो powerful tags मिलते हैं — <audio> व <video>, दोनों built-in controls के साथ आते हैं।

🎵 <audio> Tag

🌐 audio with multiple sources
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
Attributeकाम
controlsPlay/Pause/Volume दिखाता है
autoplayPage load होते ही play होता है
loopबार-बार दोहराता है
mutedaudio muted रहता है
⚠️ Note: Modern browsers में autoplay केवल muted mode में काम करता है।

🎥 <video> Tag

🌐 video with poster
<video width="480" height="300" poster="thumb.jpg" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
poster attribute video load होने से पहले दिखने वाली preview image होती है।

📡 Embedding YouTube Video

🌐 iframe से YouTube embed
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  allowfullscreen>
</iframe>

🎯 Supported Formats

MediaFormatsExtension
AudioMP3, OGG, WAV.mp3, .ogg, .wav
VideoMP4, WebM, Ogg.mp4, .webm, .ogv
💡 Best Practice: Multiple <source> formats दें ताकि हर browser support करे; autoplay को हमेशा muted रखें; बड़ी files के लिए external hosting (YouTube/CDN) उपयोग करें।
Exam Point: audio व video दोनों में controls, autoplay, loop, muted attributes होते हैं। video में अतिरिक्त poster व width/height। autoplay आज केवल muted के साथ चलता है।
3.12

HTML5 Form Validations — बिना JavaScript Validation

HTML5 ने form validations आसान बना दी हैं। Attributes जैसे required, pattern, autofocus से बिना JavaScript के basic validations हो जाती हैं।

📌 required Attribute

🌐 field खाली नहीं छोड़ सकते
<form>
  Username: <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>
💡 Note: Browser automatically message दिखाता है: "Please fill out this field."

📌 pattern Attribute (Regex)

🌐 custom format validation
<input type="text" name="username" pattern="[A-Za-z]+" required>
<input type="tel" pattern="[0-9]{10}" required>
⚙️ Explanation: पहला input केवल A-Z/a-z letters accept करेगा। दूसरा exactly 10 digits चाहेगा — mobile number के लिए।

📌 autofocus Attribute

🌐 page load पर cursor set
<input type="text" name="fname" autofocus placeholder="Type your name">
💡 Note: केवल एक input पर autofocus होना चाहिए — multiple autofocus tags ignore होते हैं।

🧩 Common HTML5 Input Types (Validation-friendly)

TypeDescriptionExample
emailValid email format check करता है<input type="email" required>
numberकेवल numeric values<input type="number" min="1" max="100">
dateDate picker दिखाता है<input type="date">
rangeSlider से value select<input type="range" min="0" max="100">
telPhone number के लिए<input type="tel" pattern="[0-9]{10}">
urlWeb address के लिए<input type="url">

🔢 number Validation with min/max/step

🌐 age range check
<input type="number" min="18" max="60" required>
<input type="number" min="0" max="50" step="5">

📅 date Input with Range

🌐 built-in calendar picker
<input type="date" min="2024-01-01" max="2025-12-31">
Exam Point: required = खाली नहीं छोड़ सकते; pattern = regex से custom format check; autofocus = page load पर cursor। ये सब बिना JavaScript काम करते हैं — HTML5 का बड़ा फायदा।
3.13

HTML5 Embed Multimedia — External Content जोड़ना

External multimedia — videos, PDFs, maps, documents — को webpage में दिखाने के लिए <embed>, <object> व <iframe> tags उपयोग होते हैं।

🎬 <embed> Tag

External file को सीधे जोड़ने के लिए — यह self-closing tag है।

🌐 embed video/pdf
<embed src="sample.mp4" width="400" height="300">
<embed src="sample.pdf" width="600" height="500" type="application/pdf">

🗺️ Embedding Google Maps

🌐 map embed (Share → Embed a map)
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600" height="400" style="border:0;"
  allowfullscreen loading="lazy">
</iframe>
💡 Note: loading="lazy" map को तभी load करता है जब user उसे देखे — performance बेहतर होती है।

📦 <object> Tag (Fallback के साथ)

🌐 object with fallback content
<object data="demo.pdf" type="application/pdf" width="600" height="500">
  <p>If not displayed, <a href="demo.pdf">click here</a>.</p>
</object>
⚠️ Note: कुछ websites security policy (CORS/X-Frame-Options) के कारण iframe में embed नहीं होने देतीं।
Exam Point: embed=direct external file जोड़ना (self-closing); iframe=websites/maps/videos embed; object=fallback content के साथ multimedia। तीनों external content जोड़ने के अलग तरीके हैं।
3.14

HTML5 Layout (Semantic + CSS) — पूरा Page Design

Semantic layout tags (header, nav, main, section, aside, footer) के साथ CSS मिलाकर एक सुंदर, responsive layout बनता है।

📄 पूरा Layout Example (Flexbox के साथ)

🌐 semantic layout + CSS
<body>
  <header><h1>My Website</h1></header>

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>

  <main style="display:flex;">
    <section style="flex:3;">
      <article>Main article content</article>
    </section>
    <aside style="flex:1;">Sidebar links</aside>
  </main>

  <footer>&copy; 2025 MyWebsite</footer>
</body>

📱 Responsive Layout Tip (Media Query)

🌐 mobile पर layout stack करना
@media (max-width: 768px) {
  main { flex-direction: column; }
  section, aside { margin: 0 0 10px 0; }
}
📱 Note: यह code छोटे screen (mobile) पर layout को vertically stack कर देगा।

💡 Advantages of Semantic Layout

  • ✅ Code readability बेहतर होती है।
  • ✅ SEO में मदद मिलती है (search engines structure समझते हैं)।
  • ✅ Accessibility tools के लिए helpful।
  • ✅ CSS के साथ styling आसान व organized।
Exam Point: Semantic layout tags (header/nav/main/section/aside/footer) + CSS Flexbox/Grid से responsive design बनता है। Media query से mobile पर layout column में stack होता है।
3.15

HTML Iframe (Inline Frame) — एक Page के अंदर दूसरा Page

Iframe का अर्थ है Inline Frame — एक webpage के अंदर दूसरा webpage दिखाना। Tag: <iframe>। इसे "window inside a window" समझ सकते हैं।

🧩 Basic Syntax

🌐 basic iframe
<iframe src="https://www.example.com" width="600" height="400"></iframe>
⚠️ Note: कुछ websites (जैसे banking portals) security policy के कारण iframe में open नहीं होतीं।

📋 Important Iframe Attributes

Attributeकाम
srcIframe में कौन-सी webpage दिखेगी
width/heightIframe का आकार तय करता है
nameIframe को नाम देने के लिए (target linking)
allowfullscreenVideo को fullscreen में चलाने की अनुमति
loading="lazy"Iframe को lazy load करता है

🧭 Targeting Links inside Iframe

🌐 link click पर iframe के अंदर page खुलना
<a href="page1.html" target="myFrame">Open Page 1</a>
<a href="page2.html" target="myFrame">Open Page 2</a>

<iframe name="myFrame" width="600" height="400"></iframe>

🚫 Security Tips

  • ⚠️ कुछ websites iframe embedding को block करती हैं (CORS/X-Frame-Options)।
  • ✅ केवल trusted sources (YouTube, Google Maps) को ही embed करें।
  • 🔒 Sensitive data वाली sites को iframe में न दिखाएँ।
🌐 sandbox — iframe content को isolate करना
<iframe src="demo.html" sandbox></iframe>
Exam Point: iframe = webpage के अंदर दूसरा webpage embed करना। target attribute link को iframe के name से match कराकर वहीं खोलता है। sandbox attribute security isolation देता है।
3.16

Summary — Quick Revision (Exam से पहले पढ़ें)

  • HTML = markup language जो content की structure बनाती है; document = DOCTYPE + html + head + body।
  • Head = metadata (title, meta, CSS/JS links); UTF-8 व viewport ज़रूरी।
  • Formatting tags: b/i visual, strong/em semantic; div=block container; pre=preformatted text।
  • Anchor: href से navigate; #id से same-page jump; target="_blank"+rel="noopener" सुरक्षा के लिए।
  • Image: src व alt अनिवार्य; figure+figcaption से caption; loading="lazy" performance के लिए।
  • Paragraph: block-level; comment <!-- --> browser में नहीं दिखता।
  • Table: table→tr→th/td; rowspan/colspan से cells merge; border-collapse से clean borders।
  • Lists: ol=numbered, ul=bulleted, dl=definition (dt+dd)।
  • Forms: action+method से data भेजना; required/pattern/autofocus HTML5 validations।
  • Frames deprecated हैं; modern replacement = iframe।
  • HTML5 Semantic tags: header, nav, section, article, aside, footer, main — SEO व accessibility सुधारते हैं।
  • Audio/Video: controls, autoplay(muted), loop; multiple <source> formats दें।
  • Embed: embed=direct file, object=fallback के साथ, iframe=webpage/maps/videos।
  • Iframe: एक page के अंदर दूसरा page; sandbox से security isolation।
3.17

Model Questions — 50 MCQs + 15 Theory Questions

❓ A. Multiple Choice Questions (50)

#प्रश्न व उत्तर
1

HTML का पूरा नाम है —

(a) High Text Markup Language(b) HyperText Markup Language(c) Hyper Transfer Markup Language(d) Home Text Making Language
✔ सही उत्तर: (b) HyperText Markup Language
2

HTML document की शुरुआत होती है —

(a) <html>(b) <!DOCTYPE html>(c) <head>(d) <body>
✔ सही उत्तर: (b) <!DOCTYPE html>
3

User को दिखने वाला content कहाँ लिखा जाता है?

(a) <head>(b) <body>(c) <title>(d) <meta>
✔ सही उत्तर: (b) <body>
4

Special characters (हिन्दी सहित) सही दिखाने के लिए —

(a) meta viewport(b) meta charset="UTF-8"(c) meta description(d) title tag
✔ सही उत्तर: (b) meta charset="UTF-8"
5

Browser tab में दिखने वाला text आता है —

(a) <title>(b) <header>(c) <body>(d) <meta>
✔ सही उत्तर: (a) <title>
6

Mobile responsive layout के लिए ज़रूरी है —

(a) meta charset(b) meta viewport(c) meta keywords(d) meta author
✔ सही उत्तर: (b) meta viewport
7

Script ordering बनाए रखते हुए non-blocking load करता है —

(a) async(b) defer(c) sync(d) preload
✔ सही उत्तर: (b) defer
8

केवल bold दिखाता है, meaning नहीं बताता —

(a) <strong>(b) <b>(c) <em>(d) <mark>
✔ सही उत्तर: (b) <b>
9

महत्वपूर्ण (semantic) text के लिए —

(a) <i>(b) <u>(c) <strong>(d) <small>
✔ सही उत्तर: (c) <strong>
10

Text को highlight (yellow background) करता है —

(a) <mark>(b) <del>(c) <sub>(d) <code>
✔ सही उत्तर: (a) <mark>
11

Block-level container tag है —

(a) <span>(b) <div>(c) <a>(d) <strong>
✔ सही उत्तर: (b) <div>
12

Text को spacing सहित हूबहू दिखाता है —

(a) <pre>(b) <p>(c) <div>(d) <span>
✔ सही उत्तर: (a) <pre>
13

Anchor tag का उपयोग होता है —

(a) image दिखाने के लिए(b) link बनाने के लिए(c) table बनाने के लिए(d) form बनाने के लिए
✔ सही उत्तर: (b) link बनाने के लिए
14

नई tab में लिंक खोलने के लिए —

(a) target="_self"(b) target="_blank"(c) target="_top"(d) target="_new"
✔ सही उत्तर: (b) target="_blank"
15

Same-page section पर jump करने के लिए —

(a) href="#id"(b) href="mailto:"(c) href="tel:"(d) href="ftp:"
✔ सही उत्तर: (a) href="#id"
16

Email link बनाने के लिए —

(a) href="email:"(b) href="mailto:"(c) href="mail@"(d) href="send:"
✔ सही उत्तर: (b) href="mailto:"
17

img tag में image दिखाने के लिए अनिवार्य attribute —

(a) title(b) src(c) loading(d) width
✔ सही उत्तर: (b) src
18

Image alternate text देने के लिए —

(a) alt(b) title(c) src(d) name
✔ सही उत्तर: (a) alt
19

Image + Caption साथ दिखाने के लिए —

(a) div + p(b) figure + figcaption(c) span + label(d) img + title
✔ सही उत्तर: (b) figure + figcaption
20

Image scroll पर आने पर load होने के लिए —

(a) loading="lazy"(b) loading="eager"(c) defer(d) async
✔ सही उत्तर: (a) loading="lazy"
21

Paragraph tag है —

(a) inline(b) block-level(c) semantic only(d) self-closing
✔ सही उत्तर: (b) block-level
22

HTML comment का सही syntax है —

(a) // comment(b) <!-- comment -->(c) /* comment */(d) # comment
✔ सही उत्तर: (b) <!-- comment -->
23

Table row बनाने के लिए tag —

(a) <td>(b) <tr>(c) <th>(d) <table>
✔ सही उत्तर: (b) <tr>
24

Table heading cell (bold व centered) —

(a) <td>(b) <th>(c) <caption>(d) <tr>
✔ सही उत्तर: (b) <th>
25

Cell को 2 rows तक फैलाने के लिए —

(a) colspan="2"(b) rowspan="2"(c) merge="2"(d) span="2"
✔ सही उत्तर: (b) rowspan="2"
26

Cell को 2 columns तक फैलाने के लिए —

(a) colspan="2"(b) rowspan="2"(c) width="2"(d) cols="2"
✔ सही उत्तर: (a) colspan="2"
27

Double borders को एक line में merge करता है —

(a) border-spacing(b) border-collapse: collapse(c) cellpadding(d) border: none
✔ सही उत्तर: (b) border-collapse: collapse
28

Numbered list बनाने के लिए tag —

(a) <ul>(b) <ol>(c) <dl>(d) <li>
✔ सही उत्तर: (b) <ol>
29

Bulleted list बनाने के लिए tag —

(a) <ol>(b) <ul>(c) <dl>(d) <list>
✔ सही उत्तर: (b) <ul>
30

Term व meaning दिखाने वाली list —

(a) <ol>(b) <ul>(c) <dl>(d) <table>
✔ सही उत्तर: (c) <dl>
31

Definition list में term के लिए tag —

(a) <dt>(b) <dd>(c) <li>(d) <th>
✔ सही उत्तर: (a) <dt>
32

ol में Roman numerals के लिए type value —

(a) type="1"(b) type="A"(c) type="I"(d) type="a"
✔ सही उत्तर: (c) type="I"
33

Form data server पर भेजने के लिए attribute —

(a) method(b) action(c) name(d) target
✔ सही उत्तर: (b) action
34

Data को URL में दिखाने वाला method —

(a) POST(b) GET(c) PUT(d) SEND
✔ सही उत्तर: (b) GET
35

Data छुपाकर भेजने वाला method (login जैसे secure forms) —

(a) GET(b) POST(c) HIDE(d) SAFE
✔ सही उत्तर: (b) POST
36

Multi-line text input के लिए tag —

(a) <input>(b) <textarea>(c) <select>(d) <label>
✔ सही उत्तर: (b) <textarea>
37

Dropdown menu बनाने के लिए —

(a) <select><option>(b) <input type="dropdown">(c) <list>(d) <menu>
✔ सही उत्तर: (a) <select><option>
38

एक ही group में केवल एक option select होने के लिए —

(a) checkbox(b) radio (same name)(c) textarea(d) select multiple
✔ सही उत्तर: (b) radio (same name)
39

Form submit से पहले field भरना ज़रूरी बनाने के लिए —

(a) required(b) disabled(c) readonly(d) hidden
✔ सही उत्तर: (a) required
40

Regex से custom format check करने के लिए attribute —

(a) pattern(b) required(c) autofocus(d) placeholder
✔ सही उत्तर: (a) pattern
41

Frames की जगह अब उपयोग होता है —

(a) <frameset>(b) <iframe>(c) <div>(d) <section>
✔ सही उत्तर: (b) <iframe>
42

frameset window को vertical columns में बाँटता है —

(a) rows(b) cols(c) src(d) name
✔ सही उत्तर: (b) cols
43

HTML5 Semantic tag नहीं है —

(a) <header>(b) <section>(c) <div>(d) <footer>
✔ सही उत्तर: (c) <div>div generic container है, semantic नहीं।
44

Navigation links रखने के लिए HTML5 tag —

(a) <nav>(b) <aside>(c) <article>(d) <main>
✔ सही उत्तर: (a) <nav>
45

Independent content (जैसे blog post) के लिए tag —

(a) <section>(b) <article>(c) <aside>(d) <header>
✔ सही उत्तर: (b) <article>
46

Audio/Video में play-pause controls दिखाने के लिए attribute —

(a) controls(b) autoplay(c) loop(d) muted
✔ सही उत्तर: (a) controls
47

Video load होने से पहले दिखने वाली preview image —

(a) thumbnail(b) poster(c) preview(d) cover
✔ सही उत्तर: (b) poster
48

Modern browsers में autoplay केवल तभी चलता है जब —

(a) loop हो(b) muted हो(c) controls हो(d) preload हो
✔ सही उत्तर: (b) muted हो
49

एक page के अंदर दूसरा webpage embed करने वाला tag —

(a) <embed>(b) <iframe>(c) <object>(d) <frame>
✔ सही उत्तर: (b) <iframe>
50

Iframe content को security के लिए isolate करने वाला attribute —

(a) sandbox(b) secure(c) isolate(d) lock
✔ सही उत्तर: (a) sandbox

📝 B. 15 Theory Questions (Short Answers)

  1. HTML क्या है? इसका document structure लिखिए।HTML एक markup language है जो web page की structure बनाती है। Basic structure: DOCTYPE html, फिर html tag के अंदर head (metadata) व body (visible content)।
  2. Head section में कौन-से important elements होते हैं?meta charset (UTF-8), meta viewport (responsive), title (tab text), meta description (SEO), link rel="stylesheet" (CSS), व script tags (JS, defer/async के साथ)।
  3. <b> और <strong> में अंतर बताइए।<b> केवल visual bold दिखाता है, कोई meaning नहीं देता। <strong> semantic tag है — महत्वपूर्ण content बताता है, screen readers भी इसे emphasis के साथ पढ़ते हैं।
  4. Named anchor (same-page navigation) कैसे बनाते हैं?जिस section पर जाना है उसे id दें (जैसे id="contact"), और link में #id लगाएँ (href="#contact")। क्लिक करने पर पेज उस section तक स्क्रॉल हो जाता है।
  5. img tag के ज़रूरी attributes कौन-से हैं?src (image का path/URL) व alt (alternate text, image लोड न होने पर या accessibility के लिए) — दोनों अनिवार्य माने जाते हैं। width, height, loading वैकल्पिक हैं।
  6. HTML में comment कैसे लिखते हैं व इसका उपयोग क्या है?Syntax: <!-- comment text -->। यह browser में render नहीं होता, केवल developer के लिए notes होता है — code समझाने या temporarily disable करने के लिए उपयोगी।
  7. rowspan व colspan का उपयोग समझाइए।rowspan="n" से एक cell n rows तक फैलता है; colspan="n" से एक cell n columns तक फैलता है। दोनों table cells को merge करने के लिए उपयोग होते हैं।
  8. HTML की तीन प्रकार की lists के नाम व उपयोग लिखिए।Ordered List (<ol>) — numbered items, क्रम मायने रखता है। Unordered List (<ul>) — bulleted items, क्रम मायने नहीं रखता। Definition List (<dl>) — term (dt) व उसकी definition (dd) के लिए।
  9. Form में action व method attributes का क्या काम है?action बताता है कि form data कहाँ (किस URL/file पर) भेजा जाए। method बताता है कैसे भेजा जाए — GET (URL में, कम secure) या POST (छुपाकर, secure forms के लिए)।
  10. HTML5 के कोई 5 form validation attributes लिखिए।required (field खाली न छोड़ें), pattern (regex से format check), autofocus (page load पर cursor), minlength/maxlength (character limit), व min/max (number/date range)।
  11. Frames क्यों deprecated हो गए? Modern replacement क्या है?Frames के कारण search engines crawl नहीं कर पाते थे, bookmarking व mobile responsiveness में समस्या होती थी। Modern HTML5 में इसकी जगह <iframe> उपयोग होता है।
  12. HTML5 Semantic Elements क्या हैं? कोई 5 उदाहरण दीजिए।Semantic elements वे tags हैं जो नाम से content का meaning बताते हैं। उदाहरण — header, nav, section, article, aside, footer, main। ये SEO व accessibility सुधारते हैं।
  13. audio व video tags के common attributes लिखिए।controls (play/pause दिखाना), autoplay (auto चलना — modern browsers में सिर्फ muted के साथ), loop (दोहराना), muted (बिना आवाज़)। video में अतिरिक्त poster व width/height।
  14. embed, object व iframe में अंतर बताइए।embed = external file (video/pdf) सीधे जोड़ने वाला self-closing tag। object = fallback content देने की सुविधा के साथ multimedia embed। iframe = पूरा webpage/map/video embed करने के लिए, सबसे flexible।
  15. iframe में security कैसे सुनिश्चित करें?केवल trusted sources (YouTube, Google Maps) को embed करें, sensitive data वाली sites iframe में न दिखाएँ, व sandbox attribute का उपयोग करें जो iframe content को parent page से isolate करता है।
Revision Tip: Document structure (DOCTYPE→html→head→body), img के src+alt, rowspan/colspan का फर्क, ol/ul/dl की पहचान, form का action+method, और semantic tags (header/nav/section/article/aside/footer) — ये facts इस chapter के आधे MCQs cover कर देते हैं।
FAQ

अक्सर पूछे जाने वाले प्रश्न

HTML क्या है?
HTML (HyperText Markup Language) एक markup language है जिसका उपयोग web pages की structure व content को define करने के लिए किया जाता है। यह content को tags से घेरकर उसका अर्थ बताती है।
HTML Document की basic structure कैसी होती है?
HTML document की basic structure में DOCTYPE html, html, head व body tags शामिल होते हैं। Head में metadata (title, meta tags) व Body में user को दिखने वाला content होता है।
HTML Tags कितने प्रकार के होते हैं?
HTML tags दो प्रकार के होते हैं — Paired Tags (जैसे <p>...</p>) जिनका opening व closing दोनों होता है, और Empty/Self-closing Tags (जैसे <br>, <img>, <input>) जिनका closing tag नहीं होता।
HTML में Attributes क्या होते हैं?
Attributes tag के बारे में extra information देते हैं, जैसे id, class, href, src, width, height, alt आदि। इन्हें हमेशा opening tag में लिखा जाता है।
HTML List कितने प्रकार की होती है?
HTML में तीन प्रकार की lists होती हैं — Ordered List (<ol>), Unordered List (<ul>), व Definition List (<dl>)।
HTML Table कैसे बनाई जाती है?
HTML table बनाने के लिए <table>, <tr>, <th> व <td> tags का उपयोग किया जाता है। rowspan व colspan से cells merge होते हैं।
HTML Form का उपयोग क्यों किया जाता है?
HTML Form user से input लेने के लिए उपयोग किया जाता है। इसमें textboxes, radio buttons, checkboxes, dropdowns व buttons शामिल होते हैं, जो action व method से server पर data भेजते हैं।
HTML5 Elements क्या होते हैं?
HTML5 elements जैसे <header>, <footer>, <section>, <article>, <nav>, <video>, <audio> webpages को semantic meaning व better structure देते हैं।

🎯 Chapter 3 पूरा हुआ! अब आगे बढ़ें

Chapter 4 में CSS की पूरी दुनिया — Selectors, Box Model, Flexbox, Grid, Colors, Positioning व Responsive Design तक।

Chapter 4 पढ़ें ➜
↑