HTML Tutorial

➤ HTML HOME
➤ HTML Introduction
➤ HTML Editors
➤ HTML Basic
➤ HTML Elements
➤ HTML Attributes
➤ HTML Headings
➤ HTML Paragraphs
➤ HTML Styles
➤ HTML Formatting
➤ HTML Quotations
➤ HTML Comments
➤ HTML Colors
➤ HTML CSS
➤ HTML Links
➤ HTML Images
➤ HTML Favicon
➤ HTML Tables
➤ HTML Lists
➤ HTML Block & Inline
➤ HTML Div
➤ HTML Classes
➤ HTML Id
➤ HTML Iframes
➤ HTML JavaScript
➤ HTML File Paths
➤ HTML Head
➤ HTML Layout
➤ HTML Responsive
➤ HTML Computercode
➤ HTML Semantics
➤ HTML Style Guide
➤ HTML Entities
➤ HTML Symbols
➤ HTML Emojis
➤ HTML Charset
➤ HTML URL Encode
➤ HTML vs. XHTML

HTML Forms

➤ HTML Forms
➤ HTML Form Attributes
➤ HTML Form Elements
➤ HTML Input Types
➤ HTML Input Attributes
➤ HTML Input Form Attributes

HTML Graphics

➤ HTML Canvas
➤ HTML SVG

HTML Media

➤ HTML Media
➤ HTML Video
➤ HTML Audio
➤ HTML Plug-ins
➤ HTML YouTube

HTML APIs

➤ HTML Geolocation
➤ HTML Drag/Drop
➤ HTML Web Storage
➤ HTML Web Workers
➤ HTML SSE

HTML Examples & Tools

➤ HTML Examples
➤ HTML Editor
➤ HTML Quiz
➤ HTML Exercises
➤ HTML Website
➤ HTML Syllabus
➤ HTML Study Plan
➤ HTML Interview Prep
➤ HTML Bootcamp
➤ HTML Summary
➤ HTML Accessibility

HTML References

➤ HTML Tag List
➤ HTML Attributes
➤ HTML Global Attributes
➤ HTML Browser Support
➤ HTML Events
➤ HTML Colors
➤ HTML Canvas
➤ HTML Audio/Video
➤ HTML Doctypes
➤ HTML Character Sets
➤ HTML URL Encode
➤ HTML Lang Codes
➤ HTTP Messages
➤ HTTP Methods
➤ PX to EM Converter
➤ Keyboard Shortcuts

HTML Basic

🌟 HTML बेसिक उदाहरण (Basic Examples) – Complete Guide by SparkTechny

लेखक: SparkTechny Web Team
अपडेट किया गया: जून 2025
Level: Beginner Friendly
भाषा: आसान हिंदी मे

🔰 परिचय

Welcome to SparkTechny!
इस चैप्टर में हम कुछ आसान और बेसिक HTML उदाहरण (Examples) देखेंगे जो शुरुआती सीखने वालों के लिए बहुत फायदेमंद हैं।
अगर कोई टैग आपने अब तक नहीं सीखा है, तो घबराने की जरूरत नहीं है — ये तो बस शुरुआत है।

HTML (HyperText Markup Language) वेबसाइट बनाने की पहली और सबसे ज़रूरी भाषा है।
अगर आप एक Web Developer, Blogger, या Digital Creator बनना चाहते हैं, तो HTML सीखना आपका पहला कदम होना चाहिए।

इस Premium ब्लॉग पोस्ट में, हम HTML के बेसिक उदाहरणों को step-by-step, live code, और प्रैक्टिकल एक्सप्लेन के साथ सीखेंगे।

Try it Yourself »

🧱 HTML Document Structure – एक सरल उदाहरण





🔍 Explanation:

  • <!DOCTYPE html> – HTML5 डॉक्युमेंट का declaration

  • <html> – पूरा HTML डॉक्युमेंट यहीं से शुरू होता है

  • <body> – जो ब्राउज़र में दिखता है वो इसी के अंदर आता है

🏷️ <!DOCTYPE> Declaration क्या है?

 

यह HTML का पहला line होता है जो ब्राउज़र को बताता है कि यह HTML5 डॉक्युमेंट है।

Example:

<!DOCTYPE>

 

✔️ यह केवल एक बार लिखा जाता है |

✔️ हमेशा सबसे ऊपर होता है
✔️ यह केस-सेंसिटिव नहीं होता

🔠 HTML Headings – <h1> से <h6> तक

Example:

<Heading 1>
<Heading 2>
<Heading 3>
<Heading 4>
<Heading 5>
<Heading 6>

  💡 <h1> सबसे महत्वपूर्ण heading होती है, जो SEO में भी बहुत मायने रखती है।

📄 HTML Paragraphs – Content लिखने का आधार

