แท็กมีความหมาย: เหตุใดการใช้ div จนยุ่งเหยิงจึงล้มเหลว

เมื่อสร้างหน้าเว็บด้วยแท็ก div และ span เท่านั้น เราจะเรียกสิ่งนี้ว่า div soup มาร์กอัปอาจดูดีบนหน้าจอ แต่ไม่มีความหมายอยู่เบื้องหลัง

แท็ก HTML ส่วนใหญ่มีความหมายเชิงโครงสร้างในตัว ปุ่มก็คือปุ่ม หัวข้อก็คือหัวข้อ เบราว์เซอร์รู้แล้วว่าแต่ละแท็กมีไว้ทำอะไร

divคือกล่องทั่วไปที่ไม่มีความหมายเลย ใช้จัดกลุ่มสิ่งต่าง ๆ ในเชิงภาพ แต่ไม่ได้บอกเบราว์เซอร์หรือเทคโนโลยีช่วยเหลือเกี่ยวกับบทบาทของมัน

เลือกแท็กให้ถูกต้อง แล้วคุณจะได้พฤติกรรมต่าง ๆ โดยไม่ต้องเขียนเพิ่ม buttonจริงสามารถรับโฟกัส คลิกด้วยแป้นพิมพ์ และประกาศว่าเป็นปุ่มได้ ส่วน div ที่ตกแต่งแล้วทำไม่ได้สักอย่าง

โปรแกรมอ่านหน้าจออ่านหน้าจากความหมายเชิงโครงสร้าง ไม่ใช่จากพิกเซลของภาพ div soup จึงไม่มีอะไรให้ประกาศ ผู้ใช้จะได้ยินเพียงเสียงราบเรียบและสับสน

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

คุณทำให้ div ทำงานเหมือนปุ่มได้ด้วยบทบาท ARIA และตัวจัดการปุ่มกด แต่โค้ดส่วนเกินนี้เปราะบางและเป็นการสร้างสิ่งที่ HTML มีให้อยู่แล้วขึ้นมาใหม่

แท็กเชิงความหมายหมายถึงมีโค้ดน้อยลงที่ต้องเขียนและดูแล แพลตฟอร์มจัดการโฟกัส การคลิก และการประกาศให้ คุณจึงมีสิ่งที่อาจทำพังน้อยลง

divไม่ได้ชั่วร้าย แต่เหมาะสำหรับการจัดกลุ่มเพื่อจัดวางล้วน ๆ เช่น ตัวครอบ flex ซึ่งไม่ต้องการความหมายใด ๆ

ก่อนพิมพ์ div ให้ถามว่า มีแท็กที่สื่อความหมายสำหรับสิ่งนี้หรือไม่ เช่น nav, header, button หรือ list ให้เลือกสิ่งนั้นก่อน และใช้ div เป็นทางเลือกสุดท้าย

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

แท็กมีความหมาย ส่วน divไม่มี เลือกใช้องค์ประกอบจริงก่อนเพื่อให้ได้การรองรับโฟกัส แป้นพิมพ์ และโปรแกรมอ่านหน้าจอโดยไม่ต้องเขียนเพิ่ม เก็บ div ไว้ใช้จัดวาง 🎉