การวางโครงหน้าเว็บ html5

HTML5_stickerการวางโครงสร้างหน้าเว็บเพื่อให้ตรงตามข้อกำหนดของ html5 น่าจะมีผลกับการแสดงผลในภาพรวม และอาจจะมีผลกับการค้นหาจากเสิร์ชเอ็นจิ้น (SEO: Search Engine Optimization) ต่างๆได้

ก่อนหน้ายุค html5 แต่ละหน้าเว็บควรจะมีเฮดดิ้งแท็ก (h1) เพียงแค่อันเดียวเท่านั้น เพื่อบ่งบอกเนื้อหาหลักของทั้งหน้า แต่ในกรณีที่ในหนึ่งหน้ามีหลายส่วน หรือหน้าเว็บแบบแสดงรายการ เช่น รายการสินค้า คอมเมนต์จากผู้ใช้ การเลือกใช้แท็กจะมีผลมากกว่าการให้ความสำคัญของข้อมูล

เพื่อตอบโจทย์ข้อนี้ html5 อนุญาตให้ใช้ h1 มากกว่า 1 ครั้งต่อหน้าได้ แต่ไม่ใช่จะเลือกวางตรงไหนก็ได้ ควรจะวางโครงสร้างให้เหมาะสม นอกจากตัวเฮดดิ้งแท็ก เพื่อใช้บอกหัวข้อหลัก/รองแล้ว แท็กที่เกี่ยวข้องมีดังนี้

  1. ตัวแบ่งแยกหน้า โดยทั่วไปก็คือ <body>
  2. ตัวแบ่งแยกกลุ่ม <article>, <section>, <nav>, <aside>
  3. เฮดดิ้งแท็ก <h1> – <h6>

แน่นอนว่าหน้าเว็บจะมี 1 body ถ้าหน้านั้นๆ มีมากกว่า 1 ข้อมูลย่อยในระดับเดียวกัน ดังที่กล่าวข้างต้น ต้องแยกด้วย article หรือ section ส่วน nav สงวนไว้ใช้กับเมนู หรือการเปลี่ยนหน้า และ aside ใช้ข้อมูลอื่นๆที่นอกเหนือจากที่กล่าวข้างต้น

ข้อแตกต่างระหว่าง article กับ section คือ article สามารถแยกไปแสดงผลที่หน้าเว็บอื่นได้ทันที โดยมีเนื้อหาครบถ้วน ส่วน section นั้น อาจจะต้องใช้ข้อมูลอื่นๆ ประกอบ แต่ที่เหมือนกันคือ ควรมีเฮดดิ้งแท็กเพื่อระบุสาระสำคัญของส่วนนั้นๆ

นอกจากนี้ในแต่ละส่วน อาจจะแยกกลุ่มหัวข้อความด้วย <header> และ ท้ายข้อความด้วย <footer>

ที่มา:

สแลช (Slash)