HTML5 การใช้งาน hgroup Tag

ใน HTML5 แท็ก <hgroup> ถูกใช้เพื่อจัดกลุ่มหัวเรื่อง (headings) ที่เกี่ยวข้องกันเป็นกลุ่มเดียว เช่น การจัดกลุ่ม <h1>, <h2> หรือ <h3> เพื่อให้เบราว์เซอร์และเครื่องมือการเข้าถึง (เช่น screen readers) เข้าใจว่าหัวข้อเหล่านั้นเป็นส่วนหนึ่งของกลุ่มเดียวกัน

จุดประสงค์การใช้งานแท็ก <hgroup>

แท็ก <hgroup> ใช้เพื่อแก้ปัญหาที่เกิดขึ้นเมื่อมีการใช้หัวเรื่องหลายระดับที่เป็นหัวข้อหลักและหัวข้อรองในหน้าเดียวกัน โดยไม่ต้องการให้แต่ละระดับของหัวเรื่องถูกนับแยกกัน ตัวอย่างเช่น หากต้องการให้ <h1> และ <h2> เป็นหัวข้อหลักและหัวข้อย่อยในส่วนเดียวกัน เราสามารถใช้ <hgroup> เพื่อจัดกลุ่มหัวเรื่องเหล่านั้น

ตัวอย่างการใช้งาน <hgroup>

<hgroup>
  <h1>การเขียนโปรแกรม</h1>
  <h2>พื้นฐานการเขียนโปรแกรมเบื้องต้น</h2>
</hgroup>

ในตัวอย่างข้างต้น <h1> และ <h2> ถูกจัดกลุ่มเป็นส่วนเดียวกัน ซึ่งบ่งบอกว่า <h2> เป็นคำอธิบายขยายความหรือรายละเอียดเพิ่มเติมของ <h1>

การประยุกต์ใช้งานในรูปแบบต่าง ๆ

จัดกลุ่มหัวข้อหลักและรอง: หากหน้าเว็บมีหัวข้อหลักและรองที่ต้องการเชื่อมโยงกันในกลุ่มเดียว เช่น หน้าบทความที่มีชื่อเรื่องและหัวข้อย่อย

<hgroup>
  <h1>ประวัติศาสตร์โลก</h1>
  <h2>ยุคกลางและผลกระทบต่อสังคม</h2>
</hgroup>

การจัดกลุ่มหัวข้อในหน้าผลิตภัณฑ์: ใช้ในหน้าสินค้าหรือหน้าผลิตภัณฑ์ที่มีการนำเสนอชื่อสินค้าและคำอธิบายสั้น ๆ

<hgroup>
  <h1>โทรศัพท์มือถือ XYZ</h1>
  <h2>สมาร์ทโฟนสุดล้ำ</h2>
</hgroup>

ข้อควรระวัง

อย่างไรก็ตาม <hgroup> ไม่ได้รับการสนับสนุนในบางเบราว์เซอร์ในปัจจุบัน และการใช้งานก็ลดลงเรื่อย ๆ เนื่องจากไม่ได้เป็นมาตรฐานที่ได้รับการสนับสนุนอย่างเต็มที่ใน HTML5 ใหม่ล่าสุด ในทางปฏิบัติอาจใช้เพียงแค่หัวเรื่อง <h1>, <h2> โดยไม่ต้องใช้ <hgroup> เพื่อให้รองรับกับเบราว์เซอร์และเครื่องมือการเข้าถึงทุกประเภท

ทางเลือกในการใช้งาน

แทนการใช้ <hgroup>, เราอาจเลือกจัดระเบียบโครงสร้างของหัวเรื่องใน HTML ตามลำดับที่ต้องการโดยไม่ต้องใช้ <hgroup> เช่น

<h1>ประวัติศาสตร์โลก</h1>
<h2>ยุคกลางและผลกระทบต่อสังคม</h2>

ทั้งนี้วิธีนี้สามารถใช้งานได้อย่างแพร่หลายและได้รับการสนับสนุนจากทุกเบราว์เซอร์โดยไม่มีปัญหาด้านการเข้าถึงข้อมูล