รู้จักกับ header และ hgroup

สวัสดีครับ หลบเรื่องยุ่งๆ มาแอบเขียนบทความใหม่นิดนึง บทความนี้ได้แรงบันดาลใจมาจากบันทึกของน้องมุก (@fatidea) และ ความสงสัยของเจ้าตัวที่มาถามผมน่ะนะครับ ว่าเราจะใช้เจ้า element <header> และ <hgroup> ในกรณีใดบ้าง

ขออนุญาตเท้าความกันก่อนนิดนึงก่อนว่า HTML5 นั้นมี element ใหม่หลายตัวที่เข้ามาทำหน้าที่ครอบเนื้อหาเพื่อบ่งบอกความหมายของตัวเนื้อหานั้นๆ ให้ชัดเจนมากขึ้นครับ ย้อนกลับที่ผมได้เกริ่นนำไว้ข้างต้นครับวันนี้ผมขออนุญาตพูดถึง element ที่เกี่ยวข้องกับ ต้นขั้วเอกสาร (header) และ ตัวครอบกลุ่มหัวข้อเรื่องหลัก และ ย่อย (hgroup) ครับ

<header> element

เป็น element ที่ใช้ครอบเนื้อหาที่เป็นต้นขั้วของเอกสาร ให้เพื่อนๆ ลองนึกถึงหนังสือ “บันทึกข้อความ” ของทางราชการครับ (ดูภาพประกอบข้างล่าง) บริเวณที่ผมเน้นสีเขียวไว้นั้นเป็นต้นขั้วของเอกสารบันทึกข้อความนี้ครับ ซึ่งจะมีหัวข้อ และ คำอธิบายต่างๆ ว่ามาจากหน่วยงานใด เขียนวันที่เท่าไหร่ ร่างที่ไหน เรื่องอะไร

ตัวอย่างที่ 1

เพราะฉะนั้นเมื่อเราเขียนเป็น code html5 ออกมาจะได้เป็นอย่างนี้ครับ (ผมเขียนเฉพาะบริเวณที่เน้นสีเขียวนะครับ)

ที่เหลือเราก็ทำการตบแต่งการแสดงผลด้วย CSS ครับ (อันนี้ขออนุญาตไม่ยกตัวอย่างนะครับ) จากตัวอย่างจะเห็นว่ามีหัวข้อกำกับ ในที่นี้คือ <h1> ซึ่งในการใช้งานจริงนั้น <header> สามารถใช้งานได้กับ element อื่นๆ ด้วยเช่นกันครับ ทีนี้ลองมาตีความคำนิยามของ element <header> จาก WHATWG กันดูครับ:

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

จากคำนิยามนั้นบอกว่า

header element ใช้เพื่อครอบเนื้อหาที่เป็นส่วนต้นขั้วของเอกสาร ซึ่งอาจจะมีหัวข้อ หรือ กลุ่มหัวข้อ (ตั้งแต่ h1 – h6 และ hgroup) แต่ไม่จำเป็นต้องมีเสมอไป header element นั้นสามารถใช้ครอบส่วนที่เป็น สารบัญ ฟอร์มค้นหา และ โลโก้ (เครื่องหมายการค้า หรือ สัญลักษณ์) ที่ข้องเกี่ยว

เพราะฉะนั้นเมื่อเอามาใช้กับหน้าเว็บไซต์ก็อาจจะเอามาใช้กับส่วนหัวของหน้าเว็บไซต์ครับ ดังภาพตัวอย่าง

ตัวอย่างที่ 1

ใช่ครับมันคือ ส่วนต้นขั้วของเว็บไซต์ ThaiCSS นั่นเอง เพราะฉะนั้นเวลาเขียน HTML5 จะเขียนอย่างไร กด view source ครับ (ขยับนิ้วกันหน่อยนะ) ซึ่งเจ้า <header> นั้นสามารถเป็นต้นขั้วของบทความใดใด ได้ด้วยนะครับ ดังตัวอย่างนี้ครับ (ยกมาจาก code ในหน้าแรก ThaiCSS ครับ)

ส่วนตัวอย่างในรูปแบบอื่นๆ สามารถนำมาแลกเปลี่ยนกันได้ครับ ว่ากรณีไหนใช้อย่างไร เป็นไปได้หรือไม่ ต่อไปผมจะอธิบายสั้นๆ เกี่ยวกับ hgroup ครับผม

<hgroup> element

เป็น element ที่ใช้จัดกลุ่มหัวข้อเรื่องเข้าด้วยกันครับ จะใช้ก็ต่อเมื่อเรามีหัวข้อเนื้อหา และ เล็กที่สัมพันธ์กันครับ ให้ลองนึกภาพของเอกสารอธิบายชุดใหญ่ๆ และ ต้องเขียนอธิบายหัวข้อย่อยนั้นๆ ยาวๆ ตรงนี้ <hgroup> จะเข้ามาบทบาทครับ ดังตัวอย่าง

สมมติว่าเนื้อหา อธิบายมันยาวมากนะครับ สัก 20 screen shot คุณต้อง scroll หน้าจอลงไปลึกมากมากกว่าจะอธิบายหัวข้อวิธีการดูแลรักษาเสร็จ เพราะฉะนั้นเจ้าของเว็บไซต์เลยจำเป็นต้องเน้นหัวข้อหลักขึ้นมาใหม่พร้อมหัวข้อย่อยใหม่ (วิธีการเก็บเกี่ยว) เพื่อกันผู้อ่านสับสน เราจึงต้องนำ <hgroup> เข้ามาช่วยดังตัวอย่าง code ที่ผมได้ทำให้ดูด้านบนครับ

หวังว่าจะเป็นประโยชน์สำหรับการปลูกมะละกอเพื่อการค้าขายนะครับ พบกันใหม่ครั้งหน้า ครั้งนี้สวัสดีครับ

Back to Top

3 Responses to รู้จักกับ header และ hgroup

  1. kajarp

    ติดตามอ่าน ได้ความรู้ดีครับ

    คำว่า "ต้นขั้ว" น่าจะใช้ ข.ไข่ ไม้หันอากาศ ไม้โท ว.แหวน
    นะครับ

    Reply

  2. fat-idea

    จะเรียบเรียงให้มันรู้เรื่องได้เท่านี้ยังไงเนียะ อ่านแล้วเครี๊ยด !

    Reply

  3. radiz

    โอ้ขอบพระคุณ คุณ kajarp มากครับผมแก้ให้แล้วครับผม

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top