HTML पेज में हॉरिजॉन्टल रूल क्या है?

परिचय

<hr> टैग HTML में एक हॉरिजॉन्टल रूल (क्षैतिज रेखा) को दर्शाता है। यह HTML पेज में कंटेंट को अलग करता है। बस ध्यान रखें कि <hr> टैग का कोई एंड टैग नहीं होता। इसे HTML पेज में <body> ... </body> टैग में जोड़ा जाता है।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Horizontal Rule</title> 
    </head> 
    <body> 
        <p>दस्तावेज़ का कंटेंट यहाँ जोड़ा जाता है।</p> 
        <hr> 
        <p>अन्य सेक्शन यहाँ जोड़ें।</p> 
    </body> 
</html>

आउटपुट

<hr> टैग की विशेषताएं

• वॉयड एलिमेंट - कोई क्लोजिंग टैग नहीं (<hr> नहीं <hr></hr>)
• ब्लॉक-लेवल - नई लाइन पर शुरू होता है, पूरी चौड़ाई लेता है
• सिमेंटिक अर्थ - थीमेटिक ब्रेक (पैराग्राफ-स्तरीय विषयांतर)
• डिफ़ॉल्ट स्टाइल - 1px बॉर्डर, ग्रे रंग, इनसेट शैडो

CSS से स्टाइलिंग

बेसिक स्टाइलिंग

<style>
    hr {
        border: none;
        height: 2px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        margin: 2rem 0;
        border-radius: 1px;
    }
</style>

विभिन्न शैलियाँ

<style>
    /* बेसिक लाइन */
    hr.basic { border: 0; border-top: 1px solid #dee2e6; }
    
    /* डॉटेड */
    hr.dotted { border: 0; border-top: 2px dotted #6c757d; }
    
    /* डैश्ड */
    hr.dashed { border: 0; border-top: 2px dashed #6c757d; }
    
    /* ग्रेडिएंट */
    hr.gradient { 
        border: 0; 
        height: 3px; 
        background: linear-gradient(90deg, transparent, #667eea, transparent); 
    }
    
    /* डबल लाइन */
    hr.double { 
        border: 0; 
        height: 3px; 
        background: linear-gradient(transparent 50%, #333 50%), 
                    linear-gradient(#333 50%, transparent 50%);
        background-size: 100% 4px;
    }
    
    /* आइकन के साथ */
    hr.with-icon {
        border: 0;
        height: 1px;
        background: #dee2e6;
        position: relative;
    }
    hr.with-icon::after {
        content: '★';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 0 10px;
        color: #667eea;
    }
</style>

उपयोग

<p>पहला पैराग्राफ</p>
<hr class="basic">
<p>दूसरा पैराग्राफ</p>
<hr class="gradient">
<p>तीसरा पैराग्राफ</p>
<hr class="with-icon">
<p>चौथा पैराग्राफ</p>

सिमेंटिक उपयोग

<article>
    <h1>लेख शीर्षक</h1>
    <p>परिचय पैराग्राफ...</p>
    
    <hr> <!-- थीमेटिक ब्रेक -->
    
    <section>
        <h2>सेक्शन 1</h2>
        <p>कंटेंट...</p>
    </section>
    
    <hr> <!-- दूसरा ब्रेक -->
    
    <section>
        <h2>सेक्शन 2</h2>
        <p>कंटेंट...</p>
    </section>
</article>

एक्सेसिबिलिटी

• स्क्रीन रीडर्स <hr> को "हॉरिजॉन्टल रूल" या "सेपरेटर" घोषित करते हैं
• सिमेंटिक अर्थ: "विषय में परिवर्तन" या "थीमेटिक ब्रेक"
• सजावटी उपयोग के लिए role="presentation" या aria-hidden="true" जोड़ें

<!-- सिमेंटिक ब्रेक (डिफ़ॉल्ट) -->
<hr>

<!-- विशुद्ध रूप से सजावटी -->
<hr aria-hidden="true">
<hr role="presentation">

पुराने एट्रिब्यूट्स (डिप्रिकेटेड - उपयोग न करें)

<!-- HTML5 में समर्थित नहीं -->
<hr align="center" width="50%" size="3" color="red" noshade>

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

1. सिमेंटिक उपयोग के लिए <hr> उपयोग करें - केवल विज़ुअल सेपरेटर के लिए नहीं
2. CSS से स्टाइल करें - डिप्रिकेटेड एट्रिब्यूट्स नहीं
3. मार्जिन से स्पेसिंग नियंत्रित करें - खाली पैराग्राफ नहीं
4. ओवरयूज़ न करें - बहुत सारे HR पेज को अव्यवस्थित करते हैं
5. सजावटी HR के लिए aria-hidden - अगर केवल विज़ुअल है

विकल्प