บทเรียน
ขออธิบายแบบสั้นๆ ว่า Semantic Markup ก็คือ
“html markup ที่มีความหมายตรงตัว”
ลองนึกภาพว่าคุณกำลังสรา้งหน้าเนื้อหาใส่หน้าเว็บ แล้วอยู่ดีๆ <div> ก็โผล่มาเต็มไปหมด จริงๆหน้าเว็บการแสดงผลได็ปกติดีนะ แต่จริงๆเราควรคำนึงถึงโครงสรา้งการ html ของเราด้วย
ใช้ Semantic ซะ
การที่ใช้ semantic นั้นเป็นเรื่องที่ดีนะ แบบ ดั้งเดิมเราอาจจะสรา้ง navbar โดยการเขียนแบบนี้
<div class = “nav”></div>
<div class=”header”></div>
<div class=”footer”></div>ให้ลองหันมาใช้ semantic markup จะได้แบบนี้
<nav></nav>
<header></header>
<footer></footer>ข้อดีคือ เจ้าบล็อคส่วนนี้มีความหมายตรงตัวเลยว่านี่คือ nav header footer และข้อดีอีกอย่างคือมีผลต่อการทำ Search engine optimization อันนี้ไว้อธิบายภายภาคหน้าละกัน
Semantic ทั้งหมดใน HTML
อันที่จริงไม่ใช่ว่าเราจะใส่อะไรเป็นแบบ semantic ได้ตามใจนะ ทาง html เขาก็มี semantic ที่เขากำหนดไว้ให้ใช้แล้วเช่น
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
อาจจะมีพวก <ul> <ol> <h1> <p> อะไรพวกนี้อีกนิดหน่อย แต่หลักๆก็ตามด้านบนนั้นหละ
ใช้ <div> บางกรณี
จึงๆก็ใช้ได้นะแต่เจ้า <div> หรือ <span> แต่เนี้ยมันไม่ได้มีความหมายสื่อว่าเจ้า tag นี้คืออะไร แต่ยังใช้ได้ในกรณีที่ไม่มี Semantic สำหรับตัวนั้นๆ
ขอเสริม
คือเคยมีเพื่อนผมถามว่าทำไมเราต้องใช้ <ul> บน navbar ทำไมไม่ใช้<div> ก็ตามข้างบนที่กล่าวมาก็คือ <ul> มันมีความหมายเกี่ยวกับ list เพราะเมนูต่างๆบน navbar นั้นล้วนสอดคล้องเป็น list ซึ่งมัน make sense กว่าการที่ต้องมานั่งเขียน <div> ซ้อน <div> นี่หละข้อดีการใช้ sematic markup
สรุป
การใช้ Semantic ทำให้โครงสรา้ง html มีความหมายตรงตัวชัดเจน และยังมีผลดีต่อการทำ Search engine optimization
ขอขอบคุณข้อมูลจาก
https://medium.com/@danusoncheounsanguan/semantic-tag-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-6daeedf02160