HTML Headings
In this page:
<h1>Heading text</h1>
<h2>Heading text</h2>
<h3>Heading text</h3>Heading Hierarchy (h1 से h6)
HTML में headings के छह levels होते हैं, जो सबसे बड़े और सबसे महत्वपूर्ण h1 से शुरू होकर सबसे छोटे h6 तक जाते हैं। यह hierarchy आपके content के लिए महत्व का एक स्पष्ट क्रम स्थापित करती है, जो किसी किताब के chapters और sub-chapters जैसा होता है।
उदाहरण: The Heading Hierarchy (h1 to h6)
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>SEO के लिए Headings क्यों मायने रखते हैं
Search engines आपकी website को पढ़ने, categorize करने, और index करने के लिए headings का उपयोग करते हैं। अगर आप अपनी headings को relevant keywords के साथ ठीक से structure करते हैं, तो search bots आसानी से यह पता लगा सकते हैं कि आप कौन-सी services या products offer करते हैं।
उदाहरण: Why Headings Matter for SEO
<h1>Affordable Web Hosting Plans</h1>
<h2>Shared Hosting Pricing</h2>Accessibility और Screen Readers
दृष्टिबाधित users अक्सर websites navigate करने के लिए screen readers जैसी assistive technologies पर निर्भर करते हैं। ये devices users को content को skim करने के लिए heading से heading पर jump करने देते हैं, जिससे सही heading structures ज़रूरी बन जाती हैं।
उदाहरण: Accessibility and Screen Readers
<h1>Article Title</h1>
<h2>Introduction</h2>
<h2>Conclusion</h2>Headings Structural हैं, Visual नहीं
एक आम गलती है सिर्फ इस आधार पर heading tag चुनना कि वह ब्राउज़र में कितना बड़ा दिखता है। Headings को structural relationships दर्शाना चाहिए। अगर आपको बड़ा या छोटा text चाहिए, तो उसे हमेशा CSS का उपयोग करके control करें।
उदाहरण: Headings are Structural, Not Visual
<h2>Correct: Structural Heading</h2>
<p style="font-size: 24px;">Large text without using a heading tag</p>Default Spacing और Margins प्रबंधित करना
ब्राउज़र headings को आसपास के paragraphs से अलग करने के लिए headings के ऊपर और नीचे स्वचालित रूप से पहले से set margins जोड़ते हैं। इन default styles को समझने से elements को arrange करते समय layout संबंधी आश्चर्यों से बचा जा सकता है।
उदाहरण: Managing Default Spacing and Margins
<h2 style="margin: 0;">Heading with margins removed</h2>
<p>Paragraph sitting closer to the heading above.</p>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: