HTML Formatting Tags: bold, italic, mark और भी
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
HTML में कुछ खास tags होते हैं जो text का रूप और उसका अर्थ दोनों बदल देते हैं। सबसे ज़्यादा इस्तेमाल होने वाले दो tags हैं <strong> ज़रूरी text के लिए (bold दिखता है) और <em> ज़ोर वाले text के लिए (italic दिखता है)।
Bold और italic — सही तरीका
आपको <b> और <i> भी दिखेंगे। Screen पर वे एक जैसे दिखते हैं — bold और italic — लेकिन उनमें कोई अर्थ नहीं होता। <strong> browser और search engines को बताता है कि "यह ज़रूरी है"। <em> कहता है कि "इस शब्द पर ज़ोर देकर पढ़ो"। अंधे उपयोगकर्ताओं के लिए screen reader strong और em पर सच में अपनी आवाज़ बदल देता है, लेकिन b और i पर नहीं। इसलिए अपने पेजों में strong और em इस्तेमाल करें।
दूसरे उपयोगी formatting tags
<small>— छोटा text, अक्सर fine print के लिए इस्तेमाल होता है।<mark>— highlighted text, जैसे पीले marker pen से निशान लगाया हो।<del>— कटा हुआ text (कुछ हटाया गया है)।<ins>— रेखांकित text (कुछ जोड़ा गया है)।<sub>— subscript, जैसे H2O में 2।<sup>— superscript, जैसे x2 में 2।
पहले अर्थ, फिर रूप
HTML में formatting tags दो तरह के होते हैं। <strong> और <em> अर्थ जोड़ते हैं: यह text ज़रूरी है, इस शब्द पर ज़ोर है। Screen reader इन्हें ज़ोर देकर पढ़ता है, और search engines इन पर ध्यान देते हैं। <b> और <i> सिर्फ रूप बदलते हैं — bold या italic — बिना कोई अर्थ जोड़े। शक हो तो <strong> और <em> इस्तेमाल करें।
याद रखने की तरकीब: strong = ज़रूरी बात, em = ज़ोर से बोलो।
फ़ॉर्मैटिंग tags
| Tag | मान | विवरण |
|---|---|---|
<b> | text | Bold text, बिना किसी अतिरिक्त अर्थ के। |
<strong> | text | ज़रूरी text — bold दिखता है, अर्थ के साथ। |
<i> | text | Italic text, बिना किसी अतिरिक्त अर्थ के। |
<em> | text | ज़ोर वाला text — italic दिखता है, अर्थ के साथ। |
<small> | text | छोटा text, side notes और fine print के लिए। |
<mark> | text | Highlighted text, जैसे marker pen से निशान। |
<del> / <ins> | text | हटाया गया text (कटा हुआ) / जोड़ा गया text (रेखांकित)। |
<sub> / <sup> | text | Subscript (H<sub>2</sub>O) / superscript (x<sup>2</sup>)। |
दोनों तरह के tags व्यवहार में कैसे अलग हैं, यह देखें:
<p>This is <strong>very important</strong> news.</p> <p>Water is H<sub>2</sub>O and x<sup>2</sup> means x squared.</p>
<strong> को bold और <em> को italic दिखाते हैं — लेकिन यह सिर्फ उनका default रूप है। उनका असली काम अर्थ देना है, और CSS कभी भी उनका रूप बदल सकता है।<mark> इस्तेमाल करें। पाठक उसे तुरंत देख लेते हैं, जैसे कागज़ पर highlighter से निशान।आम गलतियाँ
- ज़रूरी text के लिए
<b>इस्तेमाल करना —<strong>इस्तेमाल करें ताकि screen reader भी उस पर ज़ोर दे। - ज़ोर के लिए
<i>इस्तेमाल करना — उसी कारण से<em>इस्तेमाल करें। - Formatting tags को गलत क्रम में बंद करना — अंदर वाला tag पहले बंद करें।
- पूरे paragraph को bold करना, बजाय उसे CSS से style करने के।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Formatting</title>
</head>
<body>
<p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>
<p><small>Small print.</small> <mark>Highlighted text.</mark></p>
<p>Price was <del>₹500</del> <ins>₹399</ins>.</p>
<p>Water is H<sub>2</sub>O and 2<sup>2</sup> = 4.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. strong और b में क्या फ़र्क है?
दोनों बोल्ड दिखते हैं, लेकिन strong का मतलब है कि टेक्स्ट ज़रूरी है। स्क्रीन रीडर strong को ज़ोर देकर पढ़ता है, b को नहीं।
2. em और i में क्या फ़र्क है?
दोनों इटैलिक दिखते हैं, लेकिन em का मतलब है कि शब्द पर ज़ोर देना है। स्क्रीन रीडर em को ज़ोर देकर पढ़ता है, i को नहीं।
3. टेक्स्ट को मार्कर से हाइलाइट कैसे करें?
mark टैग इस्तेमाल करें। यह टेक्स्ट को पीले मार्कर जैसा हाइलाइट कर देता है, जिससे ज़रूरी बात तुरंत नज़र आती है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
