Chapter 1: Introduction to Web Design Chapter 2: Editors Chapter 3: HTML Basics Chapter 4: CSS Chapter 5: CSS Framework Chapter 6: JavaScript & AngularJS Chapter 7: Photo Editor Chapter 8: Web Publishing & Browsing

👉 Swipe to see more

1️⃣ HTML: Introduction & Basic Structure

🔰 What is HTML?

HTML (HyperText Markup Language) वह भाषा है जिससे वेब पेज का ढांचा बनाया जाता है। यह content को structure देती है ताकि browser उसे सही तरह दिखा सके। जैसे हम किताब के पन्नों में headings, paragraphs और images लगाते हैं, वैसे ही HTML tags से एक web page तैयार होता है।

🧩 Meaning of “Markup”

“Markup” का मतलब है – किसी text को टैग्स से घेरकर उसका अर्थ बताना। उदाहरण के लिए:

<p>यह एक पैराग्राफ है</p>

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

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

📚 Types of HTML (Versions)

HTML 4.01 – पुराना standard, आज भी कुछ जगह मिलता है।
XHTML – HTML + 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> आते हैं। नीचे एक उदाहरण दिया गया है —

<!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>
  <a href="https://boostingskills.com/compile-code" target="_blank">
    🧪 Try this on Boosting Skills Compiler
  </a>
</body>
</html>

🔍 Explanation line-by-line

<!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"> – मोबाइल devices के लिए responsive layout।
<title> – browser tab में दिखने वाला page title।
<body> – यूज़र को दिखने वाला content (heading, paragraph, image आदि)।

🔗 Click here to run this code on Boosting Skills Compiler

🧠 Mini Version (Hello World)

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Hello</title>
<h1>Hello World!</h1>
<p>Minimal HTML works too!</p>

ब्राउज़र अपने-आप <html>, <head>, <body> मान लेता है, इसलिए यह भी चलेगा — पर सीखने के लिए पूरा template लिखना बेहतर है।

✅ 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 अलग रखें।

🧪 Practice Time: Boosting Skills Compiler पर Click करें और यह code run करके देखें।

2️⃣ Head Section & Elements of Head

🔰 What is <head>?

<head> वह भाग है जहाँ पेज के बारे में metadata होता है — जो ज़्यादातर स्क्रीन पर दिखता नहीं, पर browser, search engines, social media, performance और accessibility के लिए बहुत ज़रूरी है। जैसे: title, meta tags, CSS/JS links, favicons इत्यादि।

💡 Quick rule: Head में सही जानकारी = बेहतर SEO, सही rendering, तेज़ performance।

🧱 Minimal, Correct <head> (HTML5)

<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>

🔗 Try this head setup on Boosting Skills Compiler

📑 Common Head Elements (Deep Explain)

1) `<meta charset="UTF-8">`

Unicode सपोर्ट देता है ताकि हिन्दी/इमोजी सही दिखें।
हमेशा head के सबसे ऊपर रखें।

2) `<meta name="viewport">`

Mobile responsive layout के लिए ज़रूरी।
width=device-width, initial-scale=1.0 सबसे standard value है।

3) `<title>` (Tab Title)

ब्राउज़र टैब में text; search result में blue link भी यही होता है।
60–65 characters तक रखें; brand नाम अंत में जोड़ें।

4) SEO Meta

<meta name="description" content="Concise, compelling summary (140–160 chars)">
<meta name="keywords" content="(optional) html, head, tutorial">  <!-- Modern SEO में वैकल्पिक -->
<link rel="canonical" href="https://example.com/page">           <!-- Duplicate URLs avoid -->
<meta name="robots" content="index, follow">                      <!-- Crawl/Index control -->

5) Favicons & App Icons

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch.png">
<meta name="theme-color" content="#0b3ea9">

6) Stylesheets (CSS)

<link rel="stylesheet" href="/styles.css">                         <!-- Render-blocking -->
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>

एक ही main CSS रखें; critical CSS बहुत छोटा हो तो inline कर सकते हैं।

7) JavaScript – `defer` vs `async`

<script src="/app.js" defer></script>  <!-- HTML parse खत्म होने के बाद, order बना रहता है -->
<script src="/ads.js" async></script>  <!-- As soon as loaded, order की गारंटी नहीं -->

defer = most sites के लिए default choice (safe ordering + non-blocking).
async = independent scripts (analytics/ads) के लिए ठीक।

8) Performance Hints

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

9) Social Share (Open Graph / Twitter)

<meta property="og:title" content="HTML Head – Guide">
<meta property="og:description" content="Everything inside <head> explained.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

10) Structured Data (JSON-LD)

<script type="application/ld+json">{
  "@context":"https://schema.org",
  "@type":"Article",
  "headline":"HTML Head – Complete Guide",
  "author":{"@type":"Person","name":"Your Name"},
  "datePublished":"2025-01-01"
}</script>

11) Fonts & Icons

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

12) Other Useful

<base href="https://example.com/">                  <!-- सभी relative URLs का base -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- पुरानी IE compatibility -->
<noscript>JavaScript is required for best experience.</noscript>

🧪 Complete Demo Page (Head Best Practices)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Head Section – Best Practices | Demo</title>
  <meta name="description" content="Learn all important <head> tags: SEO, performance, icons, social, and scripts.">
  <link rel="canonical" href="https://example.com/head-demo">
  <meta name="robots" content="index, follow">

  <link rel="icon" href="/favicon.ico">
  <meta name="theme-color" content="#0b3ea9">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="/styles.css">

  <meta property="og:title" content="Head Section – Best Practices">
  <meta property="og:description" content="All important <head> tags explained.">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:type" content="article">
  <meta name="twitter:card" content="summary_large_image">

  <script type="application/ld+json">{
    "@context":"https://schema.org",
    "@type":"Article",
    "headline":"Head Section – Best Practices",
    "author":{"@type":"Person","name":"Your Name"}
  }</script>

  <script src="/analytics.js" async></script>   <!-- independent -->
  <script src="/app.js" defer></script>         <!-- main app -->
</head>
<body>
  <h1>Head Section – Demo</h1>
  <p>Open DevTools → Elements → <head> to inspect tags.</p>
  <p>
    <a href="https://boostingskills.com/compile-code" target="_blank" rel="noopener">
      Run this demo on Boosting Skills Compiler
    </a>
  </p>
</body>
</html>

🔗 Click to open the Compiler and test this full demo

✅ Head Checklist (Exam + Real Project)

UTF-8, viewport, एक सही title, और meaningful description.
एक favicon, canonical link, robots meta (जब जरूरी हो)।
CSS ऊपर; JS को defer (या async) के साथ नीचे की ओर load करें।
Social share meta (OG/Twitter) — ब्लॉग/लेख/कोर्स पेजों पर helpful।
जहाँ ज़रूरत हो: preconnect/preload/dns-prefetch से performance boost।

🧪 Practice: Boosting Skills Compiler खोलें , ऊपर के snippets पेस्ट करें और DevTools में <head> inspect करें।

3️⃣ Formatting Tags + Div & Pre

🔰 What are Formatting Tags?

Formatting Tags का उपयोग किसी टेक्स्ट को सुंदर और अर्थपूर्ण बनाने के लिए किया जाता है। ये बताती हैं कि कौन-सा शब्द महत्वपूर्ण (important) है, कौन-सा emphasized (ज़ोर दिया गया) है, कौन-सा highlighted या deleted है। HTML में formatting tags केवल “style” नहीं बल्कि “meaning” भी बताते हैं।

💡 Tip: Visual tags (जैसे <b>, <i>) और semantic tags (जैसे <strong>, <em>) में फर्क समझना ज़रूरी है।

🧩 Common Formatting Tags (with Examples)

<p>Normal Text</p>
<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><u>Underlined Text</u></p>
<p><s>Strikethrough</s> या <del>Deleted Text</del></p>
<p><mark>Highlighted Text</mark></p>
<p>Water formula: H<sub>2</sub>O</p>
<p>10<sup>2</sup> = 100</p>
<p><small>Small note text</small></p>
<p><code>Inline code text</code> — code दिखाने के लिए</p>
<p><blockquote>This is a long quoted text.</blockquote></p>

🔗 Try these formatting tags on Boosting Skills Compiler

💬 Explanation

<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 को दिखाने के लिए।
<code> — code snippet दिखाने के लिए fixed-width font।
<blockquote> — लंबा quoted टेक्स्ट अलग indent में।

📦 <div> Tag (Block Container)

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

<div style="border:1px solid #ccc; padding:10px;">
  <h2>About Me</h2>
  <p>My name is Rahul. I love web designing.</p>
