HTML HR Tag
Home
HTML Course
Learn HTML

 

HTML <hr> Tag (हॉरिजॉन्टल लाइन)


HTML <hr> Tag क्या है?

HTML में <hr> टैग का उपयोग Horizontal Line (क्षैतिज रेखा) बनाने के लिए किया जाता है। यह वेब पेज में कंटेंट को अलग-अलग सेक्शन में बांटने के लिए काम आता है।

<hr> का मतलब है Horizontal Rule यानी क्षैतिज रूल लाइन। यह वेब पेज पर एक सीधी लाइन खींच देता है, जिससे टेक्स्ट या कंटेंट का विभाजन (separation) आसान हो जाता है।


HTML <hr> Tag की विशेषताएँ

  • यह Empty Tag है यानी इसे क्लोज़ करने की ज़रूरत नहीं होती।

  • यह वेब पेज पर एक सीधी क्षैतिज रेखा दिखाता है।

  • कंटेंट को अलग-अलग सेक्शन में विभाजित करने में मदद करता है।

  • यह ब्राउज़र के अनुसार डिफ़ॉल्ट स्टाइल के साथ दिखता है।


HTML <hr> Tag का Syntax

<hr>

या XHTML में:

<hr />


HTML <hr> Example Program

<!DOCTYPE html>
<html>
<head>
    <title>HTML hr Tag Example</title>
</head>
<body>
    <h2>HTML hr Tag का उदाहरण</h2>
    <p>यह पहला पैराग्राफ है।</p>
    
    <hr> <!-- यहाँ एक हॉरिजॉन्टल लाइन दिखाई देगी -->
    
    <p>यह दूसरा पैराग्राफ है।</p>
    
    <hr>
    
    <p>यह तीसरा पैराग्राफ है।</p>
</body>
</html>


आउटपुट:

यह पहला पैराग्राफ है।
-------------------------
यह दूसरा पैराग्राफ है।
-------------------------
यह तीसरा पैराग्राफ है।


HTML <hr> Tag के Attributes

HTML5 में <hr> टैग को CSS से स्टाइल किया जाता है, लेकिन पहले इसमें कुछ attributes भी इस्तेमाल किए जाते थे।

Attributeकार्य
sizeलाइन की मोटाई (height) सेट करता है
widthलाइन की चौड़ाई सेट करता है
alignलाइन का alignment सेट करता है (left, right, center)
colorलाइन का रंग बदलने के लिए


CSS से <hr> को स्टाइल करना

<!DOCTYPE html>
<html>
<head>
    <title>Styled hr Tag</title>
</head>
<body>
    <h2>स्टाइल किया हुआ hr Tag</h2>
    <p>ऊपर का टेक्स्ट</p>
    <hr style="height:3px; background-color:red; border:none; width:70%;">
    <p>नीचे का टेक्स्ट</p>
</body>
</html>

👉 यहाँ लाइन लाल रंग की होगी और 70% चौड़ाई में दिखेगी।

HR Tag


HTML <hr> Tag का उपयोग कहाँ होता है?

  1. कंटेंट या पैराग्राफ को अलग-अलग सेक्शन में दिखाने के लिए।

  2. ब्लॉग पोस्ट में टॉपिक डिवाइड करने के लिए।

  3. वेब पेज में डिजाइन को आकर्षक बनाने के लिए।

  4. Footer और Header को अलग दिखाने के लिए।

Post a Comment

Post a Comment