पाठ, चित्र, लिंक और सूचियाँ
शीर्षकों और अनुच्छेदों से पाठ को फ़ॉर्मैट करें, alt पाठ के साथ चित्र जोड़ें, हाइपरलिंक बनाएँ और क्रमबद्ध तथा अक्रमबद्ध सूचियाँ बनाएँ।
पाठ, चित्र, लिंक और सूचियाँ, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
शीर्षक: h1 से h6 तक
HTML छह शीर्षक स्तर उपलब्ध कराता है। इनका उपयोग दस्तावेज़ की रूपरेखा बनाने के लिए करें, पाठ का आकार बदलने के लिए नहीं। <h1> पृष्ठ का शीर्षक है (प्रति पृष्ठ एक बार), <h2> प्रमुख अनुभागों के लिए, <h3> उप-अनुभागों के लिए और इसी तरह आगे।
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>अनुच्छेद और <br>
<p> तत्व पाठ के एक अनुच्छेद को घेरता है। ब्राउज़र अपने आप ऊपर और नीचे जगह जोड़ता है। <br> का उपयोग सीमित रूप से करें — केवल उन अर्थपूर्ण पंक्ति-विभाजनों के लिए, जैसे पते या कविता में, अनुच्छेदों के बीच जगह बनाने के लिए नहीं।
पाठ के इनलाइन तत्व
पाठ को अर्थ देने के लिए इनलाइन तत्वों का उपयोग करें: महत्वपूर्ण पाठ के लिए <strong> (गाढ़ा), ज़ोर देने के लिए <em> (तिरछा), कोड अंशों के लिए <code>, उभरे हुए पाठ के लिए <mark> और बारीक विवरण के लिए <small>।
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>चित्र: <img> तत्व
<img> तत्व किसी चित्र को एम्बेड करता है। src एट्रिब्यूट यूआरएल देता है और alt स्क्रीन रीडर के लिए तथा चित्र लोड न होने पर वैकल्पिक पाठ देता है। हमेशा अर्थपूर्ण alt मान शामिल करें।
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">अच्छा Alt पाठ लिखना
Alt पाठ में चित्र की सामग्री और उद्देश्य स्पष्ट होना चाहिए। सजावटी चित्रों (जगह भरने वाले चित्र या केवल सजावट के लिए उपयोग किए गए आइकन) में alt="" (खाली स्ट्रिंग) का उपयोग करें, ताकि स्क्रीन रीडर उन्हें छोड़ दें। कभी भी alt="चित्र" न लिखें — बस यह बताएँ कि चित्र में क्या दिखाया गया है।
हाइपरलिंक: <a> तत्व
<a> (एंकर) तत्व हाइपरलिंक बनाता है। href एट्रिब्यूट गंतव्य यूआरएल निर्धारित करता है। लिंक का पाठ गंतव्य का वर्णन करना चाहिए — कभी भी "यहाँ क्लिक करें" न लिखें।
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>target=_blank सुरक्षा टिप्पणी
target="_blank" से लिंक को नए टैब में खोलते समय हमेशा rel="noopener noreferrer" जोड़ें। इसके बिना, खोला गया पृष्ठ खोलने वाली विंडो ऑब्जेक्ट तक पहुँच सकता है — यह रिवर्स टैबनेपिंग नामक सुरक्षा भेद्यता है।
अक्रमित सूचियाँ: <ul>
<ul> (अक्रमित सूची) का उपयोग तब करें जब आइटमों का क्रम महत्वपूर्ण न हो — जैसे सुविधाएँ, सामग्री या नेविगेशन लिंक। प्रत्येक आइटम एक <li> होता है। ब्राउज़र डिफ़ॉल्ट रूप से बुलेट दिखाता है, लेकिन आप लगभग हमेशा उन्हें CSS से स्टाइल करेंगे।
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>क्रमित सूचियाँ: <ol>
<ol> (क्रमित सूची) का उपयोग तब करें जब क्रम महत्वपूर्ण हो — जैसे ट्यूटोरियल के चरण, रैंकिंग या निर्देश। आइटम अपने आप क्रमांकित हो जाते हैं। क्रमांकन नियंत्रित करने के लिए start और reversed एट्रिब्यूट का उपयोग करें।
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>विवरण सूचियाँ: <dl>
<dl> (विवरण सूची) शब्दों और उनकी परिभाषाओं या विवरणों को समूहित करती है। इसका उपयोग शब्दावली, मेटाडेटा (लेखक/तारीख) और कुंजी-मान युग्मों के लिए करें। <dt> शब्द है और <dd> उसका विवरण है।
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>सूचियों को नेस्ट करना
पदानुक्रम दिखाने के लिए सूचियों को नेस्ट किया जा सकता है। बाल <ul> या <ol> को मूल <li> तत्व के भीतर रखें। केवल इंडेंटेशन के लिए नेस्ट न करें — इसके बजाय CSS का उपयोग करें।
त्वरित जाँच
कौन-सा एट्रिब्यूट स्क्रीन रीडर के लिए चित्र का पाठ्य विवरण उपलब्ध कराता है?
पुनरावलोकन: पाठ, चित्र, लिंक और सूचियाँ
दस्तावेज़ की संरचना के लिए शीर्षक तत्वों का उपयोग करें, अनुच्छेदों के लिए p, अर्थपूर्ण alt पाठ वाले चित्रों के लिए img, नेविगेशन के लिए वर्णनात्मक लिंक पाठ वाले a और सूची सामग्री के लिए ul/ol/dl का उपयोग करें। अर्थपूर्णता HTML को सुगम और मशीन द्वारा पढ़े जाने योग्य बनाती है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “पाठ, चित्र, लिंक और सूचियाँ” पाठ निःशुल्क है?
हाँ—“पाठ, चित्र, लिंक और सूचियाँ” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“पाठ, चित्र, लिंक और सूचियाँ” में मैं क्या सीखूँगा?
शीर्षकों और अनुच्छेदों से पाठ को फ़ॉर्मैट करें, alt पाठ के साथ चित्र जोड़ें, हाइपरलिंक बनाएँ और क्रमबद्ध तथा अक्रमबद्ध सूचियाँ बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“पाठ, चित्र, लिंक और सूचियाँ” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- दस्तावेज़ संरचना: DOCTYPE html head body
- अर्थपूर्ण टैग: header nav main article footer
- पाठ, चित्र, लिंक और सूचियाँ
- फ़ॉर्म: input label button