</div>

🧪 Try this Div Example on Compiler

💡 Tip: Div के अंदर किसी section को style देने या JS के जरिए manipulate करने के लिए अक्सर class या id attributes का उपयोग किया जाता है।

<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 font में दिखता है (जैसे monospace)।

<pre>
Name     Subject    Marks
Rahul    HTML       90
Sneha    CSS        88
Ravi     JS         92
</pre>

ऊपर का text ब्राउज़र में वैसे ही spacing के साथ दिखाई देगा जैसे लिखा गया है।

🧪 Try this Preformatted Text Example on Compiler

💡 Tip: <pre> tag के अंदर <code> tag मिलाकर code block दिखाना बहुत common है:

<pre><code>
function greet() {
  console.log("Hello World!");
}
</code></pre>

यह तरीका documentation या tutorials में code दिखाने के लिए सबसे अच्छा है।

🧠 Summary

Formatting tags = text को meaning और visual style दोनों देना।
<div> = layout/sections को group करने के लिए।
<pre> = text/code को same spacing में दिखाने के लिए।
Practice: हर tag को Boosting Skills Compiler में चलाकर देखें।

🔗 Open Compiler and Practice Formatting Tags + Div & Pre

4️⃣ Anchor Links & Named Anchors

🔰 What is an Anchor (<a>)?

<a> (anchor) से हम किसी URL पर नेविगेट करते हैं—यह URL पेज के बाहर भी हो सकता है (external link) और उसी पेज के अंदर किसी section तक jump भी कर सकता है (named anchor / fragment).

💡 Rule of thumb: Link text हमेशा meaningful लिखें—“Click here” की बजाय “Download Syllabus (PDF)” जैसा लिखें। इससे SEO व Accessibility दोनों बेहतर होती है।

1) External Link (बाहरी पेज पर जाना)

<a href="https://example.com" target="_blank" rel="noopener">
  Visit Example.com
</a>

href = जहां जाना है।
target="_blank" = नई tab में खोलो।
rel="noopener" = सुरक्षा/प्रदर्शन के लिए (नयी tab को parent तक पहुँच न मिले)।

🔗 Try external link on Compiler

2) Relative vs Absolute URLs

<!-- Absolute (scheme + domain + path) -->
<a href="https://boostingskills.com/olevel">O-Level Home</a>

<!-- Relative (current page या site के संदर्भ में) -->
<a href="/olevel/chapter/m2-r5/html-basics">HTML Basics</a>
<a href="../index.html">Back to Index</a>

3) Email / Phone / File download

<a href="mailto:support@example.com">Email us</a>
<a href="tel:+911234567890">Call: +91 12345 67890</a>
<a href="/notes/html-cheatsheet.pdf" download>Download HTML Cheatsheet (PDF)</a>

4) Named Anchors (Same-page Navigation)

“Named anchor” का modern तरीका है: जिस सेक्शन पर जाना है, उसे id दीजिए, और link में #id लिखिए। क्लिक करने पर पेज उसी सेक्शन तक स्क्रॉल कर जाता है।

<!-- Navigation (top) -->
<nav>
  <a href="#intro">Intro</a> |
  <a href="#features">Features</a> |
  <a href="#contact">Contact</a>
</nav>

<!-- Sections (below) -->
<h2 id="intro">Introduction</h2>
<p>This is the intro section.</p>

<h2 id="features">Features</h2>
<p>Key features listed here.</p>

<h2 id="contact">Contact</h2>
<p>Email: hello@example.com</p>

🔗 Run same-page anchors on Compiler

🧭 Tip (UX): लंबा पेज हो तो ऊपर “Back to Top” लिंक दें—<a href="#top">⬆ Back to top</a> और पेज के बिलकुल ऊपर किसी तत्व को id="top" दे दें।

5) Linking to a Section on Another Page

<!-- Go to "faq" section on help.html -->
<a href="/help.html#faq">Read FAQs</a>

6) Old “name” Attribute (Legacy)

पुराने HTML में anchors के लिए name attribute इस्तेमाल होता था। HTML5 में id approach preferred है; फिर भी exam purpose के लिए syntax:

<a name="top"></a>   <!-- Legacy named anchor -->
<a href="#top">Back to Top</a>

⚠️ Modern projects में id का उपयोग करें। name केवल legacy/compatibility के लिए है।

7) Accessibility & SEO Best Practices

Link text को अर्थपूर्ण रखें: “Read HTML Tables Guide” ✔; “Click here” ✖
एक ही पेज पर duplicate link text अलग-अलग गंतव्य पर मत दें।
स्क्रीन-रीडर users के लिए skip link जोड़ें:

<a href="#main" class="skip-link">Skip to main content</a>
<main id="main">...</main>

<style>
  .skip-link { position:absolute; left:-9999px; }
  .skip-link:focus { left:8px; top:8px; background:#fffa; padding:8px; }
</style>

8) URL Fragment (Hash) कैसे काम करता है?

ब्राउज़र URL में #fragment देखकर उसी id="fragment" पर scroll करता है। यह client-side होता है—server पर नई request नहीं जाती।

9) Button-like Link (Design Tip)

<a href="https://boostingskills.com/compile-code" class="btn" target="_blank" rel="noopener">
  Try on Compiler
</a>

