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

flying fire

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

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

จากตัวอย่างข้างต้นจะเห็นได้ว่าเราเริ่มด้วย 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/ไม้ผล

Back to Top

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

  1. เครื่องมือวัด

    ้html5 ยังไม่ได้ลองเลยครับ จะใช้ก็เบื่อกับปัญหา browser ยังไม่รองรับเต็มที่ ทั้งเรื่องของ css3 อยากใช้คำสั่งหลาย ๆ คำสั่งของ css3 แต่ ie7,8 ก็ไม่รับ ie9 ก็เป็น windows xp ก็หมดสิทธิ์ เมื่อไหร่ เว็บจะใช้มาตรฐานเดียวกันสะทีในทุก ๆ Browser

    Reply

  2. pnGz

    บรรทัดที่ 2 เขียนผิดเป็น อ่ะครับ แหะๆ

    Reply

    • pnGz

      ** เขียนผิดเป็น artivle (คนเตือนยังพมพ์ตก -*-)

      Reply

Leave a Reply

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

Connect with Facebook

Back to Top