header, nav, main, footer: สี่ส่วนสำคัญ

ผู้ใช้ที่มองเห็นสามารถกวาดดูหน้าได้ในพริบตา ส่วนผู้ใช้โปรแกรมอ่านหน้าจอต้องการแผนที่ และองค์ประกอบ landmark ของ HTML5 จะช่วยสร้างแผนที่นั้น

องค์ประกอบสี่รายการครอบคลุมหน้าเว็บส่วนใหญ่ ได้แก่ header, nav, main และ footer ทั้งหมดนี้แบ่งเค้าโครงออกเป็นขอบเขตที่ผู้ใช้ข้ามไปมาได้ 🗺️

header ระดับหน้าถือชื่อเว็บไซต์ โลโก้ และเนื้อหาแนะนำไว้ โปรแกรมอ่านหน้าจอจะแสดงส่วนนี้เป็นขอบเขตแบนเนอร์

ครอบชุดลิงก์หลักของคุณไว้ใน nav เพื่อบอกเทคโนโลยีสิ่งอำนวยความสะดวกว่าเนื้อหาส่วนนี้คือการนำทาง ผู้ใช้จึงค้นหาหรือข้ามได้อย่างรวดเร็ว

องค์ประกอบ main ครอบเนื้อหาเฉพาะของหน้านั้นไว้ นี่คือจุดหมายที่ผู้ใช้ให้ความสนใจมากที่สุด

footer ระดับหน้าถือลิขสิทธิ์ ลิงก์ทางกฎหมาย และข้อมูลติดต่อไว้ โปรแกรมอ่านหน้าจอจะประกาศส่วนนี้เป็นขอบเขตข้อมูลเนื้อหา

แท็กเหล่านี้มี บทบาท ARIA ในตัว ดังนั้น header จึงกลายเป็น banner และ nav กลายเป็น navigation โดยไม่ต้องเพิ่มแอตทริบิวต์ใด ๆ

header ที่อยู่ภายใน article เป็นเพียงหัวข้อของส่วน ไม่ใช่แบนเนอร์ของหน้า เฉพาะ header ระดับบนสุดเท่านั้นที่นับเป็น landmark แบนเนอร์

div ไม่มีบทบาท ดังนั้นโปรแกรมอ่านหน้าจอจึงไม่เห็นสิ่งที่ข้ามไปได้ แท็ก landmark เปลี่ยนโครงสร้างที่มองไม่เห็นให้กลายเป็นการนำทางจริง

วางองค์ประกอบทั้งสี่ไว้ด้วยกัน แล้วผู้ใช้โปรแกรมอ่านหน้าจอจะได้ยินรูปร่างของ หน้าคุณทันที ก่อนอ่านแม้แต่คำเดียว 🎯

เมื่อมี landmark แล้ว ผู้ใช้สามารถ กระโดดข้าม header ไปยัง main ได้โดยตรง ไม่ต้องผ่านลิงก์ซ้ำ ๆ ในทุกหน้า

คุณได้เรียนรู้ว่า header, nav, main และ footer มอบแผนที่ให้ผู้ใช้โปรแกรมอ่านหน้าจอ แท็กเนทีฟจึงมีบทบาท landmark ให้โดยไม่ต้องทำเพิ่ม 🙌