<style>
  .btn{display:inline-block;padding:8px 12px;border:1px solid #c7d2fe;
       border-radius:8px;text-decoration:none}
  .btn:hover{background:#eef2ff}
</style>

🔬 Complete Demo (All in One)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anchors Demo</title>
  <style>
    nav a{margin-right:8px}
    section{padding:24px 0;border-bottom:1px solid #eee}
  </style>
</head>
<body>

  <!-- Top anchor for "Back to top" -->
  <div id="top"></div>

  <h1>Anchor Links & Named Anchors</h1>

  <nav>
    <a href="#intro">Intro</a>
    <a href="#parts">Parts of a URL</a>
    <a href="#contact">Contact</a>
    <a href="https://boostingskills.com/compile-code" target="_blank" rel="noopener">Open Compiler</a>
  </nav>

  <section id="intro">
    <h2>Intro</h2>
    <p>This section explains what anchors are.</p>
    <p><a href="#top">⬆ Back to top</a></p>
  </section>

  <section id="parts">
    <h2>Parts of a URL</h2>
    <pre><code>https://example.com/page.html#faq
scheme |  host  |  path   | fragment (same-page jump)
    </code></pre>
    <p><a href="#top">⬆ Back to top</a></p>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p><a href="mailto:hello@example.com">Email us</a> |
       <a href="tel:+911234567890">Call us</a></p>
    <p><a href="#top">⬆ Back to top</a></p>
  </section>

</body>
</html>

🔗 Open Compiler and run this complete demo

✅ Quick Checklist

Same-page jump के लिए: target element को id, link में #id.
External links: target="_blank" के साथ rel="noopener".
download attribute से फ़ाइल सीधे डाउनलोड करा सकते हैं।
Meaningful link text लिखें; skip-link जैसी a11y सुविधाएँ जोड़ें।
Another page के section पर जाना हो तो: /page.html#section.

🧪 Practice: Boosting Skills Compiler खोलें, ऊपर के snippets पेस्ट करें, और jump behaviour देखें।

5️⃣ Image Tag (img)

🔰 What is the <img> Tag?

<img> tag का उपयोग किसी webpage पर image (चित्र) दिखाने के लिए किया जाता है। यह self-closing tag है — यानी इसका closing tag नहीं होता। हर image को दिखाने के लिए कम से कम एक src (source) और एक alt (alternative text) देना अनिवार्य है।

💡 Tip: HTML में image दिखाने का syntax है:
<img src="path/image.jpg" alt="description">

📷 Basic Example

<img src="flower.jpg" alt="Beautiful Flower">

🔹 src: image file का location या URL बताता है।
🔹 alt: alternate text होता है जो image ना लोड होने पर दिखता है और visually impaired users के लिए screen readers इसे पढ़ते हैं।

🧪 Try this Basic Image Example on Compiler

🧭 Image Paths (Absolute vs Relative)

<!-- Absolute URL (Full address) -->
<img src="https://example.com/images/logo.png" alt="Logo">

<!-- Relative URL (Same folder or nearby path) -->
<img src="images/photo.jpg" alt="My Photo">
<img src="../assets/banner.png" alt="Banner">

⚠️ अगर image नहीं दिख रही है तो path गलत हो सकता है — हमेशा browser console या “Inspect → Network → 404” से चेक करें।

⚙️ Common Image Attributes

<img src="flower.jpg" alt="Beautiful Flower" width="300" height="200">

width / height — image के आकार को pixel (px) या प्रतिशत (%) में नियंत्रित करते हैं।
title — जब user image पर hover करता है तो tooltip के रूप में दिखता है।
loading="lazy" — image को तभी लोड करता है जब user scroll करके उस तक पहुँचे (performance के लिए बहुत उपयोगी)।

<img src="nature.jpg" alt="Nature Scene" title="Green Forest" loading="lazy">

🧪 Test width, height & lazy loading on Compiler

🖼️ Image Alignment & Caption

HTML5 में image के साथ caption दिखाने के लिए <figure> और <figcaption> का उपयोग किया जाता है:

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

💡 <figure> = container (image + caption together) 💡 <figcaption> = caption text (image के नीचे दिखाई देगा)

🌐 Linking an Image (Clickable Image)

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

अब यह image एक clickable link बन जाएगी — click करने पर Boosting Skills की साइट खुलेगी।

🧪 Try Clickable Image on Compiler

📱 Responsive Images (Modern Web)

वेबसाइट को responsive बनाने के लिए image की चौड़ाई 100% रखी जाती है ताकि वो device width के अनुसार resize हो सके।

<img src="banner.jpg" alt="Responsive Banner" style="width:100%; height:auto;">

💡 हमेशा height को auto रखें ताकि image का aspect ratio बिगड़े नहीं।

🧪 Using <picture> Tag for Different Screen Sizes

HTML5 में <picture> tag से आप अलग-अलग screen sizes के लिए अलग images दिखा सकते हैं:

<picture>
  <source srcset="banner-large.jpg" media="(min-width: 800px)">
  <source srcset="banner-small.jpg" media="(max-width: 799px)">
  <img src="banner-default.jpg" alt="Responsive Banner">
</picture>

⚙️ यह तरीका responsive design में high-quality और optimized images लोड करने में मदद करता है।

🚫 Common Image Errors

❌ Wrong path: src गलत folder में point कर रहा है।
❌ Missing file: file का नाम या extension गलत (जैसे .jpeg vs .jpg)।
❌ No alt: SEO और accessibility में नुकसान।
⚠️ Cross-origin (CORS): अगर image किसी external domain से लोड हो रही है और blocked है।

🧠 Summary

<img> = self-closing tag for inserting images.
Attributes: src, alt, width, height, title, loading.
Responsive design में width:100%; height:auto; रखें।
Image + Caption के लिए <figure> और <figcaption> का प्रयोग करें।
Always give alt text for SEO & accessibility.

🔗 Practice All Image Tag Examples on Boosting Skills Compiler

6️⃣ Paragraphs & Comments

🔰 What is a Paragraph (<p>)?

HTML में किसी text को अलग-अलग भागों (paragraphs) में बांटने के लिए <p> tag का प्रयोग किया जाता है। हर paragraph अपने आप नई line में शुरू होता है और उसके ऊपर–नीचे थोड़ा space होता है।

💡 Remember: <p> एक block-level element है — यानी यह नई लाइन से शुरू होता है और पूरी चौड़ाई लेता है।

🧩 Basic Syntax

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Browser इन दोनों paragraphs को अलग-अलग दिखाएगा क्योंकि हर <p> अपने आप vertical spacing देता है।

🧪 Try Paragraph Example on Compiler

📋 Nested & Inline Elements inside Paragraph

Paragraph के अंदर आप text formatting tags जैसे <b>, <i>, <u>, <mark> आदि भी इस्तेमाल कर सकते हैं।

<p>
  Welcome to <b>Boosting Skills</b> website.  
  Here you can learn <mark>HTML easily</mark>.
</p>

⚠️ ध्यान रखें कि <p> के अंदर कभी block elements जैसे <div> या <h1> न डालें — यह invalid HTML है।

🧭 Paragraph Alignment (Text Align Property)

<p style="text-align:left;">Left aligned paragraph</p>
<p style="text-align:center;">Center aligned paragraph</p>
<p style="text-align:right;">Right aligned paragraph</p>
<p style="text-align:justify;">Justified paragraph with equal width lines.</p>

🧪 Try Text Alignment on Compiler

💡 justify alignment का उपयोग newspaper-style column text के लिए किया जाता है।

🎨 Styling Paragraphs

<p style="color:blue; font-size:18px; line-height:1.5;">
  HTML is the backbone of every webpage.
</p>

ऊपर के उदाहरण में हमने text का color, font-size और line-height (लाइन के बीच की दूरी) सेट की है।

🧪 Try Paragraph Styling on Compiler

📄 Multiple Paragraph Example (Web Page Layout)

<h1>About HTML</h1>

<p>
  HTML stands for HyperText Markup Language.  
  It is used to create the structure of web pages.
</p>

<p>
  You can learn HTML easily by practicing examples on  
  <a href="https://boostingskills.com/compile-code" target="_blank">
    Boosting Skills Compiler
  </a>.
</p>

💬 What are Comments ()?

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

<!-- यह एक single-line comment है -->

<p>HTML Comments Example</p>

<!--
  यह एक multi-line comment है।
  Browser इस हिस्से को ignore करेगा।
-->

💡 Comments का उपयोग debugging, documentation या code के हिस्सों को temporarily बंद करने के लिए बहुत उपयोगी है।

🧪 Comment Example (Hide a Section)

<!-- <p>This paragraph will not appear on the page</p> -->

<p>This paragraph is visible.</p>

🧪 Try Comment Example on Compiler

🧠 Summary

<p> = block-level tag for paragraphs (automatically adds spacing).
Paragraph के अंदर केवल inline elements use करें, block elements नहीं।
text-align, color, line-height आदि से style कर सकते हैं।
Comments से code समझना या hide करना आसान होता है।
Exam में अक्सर पूछा जाता है: “HTML में comments कैसे लिखते हैं?” →

🔗 Practice Paragraphs & Comments on Boosting Skills Compiler

7️⃣ Tables: Border, Cellpadding, Cellspacing, Size, TR/TH/TD, Rowspan, Colspan

🔰 What is a Table in HTML?

HTML में <table> का उपयोग data को rows और columns के रूप में दिखाने के लिए किया जाता है, ठीक उसी तरह जैसे Excel या Google Sheets में होता है। Table के अंदर headings, rows और cells होते हैं जिनमें data लिखा जाता है।

💡 Basic Structure: <table> → <tr> → <th>/<td>

<table>
  <tr>
    <th>Name</th>
    <th>Course</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>HTML</td>
    <td>85</td>
  </tr>
</table>

🧪 Try Basic Table Example on Compiler

📋 Table Tags Explanation

<table> → पूरी टेबल का container।
<tr> → एक row (table row)।
<th> → heading cell (bold + centered by default)।
<td> → data cell।

🎨 Table Border, Width & Height

Border और size control करने के लिए HTML attributes या CSS दोनों का प्रयोग किया जा सकता है।

<table border="1" width="400" height="200">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>90</td>
  </tr>
</table>

⚠️ Modern HTML में border, width, height CSS से set करना बेहतर है: style="border:1px solid black; width:400px;"

🔗 Try Table Border Example on Compiler

📦 Cellpadding & Cellspacing

ये दो attributes टेबल की readability बढ़ाते हैं। cellpadding → cell के अंदर का spacing (text और border के बीच)। cellspacing → दो cells के बीच की दूरी।

<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 HTML में इन्हें CSS से control किया जाता है: border-spacing और padding properties के द्वारा।

<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td, th {
    padding: 10px;
  }
</style>

🧪 Try Cellpadding & Cellspacing Example on Compiler

📏 Border Collapse Property (CSS Way)

<table style="border-collapse: collapse;" border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Sneha</td><td>95</td></tr>
</table>

border-collapse: collapse; का मतलब है – सभी borders एक साथ merge होकर एक line बन जाएँ।

📚 Rowspan & Colspan

कभी-कभी आपको table cells को merge करना होता है – यानी एक cell को कई rows या columns तक फैलाना होता है। इसके लिए rowspan और colspan attributes उपयोग किए जाते हैं।

<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>
  <tr>
    <td>Sneha</td>
    <td>92</td>
    <td>90</td>
  </tr>
</table>

💡 rowspan="2" → cell दो rows तक फैलेगा। colspan="2" → cell दो columns तक फैलेगा।

🧪 Try Rowspan & Colspan Example on Compiler

🎨 Styled Table Example (Modern CSS)

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr><th>Name</th><th>Course</th><th>Marks</th></tr>
  <tr><td>Rahul</td><td>HTML</td><td>85</td></tr>
  <tr><td>Sneha</td><td>CSS</td><td>90</td></tr>
</table>

🧠 Modern web design में inline attributes से ज्यादा CSS का प्रयोग किया जाता है।

🔗 Try Styled Table Example on Compiler

🧠 Summary

<table> = Table का container।
<tr> = Table row।
<th> = Heading cell (bold & center)।
<td> = Data cell।
border, cellpadding, cellspacing = styling/spacing attributes।
rowspan और colspan से cells को merge किया जा सकता है।
border-collapse = double borders हटाने के लिए।

🔗 Practice Table Examples on Boosting Skills Compiler

8️⃣ Lists: Ordered, Unordered, Definition

🔰 What are Lists in HTML?

जब हमें एक जैसी items (जैसे topics, names, features या steps) को क्रम में या bullet points में दिखाना होता है, तब हम Lists का उपयोग करते हैं। HTML में तीन मुख्य प्रकार की lists होती हैं:

1️⃣ Ordered List (<ol>) — क्रमांक (numbers/letters) के साथ।
2️⃣ Unordered List (<ul>) — bullets (•) के साथ।
3️⃣ Definition List (<dl>) — शब्द और उसका अर्थ (dictionary-style)।

💡 Remember: Lists के अंदर हर item <li> (List Item) tag में लिखा जाता है।

1️⃣ Ordered List (<ol>)

Ordered list items अपने आप numbering या alphabet के साथ दिखाई देते हैं। इसका उपयोग step-by-step जानकारी या किसी क्रमबद्ध सूची के लिए किया जाता है।

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ऊपर का कोड ब्राउज़र में ऐसे दिखेगा:

HTML
CSS
JavaScript

💡 Tip: Default numbering “1, 2, 3…” होती है, लेकिन आप इसे बदल सकते हैं।

<ol type="A">  <!-- Capital letters -->
  <li>HTML</li>
  <li>CSS</li>
</ol>

<ol type="a">  <!-- Small letters -->
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<ol type="I">  <!-- Roman Numerals -->
  <li>Chapter 1</li>
  <li>Chapter 2</li>
</ol>

🔗 🧪 Try Ordered List on Compiler

🧠 type attribute values:

1 → Numbers (default)
A → Capital letters
a → Small letters
I → Roman numerals
i → Small roman numerals

2️⃣ Unordered List (<ul>)

Unordered list items bullets (•, ○, ▪) के साथ दिखाई देते हैं। इनका उपयोग तब किया जाता है जब list में क्रम (order) मायने नहीं रखता।

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

ऊपर का output कुछ इस तरह दिखेगा:

Apples
Bananas
Oranges

💡 आप type attribute से bullet का style बदल सकते हैं।

<ul type="disc">     <!-- default black circle -->
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ul type="circle">   <!-- hollow circle -->
  <li>Apples</li>
  <li>Oranges</li>
</ul>

<ul type="square">   <!-- square bullets -->
  <li>HTML</li>
  <li>JS</li>
</ul>

🔗 🧪 Try Unordered List Example on Compiler

3️⃣ Nested Lists (Lists inside Lists)

किसी list item के अंदर एक और list रखी जा सकती है — इसे nested list कहते हैं।

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

💡 Nested lists का उपयोग menu या syllabus structure में अक्सर किया जाता है।

🧪 Try Nested List on Compiler

4️⃣ Definition List (<dl>)

Definition list का उपयोग शब्दों और उनके अर्थों (terms & definitions) को दिखाने के लिए किया जाता है। इसमें तीन tags होते हैं:

<dl> → पूरी definition list को घेरता है।
<dt> → term (word to define)।
<dd> → definition (term का अर्थ या विवरण)।

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

  <dt>CSS</dt>
  <dd>Cascading Style Sheets – styling web pages.</dd>

  <dt>JS</dt>
  <dd>JavaScript – adds interactivity to web pages.</dd>
</dl>

Browser output इस प्रकार होगा:

HTML: HyperText Markup Language – structure of web pages.
CSS: Cascading Style Sheets – styling web pages.
JS: JavaScript – adds interactivity to web pages.

🔗 🧪 Try Definition List Example on Compiler

🧠 Use Case: Glossaries, FAQs, Terminology sections या key terms की explanation के लिए।

🎨 CSS Styling Lists

<style>
  ul.custom {
    list-style-type: square;
    background: #eef2ff;
    padding: 15px;
    border-radius: 10px;
  }
  ol.custom {
    background: #f9f9f9;
    padding: 15px;
  }
  li {
    margin: 6px 0;
  }
</style>

<ul class="custom">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

🔗 🧪 Try Styled List Example on Compiler

🧠 Summary

<ol> → Ordered list (numbered)।
<ul> → Unordered list (bulleted)।
<dl> → Definition list (term + description)।
<li> → हर item को define करता है।
Nested lists menus या outlines के लिए useful हैं।
list-style-type और padding से CSS styling control की जा सकती है।

🔗 Practice Lists Examples on Boosting Skills Compiler

9️⃣ Forms, Form Elements, Input Types & Attributes

🔰 What is a Form in HTML?

Web pages पर user से data collect करने के लिए HTML forms का उपयोग किया जाता है। जैसे – login form, contact form, feedback form, signup form आदि। Form user input को server तक भेजने का तरीका है।

💡 Syntax: <form> ... form elements ... </form>

<form action="submit.php" method="post">
  <label>Enter your name:</label>
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

ऊपर के example में form data “submit.php” file पर POST method से भेजा जाएगा।

🔗 🧪 Try Basic Form Example on Compiler

🧩 Important Form Attributes

action → form data कहाँ भेजना है (URL or file)।
method → data भेजने का तरीका: get या post।
name → form की पहचान के लिए।
target → response कहाँ दिखेगा (_blank, _self, आदि)।

<form action="save.php" method="post" target="_blank">
  ...
</form>

⚠️ GET data को URL में दिखाता है (search forms में useful)। POST data को छुपाकर भेजता है (secure forms जैसे login/signup में useful)।

🧱 Form Elements (Input Controls)

Form के अंदर अलग-अलग input लेने के लिए अलग-अलग tags होते हैं, जिन्हें Form Elements कहा जाता है। ये elements user interaction के लिए होते हैं।

<input> → single-line input field
<textarea> → multi-line text field
<select> <option> → dropdown menu
<button> → button (submit/reset/custom)
<label> → text label for inputs

✏️ Text Input Example

<form>
  <label>Name:</label>
  <input type="text" name="username" placeholder="Enter your name">
</form>

👉 placeholder attribute field के अंदर हल्का hint text दिखाता है। name attribute field का backend name होता है।

🔗 🧪 Try Text Input Example on Compiler

📝 Textarea (Multi-line Input)

<form>
  <label>Feedback:</label><br>
  <textarea name="message" rows="5" cols="40" placeholder="Write your feedback..."></textarea>
</form>

<textarea> का उपयोग बड़े text जैसे comments या feedback लेने के लिए किया जाता है।

🔽 Dropdown List (Select & Option)

<form>
  <label>Select Course:</label>
  <select name="course">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
</form>

💡 Dropdown में एक या अधिक <option> tags होते हैं जिनमें values assign की जाती हैं।

🔘 Radio Buttons

Radio buttons का उपयोग तब किया जाता है जब user को केवल एक option चुनना होता है (Yes/No, Gender आदि)।

<form>
  <label>Gender:</label><br>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female
</form>

💡 एक ही name रखने से केवल एक radio option select किया जा सकता है।

☑️ Checkboxes

Checkbox से user एक या अधिक options चुन सकता है (multiple choice)।

<form>
  <label>Select your skills:</label><br>
  <input type="checkbox" name="skill" value="html"> HTML<br>
  <input type="checkbox" name="skill" value="css"> CSS<br>
  <input type="checkbox" name="skill" value="js"> JavaScript
</form>

📅 Other Common Input Types

type="email" → Email address input
type="password" → Password hidden with ●
type="number" → Numeric input with arrows
type="date" → Date picker
type="color" → Color selector
type="range" → Slider input
type="file" → File upload

<form>
  Email: <input type="email" name="email"><br>
  Password: <input type="password" name="pass"><br>
  Age: <input type="number" min="10" max="50"><br>
  Birthday: <input type="date"><br>
  Favorite Color: <input type="color"><br>
  Upload File: <input type="file">
</form>

🔗 🧪 Try Multiple Input Types on Compiler

⚙️ Important Input Attributes

placeholder → hint text दिखाता है।
value → default value।
readonly → field read-only बना देता है।
disabled → input को बंद करता है।
required → form submit करने से पहले भरना जरूरी।
maxlength → maximum character limit।
pattern → regex pattern validation।
autofocus → page load पर focus auto set करता है।

<input type="text" name="username" placeholder="Enter name" required autofocus>
<input type="password" name="pass" minlength="6" maxlength="12">
<input type="email" pattern="[a-z0-9._%+-]+@[a-z]+\.[a-z]{2,}">

🧠 required, pattern, autofocus जैसी validations HTML5 features हैं।

🚀 Submit & Reset Buttons

<form>
  Name: <input type="text" name="user"><br><br>
  <input type="submit" value="Submit Form">
  <input type="reset" value="Reset Form">
</form>

Submit button form data भेजता है और Reset button सभी fields को साफ़ करता है।

🔗 🧪 Try Submit & Reset Buttons on Compiler

🧠 Summary

<form> → data collection structure।
action और method data भेजने के लिए जरूरी attributes।
<input> के अलग-अलग types होते हैं (text, email, password, radio, checkbox आदि)।
required, pattern, autofocus validations HTML5 में उपलब्ध हैं।
<select>, <textarea>, और <button> forms के अन्य महत्वपूर्ण elements हैं।
Submit और Reset buttons से form control होता है।

🔗 Practice Forms & Input Types on Boosting Skills Compiler

🔟 Frames: Frameset & Nested Frames (Legacy)

🔰 What are Frames in HTML?

Frames का उपयोग एक ही webpage में कई HTML documents को एक साथ दिखाने के लिए किया जाता था। यानी एक ही browser window को कई छोटे भागों (sections) में बाँटकर अलग-अलग pages एक साथ दिखाना।

💡 Example: Left side में navigation menu और right side में content page।

पहले HTML में `` और `` tags का उपयोग होता था, लेकिन अब HTML5 में इन्हें deprecated कर दिया गया है। इसके स्थान पर <iframe> tag का प्रयोग होता है।

🧩 Frameset Basic Structure

जब हम frames का उपयोग करते हैं, तो `` tag की जगह `` tag आता है। `` बताता है कि window को कितने भागों में बाँटना है, और हर भाग में कौन-सी file दिखाई जाएगी।

<frameset cols="50%,50%">
  <frame src="left.html">
  <frame src="right.html">
</frameset>

ऊपर का code window को दो बराबर vertical भागों में बाँटेगा — बाएँ भाग में left.html और दाएँ भाग में right.html खुलेगा।

🔗 🧪 Try Frameset Example on Compiler

⚠️ `` tag का उपयोग केवल पुराने HTML versions (HTML 4.01 तक) में होता था। HTML5 में यह tag काम नहीं करता।

📏 Frameset Attributes

cols → window को vertical columns में बाँटता है।
rows → window को horizontal rows में बाँटता है।
src → frame में कौन-सी file या webpage load होगी।
name → frame का नाम (target linking के लिए)।
scrolling → scroll bar दिखाने/छुपाने के लिए (yes/no/auto)।
noresize → user को frame का size बदलने से रोकता है।

<frameset rows="30%,70%">
  <frame src="header.html" name="topFrame" scrolling="no" noresize>
  <frame src="content.html" name="bottomFrame">
</frameset>

यह layout दो horizontal frames बनाएगा — ऊपर 30% और नीचे 70%।

🔗 🧪 Try Row Frameset Example on Compiler

🔗 Targeting Frames using Links

किसी एक frame में link click करने पर दूसरा frame update करने के लिए target attribute का उपयोग होता है।

<!-- main.html -->
<frameset cols="30%,70%">
  <frame src="menu.html" name="menuFrame">
  <frame src="content.html" name="contentFrame">
</frameset>

<!-- menu.html -->
<a href="about.html" target="contentFrame">About Us</a><br>
<a href="contact.html" target="contentFrame">Contact</a>

💡 जब user “About Us” पर click करेगा, तो वह पेज दाएँ frame (`contentFrame`) में open होगा।

🧱 Nested Frames (Frames inside Frames)

जब एक frame के अंदर एक और frameset होता है, तो उसे Nested Frames कहा जाता है।

<frameset rows="25%,75%">
  <frame src="top.html">
  <frameset cols="50%,50%">
    <frame src="left.html">
    <frame src="right.html">
  </frameset>
</frameset>

इस layout में ऊपर एक horizontal frame होगा (25%), और नीचे दो vertical frames (50%–50%)।

🔗 🧪 Try Nested Frames Example on Compiler

⚠️ Nested frames modern responsive design में recommended नहीं हैं। ये SEO और accessibility दोनों के लिए नुकसानदायक हैं।

🚫 Why Frames are Deprecated?

❌ Search engines frames को ठीक से crawl नहीं कर पाते।
❌ Bookmarking और navigation issues होते हैं।
❌ Mobile responsive design में compatibility खराब रहती है।
✅ Modern replacement है <iframe> tag।

<iframe src="home.html" width="600" height="400"></iframe>

<iframe> modern HTML5 में external page, video या document embed करने के लिए प्रयोग होता है।

🔗 🧪 Try Iframe Example on Compiler

🧠 Summary

<frameset> → body की जगह layout बनाने के लिए (HTML4 तक)।
<frame> → individual window में page load करता है।
rows और cols attributes frame size तय करते हैं।
Nested Frames = एक frameset के अंदर दूसरा frameset।
Modern HTML5 में <iframe> का प्रयोग करें।

🔗 Practice Frames & Iframes on Boosting Skills Compiler

1️⃣1️⃣ HTML5 Introduction & New Semantic Elements

🔰 What is HTML5?

HTML5 HTML का latest और सबसे powerful version है। इसे World Wide Web Consortium (W3C) ने 2014 में officially release किया था। HTML5 का उद्देश्य webpages को modern, fast और interactive बनाना है।

💡 HTML5 = Structure + Multimedia + Semantics + APIs

✅ Simplified syntax
🎧 Multimedia support (audio, video)
🧩 New semantic tags
📱 Mobile & responsive design friendly
⚙️ Built-in form validations
🌐 Offline and local storage features

🔗 🧪 Try HTML5 Basic Template on Compiler

📋 HTML5 Document Structure

HTML5 document की basic structure इस प्रकार होती है 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>

💡 <!DOCTYPE html> browser को बताता है कि यह HTML5 document है।

🔗 🧪 Try HTML5 Page Structure on Compiler

🧩 What are Semantic Elements?

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

⚡ Example: <header> – page का top part <nav> – navigation menu <footer> – page का bottom part

Semantic tags का उपयोग readability और SEO दोनों में सुधार करता है।

🌐 Common HTML5 Semantic Elements

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

🔗 🧪 Try Semantic Tags Example on Compiler

🧱 Example: Web Page using Semantic Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic Page Example</title>
</head>
<body>

  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a> |
      <a href="#">About</a> |
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <section>
      <article>
        <h2>HTML5 Semantic Tags</h2>
        <p>Semantic tags help describe the structure of web pages clearly.</p>
      </article>
    </section>
  </main>

  <aside>
    <p>Related links or ads here</p>
  </aside>

  <footer>
    <p>© 2025 My Website. All Rights Reserved.</p>
  </footer>

</body>
</html>

🔗 🧪 Try Complete Semantic Page on Compiler

💡 Advantages of Using Semantic Tags

✅ Code readability और structure बेहतर होता है।
✅ SEO (Search Engine Optimization) में मदद मिलती है।
✅ Accessibility tools (screen readers) content को समझ पाते हैं।
✅ Maintenance आसान और organized रहता है।
✅ Browser rendering optimized होता है।

🧠 Summary

HTML5 ने modern web development को simple और semantic बनाया।
New tags जैसे <header>, <nav>, <article> page structure बताते हैं।
Semantic elements readability और SEO दोनों improve करते हैं।
हर modern webpage में ये tags इस्तेमाल किए जाते हैं।

🔗 Practice HTML5 Semantic Elements on Boosting Skills Compiler

1️⃣2️⃣ HTML5 Audio & Video

🔰 Introduction

HTML5 में अब audio और video files को play करने के लिए किसी external plugin (जैसे Flash Player) की आवश्यकता नहीं होती। इसके लिए HTML5 ने दो नए powerful tags दिए हैं:

<audio> – sound/music files play करने के लिए।
<video> – video files (mp4, webm आदि) दिखाने के लिए।

💡 ये tags built-in media player controls के साथ आते हैं (play, pause, volume आदि)।

🔗 🧪 Try Audio & Video on Compiler

🎵 HTML5 <audio> Tag

<audio> tag का उपयोग background music, podcasts, या sound effects play करने के लिए किया जाता है।

<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>

⚙️ Explanation:

controls → Play, Pause, Volume आदि दिखाता है।
<source> → अलग-अलग format की files specify करता है।
अगर browser support नहीं करता तो fallback text दिखेगा।

🔗 🧪 Try Audio Example on Compiler

🎧 Audio Tag Attributes

Attribute	Description
controls	Media controls दिखाता है (play/pause)
autoplay	Page load होते ही audio अपने आप play होता है
loop	Audio को बार-बार दोहराता है
muted	Audio muted रहता है
preload	Audio file कब load होगी (none, metadata, auto)

<audio controls autoplay loop muted>
  <source src="bgmusic.mp3" type="audio/mpeg">
</audio>

⚠️ Modern browsers में autoplay केवल muted mode में काम करता है।

🎥 HTML5 <video> Tag

<video> tag webpages पर directly videos embed करने के लिए प्रयोग किया जाता है। आप local video files या hosted video URLs दोनों चला सकते हैं।

<video width="480" height="300" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

ऊपर का code video player दिखाता है जिसमें play, pause, volume और fullscreen controls होंगे।

🔗 🧪 Try Video Example on Compiler

🎬 Video Tag Attributes

Attribute	Description
controls	Play/Pause आदि दिखाता है।
autoplay	Page load होते ही video चलती है।
loop	Video दोहराई जाती है।
muted	Video को बिना आवाज़ चलाता है।
poster	Video load होने से पहले दिखने वाली preview image।
width / height	Video player का आकार तय करता है।
preload	File loading behavior (none / metadata / auto)।

<video width="500" poster="thumbnail.jpg" controls loop>
  <source src="intro.mp4" type="video/mp4">
</video>

💡 poster attribute वीडियो thumbnail की तरह काम करता है।

📡 Embedding Online Videos (YouTube)

आप किसी YouTube या external platform का video <iframe> का उपयोग करके embed कर सकते हैं।

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameborder="0"
  allowfullscreen>
</iframe>

🧠 YouTube iframe responsive layout में भी auto adjust हो जाता है।

🔗 🧪 Try YouTube Embed on Compiler

🎯 Supported Audio & Video Formats

Media Type	Format	File Extension
Audio	MP3, OGG, WAV	.mp3, .ogg, .wav
Video	MP4, WebM, Ogg	.mp4, .webm, .ogv

💡 Best Practices

✅ Multiple <source> formats दें ताकि हर browser support करे।
✅ autoplay को हमेशा muted रखें।
✅ poster image का उपयोग करें ताकि UI बेहतर दिखे।
✅ बड़ी media files को external hosting (जैसे YouTube/CDN) से load करें।
✅ accessibility के लिए <track> subtitles जोड़ें।

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

🧠 Summary

<audio> और <video> HTML5 के नए multimedia tags हैं।
इनमें controls, autoplay, loop, muted, poster जैसे attributes होते हैं।
Multiple file formats से compatibility बेहतर होती है।
YouTube जैसी external videos को <iframe> से embed किया जा सकता है।
Subtitles के लिए <track> tag use करें।

🔗 Practice Audio & Video Examples on Boosting Skills Compiler

1️⃣3️⃣ HTML5 Form Validations & Modern Input Types

🔰 Introduction

HTML5 ने form validations को आसान बना दिया है। अब simple attributes जैसे required, pattern, autofocus आदि का इस्तेमाल कर आप बिना JavaScript के basic validations कर सकते हैं। साथ ही HTML5 ने नए input types भी जोड़े हैं जैसे – email, number, date, range आदि।

🔗 🧪 Try Form Validation Examples on Compiler

📋 Basic Form Example

<form>
  Name: <input type="text" name="username" required><br><br>
  Email: <input type="email" name="useremail" required><br><br>
  Password: <input type="password" name="password" required><br><br>
  <input type="submit" value="Submit">
</form>

✳️ इस form में जब तक user सभी fields भर नहीं लेता, form submit नहीं होगा — यह required attribute के कारण होता है।

🔗 🧪 Try Required Attribute Example on Compiler

🧩 Common HTML5 Input Types

Input Type	Description	Example
text	Normal text input	<input type="text">
email	Checks for valid email format	<input type="email" required>
number	Accepts only numeric values	<input type="number" min="1" max="100">
date	Shows a date picker	<input type="date">
range	Slider to select range of numbers	<input type="range" min="0" max="100">
tel	For phone numbers	<input type="tel" pattern="[0-9]{10}">
url	For web addresses	<input type="url">
color	Color picker	<input type="color">

📌 1. required Attribute

यह सुनिश्चित करता है कि user field खाली न छोड़े। अगर user बिना value दिए form submit करेगा, browser उसे warning देगा।

<form>
  Username: <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

💡 Browser automatically message दिखाता है: “Please fill out this field.”

📌 2. pattern Attribute (Regular Expressions)

pattern attribute के ज़रिए आप input के लिए custom format define कर सकते हैं। इसका value एक regular expression होता है।

<form>
  Username (Only letters):  
  <input type="text" name="username" pattern="[A-Za-z]+" required>
  <input type="submit" value="Submit">
</form>

⚙️ ऊपर के उदाहरण में user केवल A–Z या a–z characters ही डाल सकता है। कोई number या symbol डालने पर form submit नहीं होगा।

<form>
  Mobile Number (10 digits):  
  <input type="tel" pattern="[0-9]{10}" required>
  <input type="submit" value="Submit">
</form>

🔗 🧪 Try Pattern Attribute Example on Compiler

📌 3. autofocus Attribute

autofocus का उपयोग किसी एक input field पर cursor को page load होते ही automatically set करने के लिए किया जाता है।

<form>
  <input type="text" name="fname" autofocus placeholder="Type your name">
  <input type="submit" value="Go">
</form>

💡 केवल एक input पर autofocus होना चाहिए। Multiple autofocus tags ignore किए जाते हैं।

📌 4. email Validation

<form>
  Enter your email:  
  <input type="email" name="useremail" required>
  <input type="submit" value="Submit">
</form>

⚙️ अगर user “abc@xyz” format follow नहीं करता तो browser उसे error दिखाएगा।

🔗 🧪 Try Email Validation on Compiler

📌 5. number Validation

HTML5 number input में आप min, max और step attributes से valid range और step value define कर सकते हैं।

<form>
  Age (between 18–60):  
  <input type="number" min="18" max="60" required>
  <input type="submit" value="Submit">
</form>

<form>
  Select Quantity (Step 5):  
  <input type="number" min="0" max="50" step="5">
</form>

💡 Browser input box के साथ increment/decrement arrow दिखाता है।

📌 6. date Input Type

HTML5 में built-in calendar date picker होता है। आप min और max attribute से date range भी सेट कर सकते हैं।

<form>
  Select Date:  
  <input type="date" min="2024-01-01" max="2025-12-31">
</form>

🔗 🧪 Try Date Input Example on Compiler

📌 7. range Input Type (Slider)

<form>
  Volume: <input type="range" min="0" max="100" value="50">
</form>

range slider user को interactive तरीके से numeric value select करने देता है।

🔗 🧪 Try Range Slider on Compiler

🧠 Summary

required → field खाली नहीं छोड़ सकते।
pattern → regex के ज़रिए custom format check।
autofocus → page load पर cursor set करता है।
email, number, date, range → smart input types।
HTML5 में built-in validation message आता है (no JavaScript needed)।

🔗 Practice HTML5 Validations on Boosting Skills Compiler

1️⃣4️⃣ HTML5 Embed Multimedia

🔰 Introduction

HTML5 में हम किसी भी external multimedia content — जैसे videos, audio, presentations, maps या documents — को webpage में दिखाने के लिए <embed>, <object> और <iframe> tags का उपयोग कर सकते हैं।

💡 यह तरीका आपको YouTube videos, PDFs, Google Maps आदि को अपने पेज में सीधे दिखाने की सुविधा देता है।

🔗 🧪 Try Embed Examples on Compiler

🎬 1. <embed> Tag

<embed> tag का उपयोग किसी external file को directly webpage में जोड़ने के लिए किया जाता है। यह self-closing tag है (यानि इसका कोई closing tag नहीं होता)।

<embed src="sample.mp4" width="400" height="300">

यह code webpage पर video file (sample.mp4) को 400×300 pixels में दिखाएगा।

⚙️ Commonly used for embedding PDFs, SWF files, Audio, Video या Web Apps।

🔗 🧪 Try Embed Tag Example

📄 2. Embedding PDF Files

HTML5 में आप किसी PDF document को भी embed कर सकते हैं ताकि user उसे बिना download किए सीधे webpage पर देख सके।

<embed src="sample.pdf" width="600" height="500" type="application/pdf">

💡 यह PDF file को browser के अंदर एक viewer की तरह दिखाएगा।

🔗 🧪 Try PDF Embed Example on Compiler

🌎 3. Embedding YouTube Video (Using <iframe>)

HTML5 में सबसे आसान तरीका YouTube या Vimeo video embed करने का है <iframe> tag का उपयोग करना।

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

⚙️ allowfullscreen attribute video को fullscreen mode में चलाने की अनुमति देता है।

🔗 🧪 Try YouTube Embed Example on Compiler

🗺️ 4. Embedding Google Maps

आप किसी specific location को Google Maps से अपने webpage में embed कर सकते हैं। इसके लिए Google Maps पर “Share → Embed a map” option से link प्राप्त करें।

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3559.088229278046!2d80.943!3d26.848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399bfdf!2sLucknow!"
  width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

💡 loading="lazy" attribute performance बढ़ाने के लिए map को तभी load करता है जब user उसे देखे।

🔗 🧪 Try Google Map Embed Example

💻 5. Embedding External Websites

आप किसी दूसरे website या web app को भी अपने webpage में embed कर सकते हैं।

<iframe src="https://www.wikipedia.org" width="700" height="400"></iframe>

⚠️ कुछ websites security policy (CORS / X-Frame-Options) के कारण iframe में embed नहीं होने देतीं।

🔗 🧪 Try Website Embed Example

📦 6. <object> Tag (Alternative to <embed>)

<object> tag पुराने HTML version से आता है, और यह भी multimedia या documents embed करने के लिए उपयोग होता है। इसका advantage यह है कि आप fallback content भी दे सकते हैं।

<object data="demo.pdf" type="application/pdf" width="600" height="500">
  <p>If the PDF is not displayed, <a href="demo.pdf">click here</a> to download.</p>
</object>

💡 <object> tag fallback content (alternative message or link) दिखाने की सुविधा देता है।

🧠 Summary

<embed> → Directly external file (video, audio, pdf) जोड़ने के लिए।
<iframe> → Websites, YouTube videos, maps embed करने के लिए।
<object> → Multimedia और documents के लिए fallback support के साथ।
PDF और Map embedding real-world projects में बहुत useful feature है।
Always set width और height attributes for better layout control।

🔗 Practice Multimedia Embedding on Boosting Skills Compiler

1️⃣5️⃣ HTML5 Layout (Semantic + CSS)

🔰 Introduction

HTML5 ने webpage को divide करने के लिए semantic layout tags दिए हैं — जैसे <header>, <nav>, <section>, <article>, <aside>, और <footer>। इन tags के साथ हम CSS का उपयोग करके एक सुंदर और responsive layout बना सकते हैं।

💡 Semantic tags browser और developer दोनों को webpage की structure समझने में मदद करते हैं।

🔗 🧪 Try Layout Example on Compiler

🧩 Common Layout Tags

Tag	Use
<header>	Page या section का शीर्ष भाग — heading/logo/menu
<nav>	Navigation links रखने के लिए
<main>	Page का मुख्य content
<section>	Page के अलग-अलग हिस्से
<article>	Independent content जैसे blog या post
<aside>	Sidebar, ads या related info
<footer>	Page के नीचे copyright/contact info

📄 HTML Structure Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Layout Example</title>
  <style>
    /* 🎨 Basic CSS Layout */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #0078D7;
      color: white;
      padding: 15px;
      text-align: center;
    }
    nav {
      background: #eee;
      padding: 10px;
      text-align: center;
    }
    nav a {
      margin: 10px;
      text-decoration: none;
      color: #0078D7;
      font-weight: bold;
    }
    main {
      display: flex;
      padding: 20px;
    }
    section {
      flex: 3;
      background: #f9f9f9;
      padding: 15px;
      margin-right: 10px;
    }
    aside {
      flex: 1;
      background: #f0f0f0;
      padding: 15px;
    }
    footer {
      background: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>

  <header>
    <h1>My First Website</h1>
  </header>

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

  <main>
    <section>
      <h2>Welcome to HTML5 Layout</h2>
      <p>HTML5 layout tags help create a clean and meaningful webpage structure.</p>
      <article>
        <h3>Article Example</h3>
        <p>This is an independent article inside the main section.</p>
      </article>
    </section>

    <aside>
      <h3>Quick Links</h3>
      <ul>
        <li><a href="#">HTML Basics</a></li>
        <li><a href="#">CSS Intro</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 MyWebsite | Designed by Student</p>
  </footer>

</body>
</html>

💡 इस layout में Flexbox का उपयोग किया गया है ताकि section और aside horizontally align हों।

🔗 🧪 Try Full Layout Example on Compiler

🎯 Responsive Layout Tip

HTML5 layout को responsive बनाने के लिए आप CSS media queries का उपयोग कर सकते हैं। इससे webpage mobile, tablet और desktop पर automatically adjust हो जाता है।

@media (max-width: 768px) {
  main {
    flex-direction: column;
  }
  section, aside {
    margin: 0 0 10px 0;
  }
}

📱 ऊपर का code छोटे screen (mobile) पर layout को vertically stack कर देगा।

🔗 🧪 Try Responsive Layout Example

💡 Advantages of Semantic Layout

✅ Code readability बेहतर होती है।
✅ SEO में मदद मिलती है (search engines structure समझते हैं)।
✅ Accessibility tools (screen readers) के लिए helpful।
✅ Maintain और modify करना आसान।
✅ CSS के साथ styling आसान और organized।

🧠 Summary

Semantic layout tags webpage structure को define करते हैं।
Header, Nav, Section, Aside, Footer हर modern website का हिस्सा हैं।
CSS Flexbox या Grid layout को responsive बनाते हैं।
Semantic layout + CSS = clean, SEO-friendly design।

🔗 Practice HTML5 Layout Design on Boosting Skills Compiler

1️⃣6️⃣ HTML Iframe (Inline Frame)

🔰 What is an Iframe?

Iframe का अर्थ होता है Inline Frame — यानी एक webpage के अंदर दूसरा webpage दिखाना। इसका tag है <iframe>।

Example के लिए — अगर आप अपने webpage पर किसी और site (जैसे YouTube video, map या form) को दिखाना चाहते हैं, तो iframe सबसे आसान तरीका है।

💡 Iframe को आप एक “window inside a window” समझ सकते हैं।

🔗 🧪 Try Iframe Examples on Compiler

🧩 Basic Syntax

<iframe src="https://www.example.com" width="600" height="400"></iframe>

यह code आपके page पर “example.com” website को 600×400 pixel के frame में दिखाएगा।

⚠️ कुछ websites (जैसे banking या secure portals) iframe में open नहीं होतीं क्योंकि उनकी security policy में restriction होता है।

📋 Important Iframe Attributes

Attribute	Description
src	Iframe में कौन-सी webpage दिखेगी।
width / height	Iframe का आकार तय करता है।
name	Iframe को नाम देने के लिए (target linking)।
frameborder	Border दिखाना या छुपाना (0 या 1)।
allowfullscreen	Video को fullscreen में चलाने की अनुमति देता है।
loading="lazy"	Iframe को lazy load करता है (performance बढ़ाता है)।

<iframe src="https://www.wikipedia.org"
  width="700" height="400"
  frameborder="0"
  loading="lazy">
</iframe>

🔗 🧪 Try Iframe Attributes Example

🎬 Embedding YouTube Video

YouTube video को iframe के माध्यम से आसानी से embed किया जा सकता है। आपको केवल YouTube video के “Share → Embed” code को copy करना होता है।

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube Video Player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

💡 “allowfullscreen” video को fullscreen mode में चलाने देता है।

🔗 🧪 Try YouTube Iframe Example

🗺️ Embedding Google Maps

Google Maps का embed link “Share → Embed Map” option से मिलता है। इसे सीधे iframe में डाल सकते हैं।

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3559.0!2d80.94!3d26.85"
  width="600" height="450" style="border:0;"
  allowfullscreen="" loading="lazy">
</iframe>

⚙️ loading="lazy" page speed बढ़ाने के लिए iframe को तभी load करता है जब user उसे देखे।

🔗 🧪 Try Google Map Embed Example

📄 Displaying Local HTML Page in Iframe

आप अपने project के किसी और HTML file को भी iframe में दिखा सकते हैं।

<iframe src="about.html" width="600" height="400"></iframe>

यह code “about.html” file को current page में दिखाएगा। यह concept website navigation या preview panels में काम आता है।

🔗 🧪 Try Local Page Iframe Example

🧭 Targeting Links inside Iframe

आप links को इस तरह design कर सकते हैं कि वे iframe के अंदर open हों। इसके लिए link के target attribute को iframe के name से match करना होता है।

<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>

💡 यह तरीका tabless navigation या dashboard-style layouts में बहुत काम आता है।

🚫 Security Tips

⚠️ कुछ websites iframe embedding को block करती हैं (CORS या X-Frame-Options)।
✅ केवल trusted sources (जैसे YouTube, Google Maps) को ही embed करें।
🔒 Sensitive data वाली sites को iframe में न दिखाएँ।
🧱 Modern browsers sandbox attribute भी support करते हैं।

<iframe src="demo.html" sandbox></iframe>

💡 sandbox iframe content को isolate करता है ताकि वह parent page को affect न करे।

🧠 Summary

<iframe> = Webpage के अंदर दूसरा webpage embed करने के लिए।
Common uses: YouTube video, Google Maps, forms, PDFs, dashboards।
Attributes: src, width, height, name, frameborder, allowfullscreen, loading।
Security: sandbox और trusted sources का उपयोग करें।

🔗 Practice HTML Iframe on Boosting Skills Compiler

1️⃣7️⃣ FAQs – HTML Basics

❓ Frequently Asked Questions (HTML Basics)

नीचे दिए गए सवाल HTML सीखते समय beginners के सबसे common doubts को cover करते हैं। हर answer आसान भाषा और short example के साथ समझाया गया है 👇

Q1️⃣. HTML क्या है?

HTML का full form है HyperText Markup Language। यह web pages बनाने की basic language है। HTML structure बताता है कि web page पर text, image, link या table कैसे दिखेंगे।

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Hello HTML!</h1>
</body>
</html>

🔗 🧪 Try HTML Hello Example

Q2️⃣. HTML और CSS में क्या अंतर है?

HTML page का structure (ढांचा) बनाता है, जबकि CSS page को सुंदर और styled बनाता है।

<h1>This is HTML</h1>
<p style="color:blue;">This is styled with CSS</p>

💡 HTML = content, CSS = design.

Q3️⃣. HTML tags और elements में क्या अंतर है?

Tag = वह keyword जो content को define करता है। Element = start tag + content + end tag।

<p>This is a paragraph</p>

👉 <p> = tag
👉 <p>This is a paragraph</p> = element

Q4️⃣. HTML में कितने heading tags होते हैं?

HTML में 6 heading tags होते हैं — <h1> (सबसे बड़ा) से लेकर <h6> (सबसे छोटा) तक।

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

🔗 🧪 Try Heading Example

Q5️⃣. <br> और <p> में क्या फर्क है?

<br> line break देता है (text को नई line पर ले जाता है), जबकि <p> एक पूरा नया paragraph बनाता है।

Welcome to HTML<br>Let's learn together!
<p>This is a new paragraph.</p>

Q6️⃣. <img> tag क्या करता है?

यह webpage पर image दिखाने के लिए प्रयोग होता है। इसका syntax इस प्रकार है:

<img src="image.jpg" alt="Sample Image" width="200" height="150">

src → image का path
alt → alternative text (जब image load न हो)
width/height → image का size

Q7️⃣. HTML comments कैसे लिखते हैं?

Comments code में notes जोड़ने के लिए होते हैं, जिन्हें browser ignore करता है।

<!-- This is a comment -->
<p>Visible content</p>

💡 Comments developer के लिए होते हैं, user को नहीं दिखते।

Q8️⃣. HTML में link कैसे बनाते हैं?

Links <a> tag से बनते हैं। “href” attribute destination address बताता है।

<a href="https://www.google.com" target="_blank">Visit Google</a>

🔗 target="_blank" link को नए tab में खोलता है।

Q9️⃣. HTML में list के types कौन-कौन से हैं?

HTML में तीन प्रकार की lists होती हैं:

Ordered List → <ol> (numbered)
Unordered List → <ul> (bulleted)
Definition List → <dl> (terms and meanings)

<ol>
  <li>HTML</li>
  <li>CSS</li>
</ol>

<ul>
  <li>Apple</li>
  <li>Mango</li>
</ul>

<dl>
  <dt>HTML</dt>
  <dd>Structure of Web Page</dd>
</dl>

Q🔟. HTML5 क्या है और इसमें नया क्या है?

HTML5 HTML का latest version है जिसमें multimedia support (audio, video), semantic tags (header, section, footer) और built-in form validations जैसे features शामिल हैं।

<header>My Website</header>
<section>Main Content</section>
<footer>Copyright 2025</footer>

🔗 🧪 Try HTML5 Semantic Example

💡 Bonus Tip:

✅ HTML में tags case-insensitive होते हैं (लेकिन lowercase लिखना बेहतर है)।
✅ सभी open tags को properly बंद करें।
✅ HTML + CSS + JavaScript = Modern Web Development Foundation।

🧠 Summary

HTML webpage structure बनाने की भाषा है।
Tags = building blocks (जैसे <p>, <img>, <a>, <table> आदि)।
HTML5 ने multimedia, semantic tags और validations introduce किए।
Practice ही सीखने का सबसे अच्छा तरीका है 💪

🔗 Practice HTML Basics FAQs on Boosting Skills Compiler

HTML Basics – NIELIT O Level (M2-R5)

🔰 What is HTML?

🧩 Meaning of “Markup”

📚 Types of HTML (Versions)

📦 HTML Elements के प्रकार

🧱 Basic Structure of an HTML Document

🔍 Explanation line-by-line

🧠 Mini Version (Hello World)

✅ Quick Checklist

🔰 What is <head>?

🧱 Minimal, Correct <head> (HTML5)

📑 Common Head Elements (Deep Explain)

1) <meta charset="UTF-8">

2) <meta name="viewport">

