SEMANTIC HTML คืออะไร และเราจะเขียน HTML ยังไงให้ถูกต้อง
เวลาเขียน HTML คุณมีหลักการเขียนยังไง?
- เขียนตามๆคนอื่นไป ใช้ tag อะไรก็ได้
- เขียนตามความเคยชิน
- ไม่เขียนเองให้โปรแกรมมันทำให้ เช่นพวก Dreamweaver
- เขียนเอง Manual แบบ Semantic HTML
- ฯลฯ
การเขียน HTML ในทุกวิธีที่กล่าวมา ไม่ได้มีผลกับหน้าตาเว็บไซต์ที่เรามองเห็น แต่มันมีผลกับ “การสื่อความหมาย (semantic)” ให้กับ Search Engine หรือโปรแกรม/อุปกรณ์ เช่น Screenreader , Jaws ฯลฯ ที่ช่วยอ่านหน้าเว็บไซต์ให้คนตาบอดได้ยินว่าเนื้อหาบนหน้าเว็บไซต์ที่เค้าเปิดอยู่มีเนื้อหาอย่างไร
ซึ่งสิ่งเหล่านี้ คือ การลดข้อจำกัดของแต่ละบุคคล ให้สามารถเข้าถึงเนื้อหาเว็บไซต์ของเราได้อย่างเท่าเทียมกัน หรือที่เรียกว่า “Web Accessibility” โดยมีแนวความคิดว่า ไม่ว่าคุณจะเป็นคนอวัยวะครบ 32 ประการ หรือเป็นคนพิการ , คุณจะใช้มือถือต่างกัน, เครือข่ายต่างกัน ฯลฯ คุณจะต้องได้รับข่าวสารและข้อมูลอย่างเท่าเทียมกัน โดยหลักของ Web Accessibility มีอยู่หลายประการ โดย Semantic HTML เป็นวิธีการหนึ่งที่ทำให้เว็บไซต์ของเรามี Web Accessibility มากขึ้น (ขออธิบายเรื่องหลักการ Web Accessibility แยกไปอีก 1 บทความหลังจากนี้นะคะ)
Semantic HTML คืออะไร?
Semantic HTML คือการเขียน HTML ให้สื่อความหมายได้ มันคือการกำหนดความหมายให้กับเนื้อหาในหน้าเว็บไซต์ของเรา ว่าอะไรคือหัวข้อ ,อะไรคือใจความสำคัญ, อะไรคือเนื้อหารอง, อะไรคือเมนู, อะไรคือวันที่, ผู้เขียนคือใคร ฯลฯ และการสื่อความหมายนี้จะขึ้นอยู่กับ HTML ที่เราเขียนไปครอบเนื้อหาเหล่านั้น
HTML5 เกิดมาเพื่อเป็น Semantic HTML
HTML เวอร์ชั่น 5 ได้มีการเพิ่มและลด HTML บาง tag เพื่อผลในด้านการเป็นสื่อความหมาย เพื่อเป็น Semantic HTMLยกตัวอย่างให้เห็นภาพชัดเจนดังนี้
จากเดิม
- div ไม่บ่งบอกว่าเนื้อหาข้างในคืออะไร
- span ไม่บ่งบอกว่าเนื้อหาข้างในคืออะไร
HTML5
article บ่งบอกว่าเป็นเนื้อหาที่เป็นบทความ
Tag ด้านบน คือ ตัวอย่างของ HTML5 ที่เพิ่มเข้ามา เพื่อผลในการสื่อความหมายของ HTML ได้มากยิ่งขึ้น ดังนั้น จึงเป็นหน้าที่ของผู้เขียนโค้ด ที่จะต้องทำความเข้าใจ HTML แต่ละ tag ว่าใช้สำหรับเนื้อหาประเภทไหน แล้วจึงนำ tag เหล่านั้นมาใช้ให้ถูกต้อง โดยสามารถศึกษาแต่ละ tag ได้ที่ https://www.w3schools.com/tags/default.asp
และเมื่อเราได้ศึกษา tag ต่างๆแล้วว่า tag เหล่านั้นเกิดมาเพื่ออะไร ก่อนเริ่มต้นการเขียน HTML เราจำเป็นที่จะต้อง “ตีความเนื้อหา” ให้ถูกต้องเสียก่อน
การตีความเนื้อหาก่อนการเขียน HTML
- ก่อนลงมือเขียน HTML ควรอ่านเนื้อหาแล้วตีความก่อนทุกครั้ง ว่าเนื้อหาในหน้านั้นอะไรคือ หัวข้อหลัก, หัวข้อรอง, ใจความสำคัญ, ใครคือผู้เขียน เป็นต้น
- เมื่อตีความได้แล้วว่าเนื้อหาส่วนต่างๆมีอะไรบ้างๆ จึงพิจารณาในการเขียน HTML ที่เหมาะสมใส่ลงไปเพื่อครอบเนื้อหานั้นๆอีกที
- HTML ที่ดี ควรให้เนื้อหาหลักอยู่บริเวณด้านบนสุดของหน้าเพจ เพื่อให้ Search Engine สามารถ Crawl ได้เร็วขึ้น ดังนั้น หากเนื้อหาบางส่วนที่ไม่ใช่ใจความสำคัญ แต่ดันแสดงผลอยู่ด้านบนหน้าเว็บ(ด้วยเหตุผลของดีไซน์) เราควรใช้เทคนิคการเขียน CSS ทำให้มันไปอยู่ด้านบนแทน แต่ HTML เขียนอยู่ด้านล่างเพราะไม่ใช่ใจความสำคัญ
สรุป
การเขียน HTML ใครๆก็เขียนได้ เพราะออกมาเป็นหน้าเว็บไซต์ได้เหมือนกัน
แต่การเขียน HTML ที่ดี ให้เป็น Semantic HTML ไม่ใช่ทุกคนที่จะเขียนได้ ดังนั้น ถ้าเราหวังผลที่จะให้เว็บไซต์ของเรามีคุณภาพ มี Web Accessibility ที่ดี ให้การต้อนรับกับคนทุกกลุ่ม รวมถึงเอื้ออำนวยต่อการเก็บข้อมูลของ Search Engine ย่อมทำให้คุณภาพของเว็บไซต์เราสูงกว่าคนอื่นๆ โดยเฉพาะอย่างยิ่ง ผลทางด้าน SEO
