HTML में टेक्स्ट को अंडरलाइन कैसे करें?

परिचय

HTML में टेक्स्ट को अंडरलाइन करने के लिए, <u> टैग का उपयोग करें। <u> टैग HTML में डिप्रिकेटेड था, लेकिन HTML5 में पुन: प्रस्तुत किया गया। अब यह स्टाइलिस्टिक रूप से अलग टेक्स्ट को दर्शाता है, जैसे गलत वर्तनी वाला शब्द।

विधि 1: <u> टैग (सिमेंटिक)

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML u tag</title> 
    </head> 
    <body> 
        <h1>हेडिंग</h1> 
        <p><u>यह टेक्स्ट अंडरलाइन होगा।</u></p> 
    </body> 
</html>

विधि 2: CSS text-decoration (स्टाइलिंग)

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Text underline</title> 
    </head> 
    <body> 
        <h1>हेडिंग</h1> 
        <p style="text-decoration: underline;">यह टेक्स्ट अंडरलाइन होगा।</p> 
    </body> 
</html>

महत्वपूर्ण नोट

style एट्रिब्यूट का उपयोग ग्लोबली सेट किसी भी स्टाइल को ओवरराइड करता है। यह HTML <style> टैग या एक्सटर्नल स्टाइल शीट में सेट किसी भी स्टाइल को ओवरराइड कर देगा।

आउटपुट

<u> बनाम CSS text-decoration: कब क्या उपयोग करें?

उन्नत CSS text-decoration

<style>
    /* बेसिक */
    .underline-basic { text-decoration: underline; }
    
    /* रंग */
    .underline-color { text-decoration: underline red; }
    
    /* शैली: solid, double, dotted, dashed, wavy */
    .underline-style { text-decoration: underline wavy red; }
    
    /* मोटाई */
    .underline-thick { text-decoration: underline 3px red; }
    
    /* ऑफसेट (टेक्स्ट से दूरी) */
    .underline-offset { text-decoration: underline 2px red; text-underline-offset: 4px; }
    
    /* संक्षिप्त */
    .underline-all { text-decoration: underline wavy 3px red; text-underline-offset: 3px; }
    
    /* मल्टीपल */
    .multi-line { text-decoration: underline overline line-through; }
</style>

<p class="underline-basic">बेसिक अंडरलाइन</p>
<p class="underline-color">लाल अंडरलाइन</p>
<p class="underline-style">वेवी लाल अंडरलाइन</p>
<p class="underline-thick">मोटी लाल अंडरलाइन</p>
<p class="underline-offset">ऑफसेट के साथ</p>
<p class="underline-all">सभी संयुक्त</p>
<p class="multi-line">अंडरलाइन + ओवरलाइन + स्ट्राइकथ्रू</p>

सिमेंटिक उपयोग: <u> के लिए उचित मामले

• गलत वर्तनी संकेत - <u>recieve</u> → receive
• चीनी प्रॉपर नेम मार्क - पारंपरिक उपयोग
• अनआर्टिकुलेटेड एनोटेशन - जहां बोल्ड/इटैलिक उपयुक्त नहीं

गलत उपयोग (बचें)

• सिर्फ विज़ुअल स्टाइलिंग के लिए <u> उपयोग करना
• लिंक्स के लिए (उनके पास डिफ़ॉल्ट अंडरलाइन होती है)
• हेडिंग्स के लिए (CSS उपयोग करें)

लिंक्स के लिए अंडरलाइन नियंत्रण

<style>
    a { text-decoration: none; color: #3498db; }
    a:hover { text-decoration: underline; text-underline-offset: 2px; }
    a:focus { text-decoration: underline; outline: 2px solid #3498db; outline-offset: 2px; }
    
    /* नेविगेशन लिंक्स - कोई अंडरलाइन नहीं */
    .nav-link { text-decoration: none; }
    .nav-link:hover { text-decoration: none; color: #2980b9; }
</style>

सर्वोत्तम अभ्यास

1. सिमेंटिक अर्थ के लिए <u> उपयोग करें (गलत वर्तनी, प्रॉपर नेम)
2. विज़ुअल स्टाइलिंग के लिए CSS text-decoration उपयोग करें
3. आधुनिक text-decoration प्रॉपर्टीज उपयोग करें - color, style, thickness, offset
4. लिंक्स पर डिफ़ॉल्ट अंडरलाइन का सम्मान करें - एक्सेसिबिलिटी के लिए
5. कंट्रास्ट सुनिश्चित करें - अंडरलाइन रंग पठनीय हो