3) <title> (Tab Title)

4) SEO Meta

5) Favicons & App Icons

6) Stylesheets (CSS)

7) JavaScript – defer vs async

8) Performance Hints

9) Social Share (Open Graph / Twitter)

10) Structured Data (JSON-LD)

11) Fonts & Icons

12) Other Useful

🧪 Complete Demo Page (Head Best Practices)

✅ Head Checklist (Exam + Real Project)

🔰 What are Formatting Tags?

🧩 Common Formatting Tags (with Examples)

💬 Explanation

📦 <div> Tag (Block Container)

📜 <pre> Tag (Preformatted Text)

🧠 Summary

🔰 What is an Anchor (<a>)?

1) External Link (बाहरी पेज पर जाना)

2) Relative vs Absolute URLs

3) Email / Phone / File download

4) Named Anchors (Same-page Navigation)

5) Linking to a Section on Another Page

6) Old “name” Attribute (Legacy)

7) Accessibility & SEO Best Practices

8) URL Fragment (Hash) कैसे काम करता है?

9) Button-like Link (Design Tip)

🔬 Complete Demo (All in One)

✅ Quick Checklist

🔰 What is the <img> Tag?

📷 Basic Example

🧭 Image Paths (Absolute vs Relative)

⚙️ Common Image Attributes

