เค้าโครงของเอกสาร 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 เข้าใจได้ดังนี้
-
เอกสารของฉัน
-
เกี่ยวกับฉัน
-
ฉันทำอะไร
-
ติดต่อฉัน
ลองม าดูวิธีการของ 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 ถัดไป ตามลำดับ
การตีความโครงสร้างของเอกสารก็จะได้ดังนี้
-
เอกสารของฉัน
-
เกี่ยวกับฉัน
-
ฉันทำอะไร
-
ติดต่อฉัน
สิ่งที่สำคัญสำหรับ HTML5 คือ
- ภายใต้แต่ละ <section> ต้องเริ่มต้นจาก h1 เสมอ
- สำหรับ HTML5 โครงสร้างนี้ ไม่ได้ใช้เฉพาะกับ <section> เท่านั้น แต่ยังรวมถึง <article> <aside> และ <nav> อีกด้วย
- โครงสร้างแต่ละส่วนถ้าไม่ได้ระบุ header จะถูกตีความโครงสร้างว่าเป็น "Untitled"