HTML5 วาง Tag ยังไงให้ถูกที่ ดูดีและโดนใจ
ก่อนอื่นต้องเข้าใจก่อนครับว่า article, section, nav, aside เค้าเรียกกันว่า “Sectioning Contents” พูดง่ายๆ ก็คือ elements ต่างๆ ที่เป็น Sectioning Contents มีไว้กำหนดขอบเขตของ content ที่อยู่ภายในขอบเขตนี้ จะต้องมีความเกี่ยวข้องกัน โดย elements ที่เป็น Sectioning Contents มักจะมี heading กำกับไว้เพื่อบอกว่าขอบเขตนั้นๆ เป็นเรื่องเกี่ยวกับอะไร
แท็ก nav มีไว้สำหรับบอกว่า ส่วนนี้เป็นส่วนสำหรับช่วยให้ user ไปยังส่วนต่างๆ ภายในเว็บได้ง่ายขึ้น ซึ่งจะใช้ mark up ตรงส่วนที่จะเป็น link ไปยังหน้าอื่นๆ หรือ link ไปยังส่วนต่างๆ ภายในหน้านั้นๆ แต่ ไม่ใช่ทุก link จะใช้ แท็ก nav ได้ link ที่ควรใช้ แท็ก nav mark up นั้น ผมสรุปให้ดังนี้ครับ
- Main menu ส่วนที่เป็นเมนูหลักของเว็บไซต์ หรือของหน้านั้นๆ ไม่ว่าจะอยู่ที่ header หรือ footer
- Skip to content ปุ่มที่มีไว้สำหรับคนตาบอด หรือผู้ที่ใช้ Screen reader เพื่ออำนวยความสะดวกในการอ่าน
- Table of Contents ส่วนนี้มีไว้ช่วยให้ผู้อ่านสามารถข้ามไปยังหัวข้อต่างๆ ภายในบทความหรือหน้านั้นๆ ได้สะดวกขึ้น
- Previous/Next, Pagination ปุ่มที่มีไว้สำหรับกลับไปดูหน้าก่อนหน้านี้ หน้าถัดไป รวมถึงปุ่มข้ามไปดูยังหน้าต่างๆ
- Breadcrumbs ส่วนนี้ทำหน้าที่ช่วยบอกว่าเรากำลังอยู่ที่ส่วนไหน หน้าไหน ภายในเว็บไซต์
แท็ก article ใช้ mark up สิ่งที่มีความหมายในตัวของมันเอง เช่น ข่าว บทความ เป็นต้น สังเกตว่าสิ่งเหล่านี้ ไม่ว่าจะวางไว้ตรงไหน ก็ยังมีความหมายอยู่ สามารถอ่านเข้าใจได้ โดยไม่ต้องพึ่งสิ่งอื่น นอกจากนั้นแล้ว แท็ก article ยังสามารถใช้ซ้อนกันภายใน แท็ก article เองได้อีกด้วย ซึ่งจะใช้ในกรณีที่เนื้อหาภายใน แท็กนั้นๆ มีบางส่วน ที่มีความหมายในตัวของมันเอง แม้ว่าจะตัดเนื้อหารอบๆ ออกก็ยังอ่านเข้าใจ เช่น ความคิดเห็นของบทความ เป็นต้น
แท็ก section นั้นจะใช้ mark up เนื้อหาที่ต้องการแยกออกมาเป็นส่วนๆ เช่น การแบ่งบทความออกเป็น chapter หรือแบ่งเนื้อหาทั้งหมดออกเป็นประเด็นย่อยๆ ภายใน section มักจะมี heading ซึ่งจะใช้บอกว่า section นั้นๆ มีเนื้อหาเกี่ยวกับอะไร ซึ่งเนื้อหาภายใน section จะต้องเกี่ยวข้องกันทั้งหมด
แท็ก aside จะใช้ mark up ส่วนที่มีความเกี่ยวข้องกับเนื้อหาหลัก แต่ไม่มากนัก จนสามารถแยกออกมาจากเนื้อหาหลักหรือตัดออกได้ โดยไม่ทำให้เนื้อหาหลักอ่านไม่รู้เรื่อง เราจะเห็น แท็ก aside อยู่ 2 แบบด้วยกัน ดังนี้ครับ
- ถ้าอยู่ภายใน แท็ก article จะพบว่า แท็ก aside มีเนื้อหาเกี่ยวข้องกับเนื้อหาภายใน แท็ก article นั้นๆ
- ถ้าอยู่ภายนอก แท็ก article จะพบว่า แท็ก aside มีเนื้อหาเกี่ยวข้องกับเนื้อหาโดยรวมของหน้านั้นๆ /li>
หวังว่าจะเป็นประโยชน์ในการเลือกใช้ Sectioning Contents นะครับแล้วพบกันใหม่ในครั้งต่อไป สวัสดีครับ