HTML शीर्षक समूह
In this page:
<hgroup>
<h1>Heading</h1>
<p>Subheading</p>
</hgroup>hgroup से Heading को Group करना
hgroup किसी heading element को उसे directly support करने वाले एक या ज्यादा paragraphs of text, जैसे subtitle या छोटा description, के साथ wrap करता है, और यह संकेत देता है कि text का यह group एक अलग heading इकाई की तरह माना जाना चाहिए, न कि किसी unrelated body content के साथ आने वाली heading।
उदाहरण: Grouping a Heading with hgroup
<hgroup>
<h1>Chapter One</h1>
<p>The Beginning</p>
</hgroup>Toolbars और Commands के लिए menu का इस्तेमाल
menu structurally ul जैसा ही है -- दोनों में li items की list होती है -- लेकिन menu खासतौर पर यह संकेत देता है कि list सामान्य page content के बजाय commands, actions, या toolbar items का एक set represent करती है, जो सबसे ज्यादा page की structure समझने वाली assistive technology के लिए मायने रखता है।
उदाहरण: Using menu for Toolbars and Commands
<menu>
<li><button>Cut</button></li>
<li><button>Copy</button></li>
</menu>search से Search Section को Mark करना
search element किसी search form या search से जुड़े controls के group को wrap करता है, जिससे page को एक dedicated landmark मिलता है जहाँ screen reader users सीधे jump कर सकते हैं, ठीक उसी तरह जैसे nav navigation को और main primary content को mark करता है।
उदाहरण: Marking a Search Section with search
<search>
<form action="/search">
<input type="search" name="q">
</form>
</search>hgroup को Page Structure के साथ Combine करना
hgroup अक्सर header या article जैसे बड़े semantic containers के अंदर दिखता है, उनकी जगह लेने के बजाय उनके साथ मिलकर काम करता है -- header किसी page या component के पूरे top section को रखता है, जबकि hgroup उसके अंदर सिर्फ heading-plus-subtitle text को group करता है।
उदाहरण: Combining hgroup with Page Structure
<header>
<hgroup>
<h1>My Blog</h1>
<p>Thoughts on web development</p>
</hgroup>
<nav>Menu</nav>
</header>Grouping Elements की Accessibility
hgroup, menu, और search मुख्य रूप से यह बेहतर बनाने के लिए मौजूद हैं कि assistive technology किसी page को कैसे interpret करे -- hgroup एक title और subtitle को एक इकाई के रूप में साथ announce रखता है, menu स्पष्ट करता है कि एक list commands का set है, और search एक jump-to landmark देता है, यह सब बिना page के default दिखावट को बदले।
उदाहरण: Accessibility of Grouping Elements
<hgroup>
<h1>Dashboard</h1>
<p>Your weekly summary</p>
</hgroup>
<menu>
<li><button>Refresh</button></li>
</menu>- सिर्फ visually group करने के लिए unrelated headings को एक hgroup में wrap करना, जबकि hgroup खासतौर पर एक heading और उसके directly supporting subtitle या tagline के लिए है।
- ul के काफी होने पर भी menu इस्तेमाल करना -- menu toolbar/command-style groupings के लिए है, general content lists के लिए नहीं।
- यह भूल जाना कि search element एक landmark role है, कोई form-styling tool नहीं -- काम करने के लिए इसके अंदर फिर भी एक असली form और input चाहिए।
- hgroup किसी heading (h1-h6) को एक या ज़्यादा directly supporting content के paragraphs के साथ wrap करता है, जैसे कोई subtitle या byline।
- menu semantically ul जैसा ही है लेकिन यह signal करता है कि list कमांड्स का set या toolbar represent करती है, general content नहीं।
- search किसी search form या search-related controls को wrap करता है, assistive technology को सीधे jump करने के लिए एक साफ landmark देते हुए।
hgroup और search Chrome, Firefox, Safari, और Edge के सभी current versions में supported हैं; menu को लंबे समय से browser support मिला है हालांकि बिना added styling के यह visually ul जैसा ही render होता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: