การเรียงลำดับ Headings และ ทำ Sectioning ใน HTML5

ปัญหาน่าปวดหัวอีกอย่างของการเขียน HTML หรือ XHTML นั่นก็คือ “การจัดการ เลือกใช้ header ของ HTML” เพราะว่าทั้งสองภาษานั้นมี Header มาให้ถึง 6 ตัว (h1-h6) ก่อนหน้านี้ผมก็เคยเขียนออกมาให้ตาเห็นบ้างแล้วว่าการใช้ h1-h6 นั้น ชื่อมันก็บอกว่าหนึ่งถึงหก แต่ลืมเขียนเรื่องง่ายๆ อีกเรื่องนั่นคือการตีความการทำ sectioning ของ heading

หลายคนคงเคยได้ยินว่า header ไม่ควรเอามาสลับกัน เช่น ไม่ควรใช้ h2 แล้วตามด้วย h1 ซึ่งจริงๆ มันก็ถูก แต่มันติดตรงที่บางคนเมื่อทำ sectioning ให้กับเนื้อหาแล้วกลับไม่เคยสงสัยว่ามันสามารถทำได้และ W3C เองก็แนะนำเช่นนั้น อย่างเช่น

<div>	
 <article>    	
  <header>        	
    <h2>ผลไม้ในเมืองไทย</h2>            
    <p>รวมรายละเอียดเกี่ยวกับผลไม้ทางเศรฐกิจของไทย</p>
 </header>
 <h3>มะขาม</h3>
 <p>เป็นไม้ผลที่สำคัญชนิดหนึ่งของประเทศไทย มะขามในประเทศไทยมี 2 ชนิด คือ </p>
 <section>
  <h2>มะขามหวาน</h2>
  <p>มีถิ่นกำเนิดในเอเชียใต้และแอฟริกาตะวันออก พันธุ์มะขามหวานในประเทศไทยได้แก่ พันธุ์สีทอง,
   พันธุ์ศรีชมพู, พันธุ์ขันตี, พันธุ์อินทผลัมและพันธุ์ประกายทอง</p>
  <h2>มะขามเปรี้ยว</h2>
  <p>มีถิ่นกำเนิดแถบร้อนของทวีปแอฟริกา พันธุ์มะขามเปรี้ยวในประเทศไทยได้แก่
     พันธุ์ฝักโตและพันธุ์แนะนำของกรมวิชาการเกษตรคือ พันธุ์ศรีสะเกษ 019</p>
 </section>
 <h3>ลิ้นจี่</h3>
 <p>เป็นไม้ผลกึ่งเมืองร้อนกึ่งเมืองหนาว มีถิ่นกำเนิดที่เมืองกวางดองและฟูเจียนทาง
  ตอนใต้ของประเทศจีนและมีหลายสายพันธุ์ </p>
 </article>
</div>

จากตัวอย่างข้างต้นจะเห็นได้ว่าเราเริ่มด้วย heading level 2 ซึ่งเห็น Header หลัก ส่วนรายชื่อผลไม้หลักนั้นตามด้วย h3 โดยในหัวข้อของมะขามมีแยกย่อยออกอีก 2 ชนิด ก่อนที่ผมจะเริ่ม “มะขามหวาน” ผมทำ Sectioning ด้วยการใช้ <section> จากนั้นจึงนำ h2 กลับเข้ามาใช้เพื่อแสดงถึงการเป็น header ของ “มะขามหวาน” อีกที ตามด้วย “มะขามเปรี้ยว”

คำว่าการทำ Sectioning ไม่ได้หมายความแค่การใช้ section ใน html5 ในการแบ่งกลุ่มข้อมูลอย่างเดียว รวมไปถึงการใช้ elements ของ html5 ที่อยู่ในกลุ่ม Sections เช่น aside, article หรือ element ที่เราคุ้นเคยอย่าง div (div อยู่ในหมวดหมู่ทั่วไป ไม่มีความหมายเชิงโครงสร้างแต่ใช้ได้)

เอากันสั้นๆ ง่ายๆ งงๆ อย่างนี้แหละครับ

มีความสุขกับการใช้ชีวิตตามอัตภาพบ้าง ก็ดี อย่างน้อยชีวิตนี้ก็ไม่ได้ทุกข์ไปซะหมด

อ้างอิงข้อมูลไม้ผล จาก http://th.wikipedia.org/wiki/ไม้ผล