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

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

<header> element

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

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

  
    <header><

      h1>บันทึกข้อความ</h1>
        <ul>
          <li><em>ส่วนราชการ</em> </li>
          <li><em>ที่</em> ศธ 0513 (เลขที่หน่วยงาน)/</li>

          <li><em>วันที่</em> </li>
          <li>เรื่อง</li>
        </ul>
      </header>

  

ที่เหลือเราก็ทำการตบแต่งการแสดงผลด้วย 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 นั้นสามารถใช้ครอบส่วนที่เป็น สารบัญ ฟอร์มค้นหา และ โลโก้ (เครื่องหมายการค้า หรือ สัญลักษณ์) ที่ข้องเกี่ยว

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

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

  
    <article>

      <header>
        <h2><a href="/HTML5-กับ-CSS3-เมื่อเอามาทำ-Photo-Gallery/">HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery</a></h2>
        <p><i>พร อันทะ<time> Thu 24 June  2010 16:01:06</time></i></p>

      </header>
      <div>
        <p><img src="https://thaicss.com/files/html5-gallery.jpg" alt="ตัวอย่างบทความ HTML5" /></p>

        <p>เป็นอะไรกันไม่รู้ครับ  พ่อแม่พี่น้อง ช่วงนี้ ทำไม  มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางทีคงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้  
เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย  เรื่อยก็คงพอเพียงแล้ว</p>
        <p>อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS 
เองก็ใช้มานานนม  เพราะมันมีมานานแล้ว  จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่</p>
        <p>เมื่อก่อนตอนใช้  ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ  <q>บ้ากว่ากุอีก</q></p>

        <p>จริง  จริงแล้ว ผมมีความกังวลใจอยู่เรื่องเดียว  เรื่องเดิม ไม่ว่าจะใช้ HTML4, XHTML1 หรือ HTML5 นั่นก็คือปัญหาเรื่องการทำเว็บเพื่อให้เกิดการเข้าถึงอย่างเท่าเทียม  
เพราะว่าคนส่วนใหญ่ไม่ค่อยได้สนใจเรื่องนี้มากมายนักไม่ใช่ว่่าคนบ้านเรา  
พวกฝรั่งปัญญาอ่อนส่วนใหญ่มันก็เป็นกันเยอะ</p>
      </div>
      <footer>
        <h3>Tags:</h3>

        <ul>
          <li><a href="/tags/html5">html5</a></li>
          <li><a href="/tags/css3">css3</a></li>

          <li><a href="/tags/transition">transition</a></li>
        </ul>
        <p><a href="/HTML5-กับ-CSS3-เมื่อเอามาทำ-Photo-Gallery#toc-entry" title="อ่านเนื้อหา: HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery">Permalink</a></p>

      </footer>
    </article>
  

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

<hgroup> element

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

  
    <article>
      <header>
        <hgroup>
          <h1>การปลูกมะละกอ</h1>

          <h2>วิธีการดูแลรักษา</h2>
        </hgroup>
        <p>เนื้อหาในส่วนนี้ จะอธิบายวิธีดูแลรักษาต้นมะละกอ เพื่อให้นักพัฒนาเว็บไซต์ต่างๆ เข้าใจ</p>
      </header>
      <div>

        <p>เนื้อหา ...... หาเนื้อ .... เนื้อหาย .... ไม่เมา ..... มะละกอ ... ส้มตำ ... 
มันยาวมาก ............. ยาว ....... จริงๆ .......</p>
      </div>
    </article>
    <article>
      <header>

        <hgroup>
          <h1>การปลูกมะละกอ</h1>
          <h2>วิธีการเก็บเกี่ยว</h2>
        </hgroup>
        <p>เนื้อหาในส่วนนี้ จะอธิบายวิธีเก็บเกี่ยวมะละกอ เพื่อให้นักพัฒนาเว็บไซต์ต่างๆ เข้าใจ</p>

      </header>
      <div>
        <p>เนื้อหา ...... หาเนื้อ .... เนื้อหาย .... ไม่เมา ..... มะละกอ ... ส้มตำ ... มันยาวมาก ............. มะละกอเขายาวมาก ....... เธอ .... จริงๆ .......</p>
      </div>
    </article>

  

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

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