← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 10 of 10

HTML Heading Groups

किसी page के title के बाद अक्सर एक subtitle, tagline, या byline आती है जो उसके साथ एक visual और semantic unit के रूप में जुड़ी होती है — सोचिए किसी blog post के title और उसकी publish date, या किसी product name और उसकी short tagline के बारे में। hgroup एक heading को उसके supporting text के साथ एक single group के रूप में wrap करता है, जबकि menu और search इस chapter में toolbars और search sections के लिए नए semantic grouping elements को पूरा करते हैं।

In this page:

  1. hgroup से Heading को Group करना
  2. Toolbars और Commands के लिए menu का इस्तेमाल
  3. search से Search Section को Mark करना
  4. hgroup को Page Structure के साथ Combine करना
  5. Grouping Elements की Accessibility
Syntax
markup 
<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।

Note: hgroup के अंदर के content को heading और उसके तुरंत बाद आने वाले subtitle या tagline तक ही सीमित रखें -- कोई भी सामान्य body text group के बाहर रखें।
Warning: hgroup अपने अंदर दूसरी full heading level को दूसरे "heading" के रूप में accept नहीं करता -- सिर्फ एक heading, supporting paragraph text के साथ जोड़ी जाती है।

उदाहरण: Grouping a Heading with hgroup

markup 
<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 के लिए मायने रखता है।

Note: सामान्य content lists के लिए ul इस्तेमाल करें, और उन lists के लिए menu बचाकर रखें जो असल में user के trigger कर सकने वाले actions या commands represent करती हैं।
Warning: बिना extra ARIA roles या CSS के, menu visually एक plain bulleted ul जैसा ही render होता है -- फर्क सिर्फ semantic है, visual नहीं।

उदाहरण: Using menu for Toolbars and Commands

markup 
<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 करता है।

Note: अपनी site के search form को search में wrap करें, ताकि assistive technology users इसे एक पहचाने हुए landmark के रूप में सीधे navigate कर सकें।
Warning: search एक landmark wrapper है, form का replacement नहीं -- search query को वाकई collect और submit करने के लिए इसके अंदर अब भी एक real form (या input) चाहिए।

उदाहरण: Marking a Search Section with search

markup 
<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 करता है।

Note: जब किसी page या section के top area में title/subtitle pair के साथ-साथ nav या logo जैसे अन्य elements भी हों, तो hgroup को header के अंदर nest करें।
Warning: hgroup को header के substitute के रूप में उपयोग न करें -- header में navigation, logos, और दूसरा content हो सकता है, जबकि hgroup सिर्फ heading text तक scoped है।

उदाहरण: Combining hgroup with Page Structure

markup 
<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 दिखावट को बदले।

Note: इन elements का इस्तेमाल करने वाले pages को कभी-कभी screen reader से test करें, क्योंकि इनका मुख्य फायदा देखने वाले users के लिए invisible होता है लेकिन assistive technology के लिए काफी महत्वपूर्ण होता है।
Warning: इन तीनों में से कोई भी element अपने आप कोई visual styling नहीं जोड़ता -- इन्हें जोड़ने के बाद (बिना CSS जोड़े) किसी visual change की उम्मीद करना एक आम confusion है।

उदाहरण: Accessibility of Grouping Elements

markup 
<hgroup>
  <h1>Dashboard</h1>
  <p>Your weekly summary</p>
</hgroup>
<menu>
  <li><button>Refresh</button></li>
</menu>
Live Example
Related Topics

HTML Ruby Annotations · HTML बनाम XHTML · HTML URL Encode · HTML Charsets

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Ruby Annotations Next Lesson → HTML Forms

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.