🖼️ Image Alignment & Caption

🌐 Linking an Image (Clickable Image)

📱 Responsive Images (Modern Web)

🧪 Using <picture> Tag for Different Screen Sizes

🚫 Common Image Errors

🧠 Summary

🔰 What is a Paragraph (<p>)?

🧩 Basic Syntax

📋 Nested & Inline Elements inside Paragraph

🧭 Paragraph Alignment (Text Align Property)

🎨 Styling Paragraphs

📄 Multiple Paragraph Example (Web Page Layout)

💬 What are Comments ()?

🧪 Comment Example (Hide a Section)

🧠 Summary

🔰 What is a Table in HTML?

📋 Table Tags Explanation

🎨 Table Border, Width & Height

📦 Cellpadding & Cellspacing

📏 Border Collapse Property (CSS Way)

📚 Rowspan & Colspan

🎨 Styled Table Example (Modern CSS)

🧠 Summary

🔰 What are Lists in HTML?

1️⃣ Ordered List (<ol>)

2️⃣ Unordered List (<ul>)

3️⃣ Nested Lists (Lists inside Lists)

4️⃣ Definition List (<dl>)

🎨 CSS Styling Lists

🧠 Summary

🔰 What is a Form in HTML?

🧩 Important Form Attributes

1) `<meta charset="UTF-8">`

2) `<meta name="viewport">`

3) `<title>` (Tab Title)

7) JavaScript – `defer` vs `async`