บทความ IT เจ๋งๆ
7 Semantic HTML5 Elements ที่หลายคนมักใช้ผิด (และวิธีใช้ที่ถูกต้อง)
10-ต.ค.-25
คัมภีร์เทพ IT
หลายคนคงรู้จัก Semantic HTML5 Tags อย่าง <main>, <section>, <article> หรือ <nav> แต่กลับใช้งานผิดโดยไม่รู้ตัว ซึ่งความผิดพลาดเล็ก ๆ แบบนี้อาจส่งผลต่อ SEO และ Accessibility แย่ลง สำหรับผู้ใช้จริง บทความนี้จะพาคุณไปดู 7 Semantic HTML5 Elements ที่หลายคนมักใช้ผิด (และวิธีใช้ที่ถูกต้อง)
1. <main> — ใช้ได้เพียงหนึ่งครั้งต่อหน้า (ห้ามซ้อนกัน)
ความผิดพลาดที่พบบ่อย: มี <main> หลายตัว หรือใส่ไว้ข้างใน Layout Wrapper
ทำไมถึงมีปัญหา: Screen Reader จะกระโดดตรงไปที่ <main> เพื่อข้ามส่วน Navigation หากมีมากกว่า 1 จะทำให้การเข้าถึงมีปัญหา
ใช้งานแบบนี้:
วิธีที่ถูกต้อง:
- <main> ต้องมีเพียงหนึ่งเดียวต่อ Document
- ห้ามอยู่ใน <article>, <aside>, <header>, <footer> หรือ <section>
- หากมี “Skip to content” Link ควรผูกกับ <main> โดยใช้ id ที่คงที่
2. <section> — ใช้เมื่อมีหัวข้อ (Heading)
ความผิดพลาดที่พบบ่อย: ใช้ <section> แทน <div> โดยไม่มี <h1>–<h6>
ทำไมถึงมีปัญหา: Section ที่ไม่มี Heading จะทำให้ Document Outline สับสนและ Screen Reader ใช้งานลำบาก
แนวทางแก้ไข:
วิธีที่ถูกต้อง:
- ควรใช้ <section> เมื่อมี Heading จริง ๆ
- ถ้าไม่มี Heading ที่เหมาะสม ให้ใช้ <div> จะชัดเจนกว่า
3. <article> — เนื้อหาที่เผยแพร่ได้เอง
ความผิดพลาดที่พบบ่อย: ใช้ <article> ครอบส่วนย่อยที่ไม่สามารถอยู่เดี่ยว ๆ ได้
ทำไมถึงมีปัญหา: <article> จะระบุว่า Block นี้สามารถทำงานได้เอง และช่วยให้ Crawlers และ Assistive Tech เข้าใจโครงสร้างเนื้อหา เช่น ใน Feed หรือ Email
มักใช้งานกับ:
- Blog posts, News Items, Forum Threads
- Product Reviews, Comment Cards, Changelog Entries
แนวทางแก้ไข:
ถ้าเนื้อหานี้สามารถแสดงหรือเข้าใจได้โดยไม่ขึ้นกับส่วนอื่นของ Page สามารถใช้ <article> ได้ แต่ถ้าเนื้อหาต้องพึ่งบริบทของ Page ให้ใช้ <section> หรือ <div> แทน
4. <header> — ไม่ได้จำกัดแค่ส่วนบนของ Web
ความผิดพลาดที่พบบ่อย: ใช้ <header> เฉพาะ Global Navbar/Topbar
ทำไมถึงมีปัญหา: การใช้ <header> ไม่ถูกต้องทำให้พลาดโครงสร้างที่ช่วยให้ <article> และ <section> เข้าใจง่ายขึ้น
คุณสามารถใช้ <header> ได้ทั้งใน <article> หรือ <section> เพื่อรวม Heading และ Intro Control
เคล็ดลับ: ใส่เฉพาะ Introductory Element ไว้ใน <header> ส่วน Action และ Content ให้วางไว้ใต้ <header>
5. <footer> — ปิดท้าย Scope ที่มันอยู่
ความผิดพลาดที่พบบ่อย: ใช้ <footer> แค่ Global Footer เพียงอย่างเดียวของ Website ไม่มี Footer อื่น ๆ ในแต่ละ Component หรือบทความ
ทำไมถึงเป็นปัญหา: Article หรือ Card จะไม่มีตำแหน่งเชิงโครงสร้าง (Semantic Place) สำหรับ Metadata หรือ Action ต่าง ๆ
คุณสามารถและควร ใช้ <footer> ภายใน Components ที่ทำหน้าที่เหมือน Documents
ส่วน Global Page Footer ให้เก็บไว้สำหรับ Site-wide Navigation และ Legal Links
6. <nav> — ใช้สำหรับ Navigation เท่านั้น
ความผิดพลาดที่พบบ่อย: ใส่รายการของ Links ใด ๆ ไว้ใน <nav>
ทำไมถึงมีปัญหา: Assistive Tech คาดหวังว่าจะมี Navigation Landmarks, การใส่ Links แบบสุ่ม ๆ จะทำให้โครงสร้าง Navigation ไม่ชัดเจน
ใช้ <nav> สำหรับ Navigation ที่ชัดเจน เช่น Main nav, Secondary nav, Breadcrumbs, In-page Navigation
แนวทางการใช้งาน:
- ใช้ aria-current="page" หรือ "step" สำหรับ Item ที่กำลัง Active
- ควรใช้รายการ <ul> หรือ <ol> สำหรับ Navigation Links ที่เป็นกลุ่ม
7. <aside> — ใช้กับเนื้อหาประกอบ (Complementary)
ความผิดพลาดที่พบบ่อย: ใช้ <aside> สำหรับ Main Content หรือ Generic Sidebar ที่เก็บ Tasks หลัก
ทำไมถึงมีปัญหา: หลายคนอาจข้าม <aside> โดยอัตโนมัติ ถ้าเนื้อหาจำเป็นต่อการทำงานหรือความเข้าใจของผู้ใช้ ไม่ควรใช้ <aside> ให้ใช้ <section> หรือ <main> แทน
การใช้งานที่ถูกต้อง:
ใช้ <aside> สำหรับ Content ที่เป็นส่วนเสริม เช่น
- Tips, Callouts, Related Links
- Pull Quotes, Promotion Modules, Complementary Charts
สรุป
และนี่ก็เป็น 7 Semantic HTML5 Elements ที่หลายคนมักใช้ผิด (และวิธีใช้ที่ถูกต้อง) การใช้ Semantic HTML5 อย่างถูกต้อง ไม่ได้ช่วยแค่เรื่อง SEO เท่านั้น แต่ยังทำให้ Website ของคุณ เข้าถึงได้ง่ายขึ้น (Accessibility) และ โครงสร้าง Code ชัดเจนขึ้น หากสามารถหลีกเลี่ยงความผิดพลาดเหล่านี้ได้ Website จะมีทั้งคุณภาพในเชิงเทคนิคและประสบการณ์ผู้ใช้ที่ดีขึ้น
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด