HTML में हेडिंग अलाइनमेंट कैसे सेट करें?

परिचय

HTML में हेडिंग्स के 6 टैग्स होते हैं, <h1> से <h6> तक। HTML में हेडिंग अलाइनमेंट सेट करने के लिए, style एट्रिब्यूट का उपयोग करें। style एट्रिब्यूट एक एलिमेंट के लिए इंलाइन स्टाइल निर्दिष्ट करता है। यह एट्रिब्यूट HTML <h1> से <h6> टैग के साथ उपयोग किया जाता है, CSS प्रॉपर्टी text-align के साथ। HTML5 हेडिंग टैग के align एट्रिब्यूट का समर्थन नहीं करता, इसलिए अलाइनमेंट सेट करने के लिए CSS स्टाइल का उपयोग किया जाता है।

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

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

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Document</title> 
    </head> 
    <body> 
        <h1 style="text-align:center">Tutorial</h1> 
        <p>मुफ्त में सीखें</p> 
    </body> 
</html>

आउटपुट

HTML में हेडिंग अलाइनमेंट कैसे सेट करें?

सभी अलाइनमेंट विकल्प

मान	विवरण	उदाहरण
`left`	बाएं अलाइन (डिफ़ॉल्ट LTR भाषाओं के लिए)	`text-align: left`
`right`	दाएं अलाइन	`text-align: right`
`center`	केंद्र में अलाइन	`text-align: center`
`justify`	दोनों तरफ जस्टिफाई	`text-align: justify`
`start`	लॉजिकल स्टार्ट (RTL में दाएं, LTR में बाएं)	`text-align: start`
`end`	लॉजिकल एंड (RTL में बाएं, LTR में दाएं)	`text-align: end`
`match-parent`	पैरेंट से विरासत में मिला	`text-align: match-parent`

CSS क्लास के साथ बेहतर दृष्टिकोण

<style>
    .heading-center { text-align: center; }
    .heading-right { text-align: right; }
    .heading-left { text-align: left; }
    
    /* RTL सपोर्ट के लिए */
    .heading-start { text-align: start; }
    .heading-end { text-align: end; }
</style>

<h1 class="heading-center">केंद्रित हेडिंग</h1>
<h2 class="heading-right">दाएं अलाइन्ड</h2>
<h3 class="heading-start">लॉजिकल स्टार्ट</h3>

सभी हेडिंग्स को एक साथ सेंटर करना

<style>
    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
</style>

वर्टिकल अलाइनमेंट (फ्लेक्सबॉक्स/ग्रिड के साथ)

<div style="display: flex; flex-direction: column; align-items: center; height: 300px;">
    <h1>वर्टिकली और हॉरिजॉन्टली सेंटर</h1>
</div>

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

इंलाइन स्टाइल्स के बजाय CSS क्लासेज उपयोग करें - रखरखाव में आसान
लॉजिकल प्रॉपर्टीज (start/end) उपयोग करें - RTL भाषा सपोर्ट के लिए
सिमेंटिक हेडिंग स्ट्रक्चर बनाए रखें - केवल स्टाइलिंग के लिए हेडिंग लेवल न बदलें
कंट्रास्ट सुनिश्चित करें - WCAG दिशानिर्देशों के अनुसार

पुराना अप्रचलित तरीका (उपयोग न करें)

<!-- HTML5 में अमान्य -->
<h1 align="center">पुराना तरीका</h1>
<h2 align="right">डिप्रिकेटेड</h2>