Semantic Markup คืออะไร

ขออธิบายแบบสั้นๆ ว่า 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

Write a comment