Example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

 🧠 Paragraphs content को समझने और पढ़ने में आसान बनाते हैं।

🔗 HTML Links – किसी भी वेबसाइट से कनेक्ट करें

Example:

<a href="https://sparktechny.in">Visit SparkTechny</a>

  ➡️ href attribute के द्वारा आप लिंक का address देते हैं।
➡️ Users को एक पेज से दूसरे पेज तक ले जाने के लिए सबसे जरूरी तरीका।

🖼️ HTML Images – Web Page को Visual बनाएं

Example:

<img src="sparktechny.jpg" alt="SparkTechny Logo" width="120" height="80">

   

🖼️ src – image का path
📝 alt – image ना दिखे तो जो टेक्स्ट दिखे
📐 width/height – इमेज का साइज

   

🧑‍💻 HTML Source Code कैसे देखें?

 

🔍 Page Source देखने का तरीका:

  • Windows पर CTRL + U दबाएं
  • या Right-Click → “View Page Source”

🧪 Inspect Element:

  • किसी भी वेबसाइट पर राइट-क्लिक करें → “Inspect”
  • Code को Live देख सकते हैं और edit भी कर सकते हैं।

   

✅ SparkTechny Tips

 

🔹 Heading tags का सही इस्तेमाल SEO बढ़ाता है
🔹 हमेशा एक ही पेज पर एक <h1> रखें
🔹 Paragraphs और Images को अच्छे spacing से रखें
🔹 Page Source और Inspect Tool का रोज़ अभ्यास करें

   

📘 SparkTechny Quiz – Practice से समझ बढ़ेगी!

नीचे दिए गए Questions को solve करके देखो क्या आपने बेसिक HTML अच्छे से सीखा है या नहीं।

🧠 HTML Practice Questions (With Answers Below)

📘 SparkTechny Quiz – HTML MCQs (Multiple Choice Questions)

❓ हर सवाल के नीचे 4 options दिए गए हैं। सही जवाब नीचे “उत्तर (Answers)” सेक्शन में मिल जाएगा।

🧠 Q1. HTML डॉक्युमेंट की शुरुआत किस tag से होती है?

  1. <html>
    B. <head>
    C. <!DOCTYPE html>
    D. <body>

🧠 Q2. कौन सा tag सबसे Important Heading के लिए होता है?

  1. <h6>
    B. <h3>
    C. <h1>
    D. <heading>

🧠 Q3. एक Simple Paragraph के लिए कौन सा टैग use होता है?

  1. <pg>
    B. <para>
    C. <paragraph>
    D. <p>

🧠 Q4. HTML में इमेज जोड़ने के लिए कौन सा टैग होता है?

  1. <img>
    B. <image>
    C. <src>
    D. <pic>

🧠 Q5. किसी लिंक में href किसके लिए होता है?

  1. लिंक को color देने के लिए
    B.     लिंक के URL को define करने के लिए
    C.     लिंक को bold करने के लिए
    D.     लिंक का नाम लिखने के लिए

🧠 Q6. HTML में visible content कौन से टैग के अंदर आता है?

  1. <html>
    B. <head>
    C. <meta>
    D. <body>

🧠 Q7. ALT attribute किस टैग के साथ use होता है?

  1. <a>
    B. <h1>
    C. <img>
    D. <p>

🧠 Q8. HTML में Source Code देखने के लिए कौन सी Shortcut Key है?

  1. CTRL + D
    B. CTRL + S
    C. CTRL + U
    D. CTRL + E

🧠 Q9. Inspect Element किसलिए होता है?

  1. Page को zoom करने के लिए
    B. Text     को copy करने के लिए
    C. HTML     और CSS को live check/edit करने के लिए
    D. Background color     बदलने के लिए

🧠 Q10. HTML में कितने heading levels होते हैं?

  1. 3
    B. 6
    C. 8
    D. 10

✅ उत्तर (Answers):

  1. C. <!DOCTYPE html>
  2. C. <h1>
  3. D. <p>
  4. A. <img>
  5. B. लिंक के URL को define करने के लिए
  6. D. <body>
  7. C. <img>
  8. C. CTRL + U
  9. C. HTML और CSS को live check/edit करने के लिए
  10. B. 6

🎯 अगर आप HTML में expert बनना चाहते हैं, तो SparkTechny के साथ जुड़िए और हमारा HTML Course पूरा कीजिए।

📥 आगे क्या करें?

➤ HTML Editor पर अभ्यास करें
➤ HTML Full Course Start करें
➤ HTML Certificate के लिए Apply करें

🔥 SparkTechny – सीखो, बनाओ, कमाओ।
📧 Contact Us: support@sparktechny.in
🌐 Website: www.sparktechny.in

Scroll to Top