HTML में आपके टेक्स्ट को फॉर्मेट करने के कई तरीके हैं ताकि किसी चीज़ पर ध्यान आकर्षित किया जा सके। इस पोस्ट में, हम बात करेंगे कि HTML में अपने टेक्स्ट को बोल्ड, इटैलिक, या अंडरलाइन कैसे फॉर्मेट करें। आप कुछ ही समय में फॉर्मेटिंग प्रो बन जाएंगे!
बोल्ड (Bold)
HTML5 से पहले HTML में टेक्स्ट को बोल्ड सेट करने में उस टेक्स्ट को घेरना शामिल था जिसे आप <b> टैग्स के साथ बोल्ड करना चाहते थे:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>यह टेक्स्ट <b>बोल्ड</b> है</p> <script src="script.js"></script> </body> </html>
जब HTML5 मानक जारी किया गया, तो टेक्स्ट को बोल्ड बनाने का पसंदीदा तरीका <strong> टैग्स का उपयोग करने में बदल गया:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>यह टेक्स्ट भी <strong>बोल्ड</strong> है</p> <script src="script.js"></script> </body> </html>
<b> और <strong> एलिमेंट्स के बीच एकमात्र अंतर सेमांटिक्स है। स्क्रीन रीडर्स <strong> टैग्स देखेंगे और जब वह इसे पढ़ेगा तो टेक्स्ट को स्पष्ट रूप से अधिक जोर देगा। <b> इसकी अनुमति नहीं देता।
इटैलिक (Italics)
बोल्ड के साथ भी, इटैलिकाइज़्ड टेक्स्ट बनाने के लिए दो अलग-अलग मानक हैं जिन्हें हम जानते हैं। HTML5 मानक से पहले, इटैलिक टेक्स्ट को <i> टैग्स में कैप्सुलेट करके बनाया गया था।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>यह टेक्स्ट <i>इटैलिक्स</i> में है</p> <script src="script.js"></script> </body> </html>
जैसे ही HTML5 मानक बना, <i> टैग ने अधिक सेमांटिक <em> टैग के लिए रास्ता बना दिया। "em" जोर का संक्षिप्त रूप है। <em> टैग स्क्रीन रीडर को टेक्स्ट पर अधिक जोर देने का संकेत देता है ताकि यूजर सामान्य टेक्स्ट और जोर दिए गए टेक्स्ट के बीच अंतर कर सके।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
अंडरलाइन (Underline)
HTML अंडरलाइन टेक्स्ट का उपयोग अक्सर गलत वर्तनी वाले शब्दों को इंगित करने के लिए किया जाता है। इसका उपयोग ऐसी जगह पर न करें जहां इसे हाइपरलिंक के लिए भ्रमित किया जा सके। अपने टेक्स्ट को <u> टैग्स के साथ मार्कअप करें ताकि इसे फॉर्मेटिंग के लिए मार्क किया जा सके और फिर CSS का उपयोग करके उस अंडरलाइन स्टाइल के प्रकार को इंगित करें जो आप चाहेंगे।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <style> p u { text-decoration: underline red wavy; } </style> </head> <body> <p>यह एक <u>गलत वर्तनी</u> वाला शब्द है</p> </body> </html>
निष्कर्ष
इस लेख में हमने HTML में कई फॉर्मेटिंग टैग्स पर चर्चा की। <strong> और <em> के मामले में, हम उनका उपयोग उन एलिमेंट्स पर सेमांटिक्स लागू करने के लिए करते हैं जो स्क्रीन पर बोल्ड और इटैलिक दिखते हैं। स्क्रीन रीडर पर, उन शब्दों पर जोर दिया जाता है। <u> टैग के साथ, हम टेक्स्ट को अंडरलाइन कर सकते हैं। इन तीनों के अलावा कई और फॉर्मेटिंग विकल्प हैं।
