The hgroup tag

<hgroup> เป็น element ชั้นที่ 2 ใช้สำหรับรวบรวม heading elements (<h1> ถึง <h6>) เช่น ชื่อเรื่องและหัวข้อย่อย <hgroup> นี้จะอยู่ใน heading element เท่านั้น ถ้าเราดู <hgroup> จากตัวอย่างเราจะเข้าใจได้ง่ายขึ้น

An article with title (บทความที่มีชื่อเรื่อง)

ถ้ามีชื่อเรื่องแค่ 1 เรื่อง ก็ไม่จำเป็นต้องใช้ <hgroup> element

<article>
	<header>
		<h1>All about flour</h1>
	</header>
</article>

An article with title and metadata (บทความที่มีชื่อเรื่องและความเป็นมาของข้อมูล)

ตัวอย่างนี้ก็ยังมีแค่ 1 ชื่อเรื่อง แต่ก็มี metadata (ข้อมูลรายละเอียดที่อธิบายถึงความเป็นมาของข้อมูล อาทิเช่น ชื่อผู้แต่ง, ชื่อเจ้าของผลงาน, ผู้รับผิดชอบ, ปีที่เขียน, และชื่อเรื่อง) มาเพิ่ม ส่วน <hgroup> element ก็ ยังคงไม่จำเป็นต้องใช้

<article>
	<header>
		<h1>All about flour</h1>
		<p>Published on January 12th</p>
	</header>
</article>

An article with title and subtitle (บทความที่มีชื่อเรื่องและหัวข้อย่อย)

ตอนนี้เราต้องใช้ <hgroup> element แล้วเพราะเรามีหลายหัวข้อ

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
	</header>
</article>

An article with title, subtitle, and metadata (บทความที่มีชื่อเรื่อง, หัวข้อย่อย, และความเป็นมาของข้อมูล)

เมื่อเรามีหลายหัวข้อและมี metadata ด้วย <hgroup> element จะประกอบไปด้วยชื่อเรื่อง ซึ่งเราจะใช้ element <h1> ถึง <h6>

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
		<p>Published on January 12th</p>
	</header>
</article>

สรุป

• <hgroup> element จะอยู่ด้านใน <header> element เสมอ
• <hgroup> element จะประกอบไปด้วย heading เช่น subtitle หรือ tag-line ซึ่งเราจะใช้ element <h1> ถึง <h6>
• ข้อมูลอื่นๆที่เกี่ยวกับ <header> ควรจะอยู่นอกส่วนของ <hgroup> element