🔷 1. Introduction:
The <hr> tag in HTML is used to insert a horizontal line across the web page.
It is used to separate sections of content or indicate a thematic break.
It improves readability and structure of the page.
🔷 2. Definition:
<hr>stands for Horizontal Rule.- It creates a horizontal line (from left to right) on the web page.
- It is an empty tag, which means it doesn’t need a closing tag.
🔷 3. Syntax:
<hr>
Or with attributes:
<hr size="3" color="red" width="70%">🔷 4. Example (Code):
<h1>Welcome</h1>
<p>This is the introduction section.</p>
<hr>
<p>This is the next section after the line.</p>
🔷 5. Output:
A horizontal line will appear between the two paragraphs.
It visually separates the two sections of content.
🔷 6. Real Life Example:
Suppose a student is writing an article with different sections: Introduction, Details, and Conclusion.
They can use <hr> between sections to make the structure neat and easy to read.
🔷 7. Practical Notes:
<hr>is used for layout and design- In modern HTML5, it also indicates a thematic break or topic shift
- It can be customized using attributes or CSS
🔷 8. HTML Attributes of <hr> (Old Method):
| Attribute | Purpose |
|---|---|
size | Thickness of the line (in pixels) |
width | Width of the line (in pixels or %) |
color | Color of the line (not supported in HTML5) |
align | Align the line (left, center, right) — deprecated |
🔷 9. CSS Styling for Modern HTML:
<hr style="height: 3px; background-color: red; width: 70%;">🔷 10. Advantages:
- Visually separates content
- Easy to use
- Helps organize long content
- Works in all browsers
- Can be styled using CSS
🔷 11. Limitations:
- Limited styling using only HTML
- Some attributes like
color,alignare deprecated - CSS gives better control over appearance
HTML का
<hr>टैग (हॉरिज़ॉन्टल रूलर)
🔷 1. परिचय (Introduction):
HTML में <hr> टैग का उपयोग एक सीधी क्षैतिज रेखा (horizontal line) खींचने के लिए किया जाता है।
यह पेज पर कंटेंट के दो हिस्सों को अलग दिखाने में मदद करता है।
यह वेबपेज को सुंदर और साफ-सुथरा बनाता है।
🔷 2. परिभाषा (Definition):
<hr>का मतलब होता है Horizontal Rule- यह एक empty tag है, यानी इसका कोई closing tag नहीं होता
- यह पेज पर एक सीधी रेखा बनाता है, जो बाएं से दाएं जाती है
🔷 3. सिंटैक्स (Syntax):
<hr>या attributes के साथ:
<hr size="3" color="red" width="70%">🔷 4. उदाहरण (Example):
<h1>स्वागत है</h1>
<p>यह परिचय सेक्शन है।</p>
<hr>
<p>यह लाइन के बाद का सेक्शन है।</p>🔷 5. आउटपुट (Output):
ऊपर दिए गए कोड से दो सेक्शन के बीच में एक सीधी रेखा दिखाई देगी
जो दोनों कंटेंट को अलग-अलग दिखाएगी।
🔷 6. वास्तविक जीवन उदाहरण (Real Life Example):
मान लीजिए कोई छात्र एक आर्टिकल बना रहा है जिसमें परिचय, मुख्य भाग, और निष्कर्ष है।
वह हर भाग के बीच <hr> का प्रयोग कर सकता है, जिससे कंटेंट अच्छी तरह से विभाजित और पढ़ने में आसान हो।
🔷 7. व्यावहारिक जानकारी (Practical Notes):
<hr>टैग को डिज़ाइन और लेआउट के लिए प्रयोग किया जाता है- HTML5 में यह एक थीमैटिक ब्रेक (thematic break) भी दर्शाता है
- इसे CSS की मदद से स्टाइल किया जा सकता है
🔷 8. HTML Attributes (पुराने तरीके):
| Attribute | कार्य |
|---|---|
size | लाइन की मोटाई तय करता है (pixels में) |
width | लाइन की चौड़ाई तय करता है (pixels या %) |
color | लाइन का रंग तय करता है (HTML5 में सपोर्ट नहीं करता) |
align | लाइन का स्थान तय करता है (left, center, right) – अब deprecated है |
🔷 9. CSS से आधुनिक स्टाइलिंग:
<hr style="height: 3px; background-color: red; width: 70%;">🔷 10. लाभ (Advantages):
- कंटेंट को नेत्रों के अनुसार विभाजित करता है
- उपयोग में बहुत आसान
- वेबपेज को व्यवस्थित और सुंदर बनाता है
- सभी ब्राउज़र में काम करता है
- CSS से स्टाइलिंग की सुविधा भी देता है
🔷 11. सीमाएँ (Limitations):
- HTML में सीमित स्टाइलिंग संभव
- कई attributes अब HTML5 में सपोर्ट नहीं करते
- प्रोफेशनल डिज़ाइन के लिए CSS बेहतर विकल्प है
