एचटीएमएल कैसे सीखें, इसका सबसे आसान जवाब: रोज़ 30 से 45 मिनट दें, पहले दिन से ही छोटे-छोटे पेज बनाकर अभ्यास करें, और सिर्फ भरोसेमंद मुफ्त स्रोतों से पढ़ें, जैसे Mozilla का MDN Web Docs और freeCodeCamp।
लैपटॉप न हो तो भी शुरुआत हो सकती है। फोन के ब्राउज़र में MDN Playground खोलें, बाईं तरफ HTML लिखें और Run दबाते ही बगल में अपना वेब पेज देखें। बेसिक HTML 3 से 4 हफ्ते के नियमित अभ्यास में अच्छी तरह आ जाता है।
आप जो भी वेबसाइट खोलते हैं, सरकारी पोर्टल हो, ऑनलाइन दुकान हो या यही ब्लॉग, उसका ढांचा HTML से बना होता है। HTML का पूरा नाम HyperText Markup Language है। यह असल में प्रोग्रामिंग भाषा नहीं, बल्कि एक मार्कअप भाषा है: आप ब्राउज़र को बताते हैं कि कौन सी लाइन हेडिंग है, कौन सा पैराग्राफ, कहां फोटो लगेगी और कौन सा शब्द लिंक है।
इसी वजह से कोडिंग की शुरुआत के लिए HTML सबसे आसान रास्ता माना जाता है। इसमें गणित नहीं लगता, गलती हो तो कुछ टूटता नहीं, और जो लिखते हैं वह तुरंत स्क्रीन पर दिखता है। इस गाइड में एचटीएमएल कैसे सीखें, इसका पूरा रास्ता है: पहला पेज, ज़रूरी टैग, अभ्यास का प्लान और मुफ्त कोर्स।
HTML सीखने के लिए क्या चाहिए
- कोई भी स्मार्टफोन या कंप्यूटर जिसमें Chrome, Firefox, Edge या Safari जैसा नया ब्राउज़र हो।
- इंटरनेट, ताकि ऑनलाइन एडिटर और कोर्स खुल सकें।
- थोड़ी अंग्रेज़ी: टैग के नाम अंग्रेज़ी में होते हैं, लेकिन गिने-चुने शब्द ही याद करने पड़ते हैं।
- धैर्य: रोज़ थोड़ा अभ्यास, एक दिन में बहुत सारा पढ़ने से बेहतर है।
किसी पेड कोर्स, महंगे लैपटॉप या खास सॉफ्टवेयर की ज़रूरत नहीं है। आगे चलकर कंप्यूटर हो तो कोड एडिटर इस्तेमाल कर सकते हैं, पर शुरुआत के लिए ब्राउज़र काफी है।
मोबाइल पर पहला वेब पेज बनाएं: स्टेप बाय स्टेप
- फोन के ब्राउज़र में developer.mozilla.org/en-US/play खोलें। यह Mozilla की आधिकारिक साइट MDN का मुफ्त Playground है। फोन पर पेज ठीक न दिखे तो ब्राउज़र मेन्यू से Desktop site चालू कर लें।
- यहां तीन खाने दिखेंगे: HTML, CSS और JAVASCRIPT। अभी सिर्फ HTML वाले खाने में लिखना है।
- HTML खाने में यह लिखें:
<h1>मेरा पहला वेब पेज</h1>और अगली लाइन में<p>मैं HTML सीख रहा हूं।</p> - ऊपर Run बटन दबाएं। बगल वाले हिस्से में बड़ी हेडिंग और उसके नीचे एक लाइन दिखेगी। बधाई हो, यह आपका पहला वेब पेज है।
- अब कुछ बदलकर देखें: h1 को h2 कर दें, नया पैराग्राफ जोड़ें, फिर Run दबाएं। हर बदलाव का असर तुरंत दिखेगा।
- कोड बिखर जाए तो Format दबाएं, जो कोड को साफ-सुथरा कर देता है। सब मिटाकर फिर से शुरू करना हो तो Clear दबाएं।
अपना कोड किसी नोट्स ऐप में भी कॉपी करके रखें। Playground में Share बटन भी है, पर अभ्यास का कोड अपने पास सेव रखना सबसे सुरक्षित है।
हर HTML पेज का बेसिक ढांचा
असली वेब पेज में ऊपर कुछ ज़रूरी लाइनें होती हैं। MDN के मुताबिक हर पेज का ढांचा कुछ ऐसा होता है:
<!doctype html>: ब्राउज़र को बताता है कि यह आधुनिक HTML पेज है।<html lang="hi">: पूरे पेज को घेरने वाला टैग।langसे पेज की भाषा बताई जाती है।<head>: यहां वो जानकारी होती है जो पेज पर सीधे नहीं दिखती, जैसे<meta charset="utf-8">(ताकि हिंदी अक्षर ठीक दिखें),<meta name="viewport" content="width=device-width">(ताकि मोबाइल पर पेज सही साइज़ में खुले) और<title>(ब्राउज़र टैब में दिखने वाला नाम)।<body>: पेज पर दिखने वाली हर चीज़, जैसे हेडिंग, पैराग्राफ, फोटो और लिंक, इसी के अंदर लिखी जाती है।
कंप्यूटर पर काम करते समय मुख्य पेज की फाइल का नाम आम तौर पर index.html रखा जाता है और फोटो एक अलग images फोल्डर में रखी जाती हैं।
सबसे ज़रूरी HTML टैग, जो पहले हफ्ते में सीखें
| टैग | किस काम का | छोटा उदाहरण |
|---|---|---|
| h1 से h6 | हेडिंग (h1 सबसे बड़ी) | <h2>मेरे शौक</h2> |
| p | पैराग्राफ | <p>मुझे क्रिकेट पसंद है।</p> |
| a | लिंक | <a href="https://example.com">यहां देखें</a> |
| img | फोटो | <img src="photo.jpg" alt="मेरी फोटो"> |
| ul, ol, li | बुलेट और नंबर वाली लिस्ट | <ul><li>आम</li></ul> |
| strong, em | मोटा और तिरछा ज़ोर | <strong>ज़रूरी</strong> |
ज़्यादातर टैग जोड़ी में आते हैं: खुलने वाला <p> और बंद होने वाला </p>। img जैसे कुछ टैग अकेले आते हैं। फोटो में alt ज़रूर लिखें, ताकि फोटो न खुले या कोई स्क्रीन रीडर इस्तेमाल करे तो भी पता चले कि फोटो किस बारे में है। लिंक में पूरा पता https:// के साथ लिखें।
एचटीएमएल कैसे सीखें: 30 दिन का आसान प्लान
यह हमारा सुझाया हुआ प्लान है। अपनी रफ्तार के हिसाब से इसे आगे-पीछे कर सकते हैं:
| समय | क्या सीखें | अभ्यास |
|---|---|---|
| दिन 1 से 7 | पेज का ढांचा, हेडिंग, पैराग्राफ, लिंक, फोटो, लिस्ट | अपने बारे में एक पेज: नाम, शहर, शौक की लिस्ट |
| दिन 8 से 14 | टेबल, फॉर्म (input, button), सेक्शन वाले टैग (header, main, footer) | स्कूल टाइम-टेबल वाली टेबल, एक संपर्क फॉर्म |
| दिन 15 से 21 | थोड़ा CSS: रंग, फॉन्ट, बॉर्डर, स्पेसिंग | अपने पेज को रंग और अच्छा लुक दें |
| दिन 22 से 30 | एक छोटा प्रोजेक्ट पूरा करें | दुकान, कोचिंग या रेसिपी के लिए 2 से 3 पेज की साइट |
HTML के साथ CSS (डिज़ाइन) और बाद में JavaScript (बटन दबाने पर कुछ होना) सीखते हैं। तीनों मिलकर वेबसाइट बनाते हैं। अपनी साइट को इंटरनेट पर लाने का तरीका हमारी गाइड वेबसाइट कैसे बनाएं में है।
मुफ्त और भरोसेमंद जगहें जहां से HTML सीखें
- MDN Web Docs (Mozilla): Learn web development सेक्शन में शुरुआत से पहली वेबसाइट बनाना सिखाया गया है। हर टैग की पूरी जानकारी भी यहीं मिलती है। भाषा अंग्रेज़ी है, पर उदाहरण बहुत साफ हैं।
- freeCodeCamp: freecodecamp.org/learn पर Responsive Web Design Certification और Certified Full-Stack Developer Curriculum जैसे कोर्स हैं, जिनमें ब्राउज़र के अंदर ही कोड लिखकर हर स्टेप पास करना होता है। प्रोग्रेस सेव करने के लिए मुफ्त अकाउंट बनाना होता है।
- AI को टीचर बनाएं: कोई टैग समझ न आए तो ChatGPT या Gemini से हिंदी में पूछें, जैसे “img टैग में alt क्यों लिखते हैं, आसान हिंदी में समझाओ”। तरीका हमारी गाइड ChatGPT हिंदी में कैसे इस्तेमाल करें में है। AI का जवाब हमेशा MDN से मिलाकर देखें।
“7 दिन में वेब डेवलपर बनें, नौकरी पक्की” जैसे विज्ञापनों और टेलीग्राम पर बिकने वाले पायरेटेड कोर्स से बचें। ऊपर बताए आधिकारिक स्रोत मुफ्त हैं, और नौकरी किसी सर्टिफिकेट से नहीं, आपके बनाए प्रोजेक्ट से मिलती है।
शुरुआत में होने वाली आम गलतियां
- टैग बंद करना भूल जाना:
<p>खोला तो</p>से बंद करें, वरना आगे का लेआउट बिगड़ सकता है। - टैग गलत क्रम में बंद करना: जो टैग बाद में खुला, वह पहले बंद होना चाहिए।
- सिर्फ वीडियो देखते रहना: हर वीडियो या लेसन के बाद खुद टाइप करें। कॉपी-पेस्ट से हाथ नहीं बैठता।
- बहुत जल्दी फ्रेमवर्क पर कूदना: पहले सादा HTML और CSS पक्का करें, बाकी बाद में।
HTML के बाद प्रोग्रामिंग की असली दुनिया में जाना हो तो पाइथन कैसे सीखें देखें, और कोडिंग का पूरा मतलब समझने के लिए कोडिंग क्या है पढ़ें। AI और टेक्नोलॉजी की बाकी गाइड हमारे AI सेक्शन में हैं।
FAQ
क्या मोबाइल से HTML सीख सकते हैं?
हां। MDN Playground और freeCodeCamp दोनों फोन के ब्राउज़र में खुलते हैं। शुरुआती अभ्यास फोन पर आराम से हो जाता है। बड़े प्रोजेक्ट के लिए आगे चलकर कंप्यूटर ज़्यादा सुविधाजनक रहता है।
HTML सीखने में कितना समय लगता है?
रोज़ 30 से 45 मिनट के अभ्यास से बेसिक HTML आम तौर पर 3 से 4 हफ्ते में आ जाता है। CSS के साथ अच्छी पकड़ बनाने में कुछ महीने लग सकते हैं।
क्या HTML प्रोग्रामिंग भाषा है?
नहीं, HTML एक मार्कअप भाषा है जो पेज का ढांचा बताती है। इसमें लॉजिक या हिसाब नहीं होता। उसके लिए JavaScript या Python जैसी प्रोग्रामिंग भाषाएं सीखी जाती हैं।
क्या सिर्फ HTML से नौकरी मिल जाएगी?
सिर्फ HTML काफी नहीं है। वेब डेवलपमेंट की नौकरी के लिए HTML, CSS, JavaScript और अपने बनाए प्रोजेक्ट चाहिए। HTML उस रास्ते की पहली सीढ़ी है।
क्या हिंदी में वेब पेज बना सकते हैं?
हां। पेज के head में <meta charset="utf-8"> रखें और html टैग में lang="hi" लिखें। इसके बाद हिंदी टेक्स्ट ठीक से दिखेगा।
