HTML <hr> टैग

HTML <hr> टैग क्या है?

HTML में <hr> टैग एक क्षैतिज रेखा (horizontal line) जोड़ता है जो HTML दस्तावेज़ में सामग्री को अलग करती है। HTML5 में, <hr> टैग एक थीमैटिक ब्रेक (thematic break) को परिभाषित करता है - यानी, विषय में परिवर्तन का संकेत।

यह एक वॉयड एलिमेंट (void element) है, जिसका अर्थ है इसका कोई अंत टैग (closing tag) नहीं होता।

उदाहरण

नीचे कपड़ों और इलेक्ट्रॉनिक्स अनुभागों को अलग करने के लिए <hr> का उपयोग किया गया है:

<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
</head>
<body>
  <h1>Products</h1>
  <p>Here are the products -</p>
  <h2>Clothing</h2>
  <p>Clothing includes T-Shirts, Shirts, Jeans, Trousers and Hoodie.</p>
  <hr>
  <h2>Electronics</h2>
  <p>Electronics includes Mobile, Mobile Accessories, Laptops, Desktop systems, etc.</p>
</body>
</html>

आउटपुट

एक क्षैतिज रेखा दोनों अनुभागों को अलग करती है:

HTML <hr> टैग

कोड विश्लेषण

पहले हमने एक अनुभाग सेट किया:

<h2>Clothing</h2>
<p>Clothing includes T-Shirts, Shirts, Jeans, Trousers and Hoodie.</p>

उसके बाद, हमने उपरोक्त सामग्री को नीचे वाली से अलग करने के लिए <hr> टैग का उपयोग किया:

<hr>
<h2>Electronics</h2>
<p>Electronics includes Mobile, Mobile Accessories, Laptops, Desktop systems, etc.</p>

स्टाइलिंग

CSS के साथ <hr> की उपस्थिति अनुकूलित की जा सकती है:

hr {
  border: none;
  border-top: 2px solid #333;
  margin: 20px 0;
}

सिमेंटिक अर्थ

HTML5 से पहले <hr> केवल एक दृश्य रेखा थी। अब यह एक सिमेंटिक थीमैटिक ब्रेक दर्शाता है, जो स्क्रीन रीडर और सर्च इंजन के लिए उपयोगी है।