GORAGOD.com

เค้าโครงของเอกสาร HTML5 (Document Outlines)

มีความเปลี่ยนแปลงในเค้าโครงของเอกสาร HTML5 (Document Outlines) ที่แตกต่างจาก HTML4 อย่างสิ้นเชิงนะครับ ซึ่งเราจำเป็นต้องเรียนรู้เพื่อก่อให้เกิดการใช้งาน HTML5 อย่างถูกต้อง

การจัดโครงสร้างภายในเอกสารที่ถูกต้องจะทำให้การเข้าตีความหมายของเอกสารด้วยอุปกรณ์อื่นๆ เช่น Search Engine ตลอดจน อุปกรณ์อ่านเอกสารสำหรับผู้ที่บกพร่องทางสายตา ให้สามารถทำความเข้าใจกับเอกสารได้โดยง่าย ผมจะอธิบายโครงสร้างของเอกสารที่เราใช้กันโดยรูปแบบของ HTML4 ที่เราคุ้นเคยกันดีก่อนนะครับ

<h1>เอกสารของฉัน</h1>
<h2>เกี่ยวกับฉัน</h2>
<p>แสดงข้แมูลเกี่ยวกับผู้แต่งที่นี่ เช่น ชื่อ นามสกุล อายุ เพศ</p>
<h3>ฉันทำอะไร</h3>
<p>เกี่ยวกับสิ่งที่ทำ งานที่กำลังทำ.</p>
<h2>ติดต่อฉัน</h2>
<p>ข้อมูลต่างๆเกี่ยวกับผู้แต่ง เช่น ชื่อ ที่อยู่</p>

เอกสารด้านบน สามารถระบุโครงสร้างที่ Search Engine เข้าใจได้ดังนี้

  1. เอกสารของฉัน
    1. เกี่ยวกับฉัน
      1. ฉันทำอะไร
  2. ติดต่อฉัน

ลองม าดูวิธีการของ HTML5 กัน

<h1>เอกสารของฉัน</h1>
<section>
  <h1>เกี่ยวกับฉัน</h1>
  <p>แสดงข้แมูลเกี่ยวกับผู้แต่งที่นี่ เช่น ชื่อ นามสกุล อายุ เพศ</p>
  <section>
    <h1>ฉันทำอะไร</h1>
    <p>เกี่ยวกับสิ่งที่ทำ งานที่กำลังทำ.</p>
  </section>
</section>
<section>
  <h1>ติดต่อฉัน</h1>
  <p>ข้อมูลต่างๆเกี่ยวกับผู้แต่ง เช่น ชื่อ ที่อยู่</p>
</section>

วิธีการของ HTML5 จะใช้แบ่งเอกสารออกเป็นส่วนๆ ตัวอย่างด้านบน แต่ละ section คือแต่ละส่วน ซึ่งแต่ละส่วนก็จะมี header ของมันเอง โดยที่ h1 ลำดับแรกสุด ก็จะเป็นส่วนหัวของ section นอกสุด และ h1 ลำดับถัดมาก็จะเป็นส่วนหัวของ section ถัดไป ตามลำดับ

การตีความโครงสร้างของเอกสารก็จะได้ดังนี้

  1. เอกสารของฉัน
    1. เกี่ยวกับฉัน
      1. ฉันทำอะไร
  2. ติดต่อฉัน

สิ่งที่สำคัญสำหรับ HTML5 คือ

  • ภายใต้แต่ละ <section> ต้องเริ่มต้นจาก h1 เสมอ
  • สำหรับ HTML5 โครงสร้างนี้ ไม่ได้ใช้เฉพาะกับ <section> เท่านั้น แต่ยังรวมถึง <article> <aside> และ <nav> อีกด้วย
  • โครงสร้างแต่ละส่วนถ้าไม่ได้ระบุ header จะถูกตีความโครงสร้างว่าเป็น "Untitled"
คุณสามารถทดลองตรวจสอบโครงสร้างของเอกสารของคุณได้ที่ http://gsnedders.html5.org/outliner/