Semantic Structure

คุณคงเคยใช้ <div> เพื่อจัดกลุ่มสิ่งต่าง ๆ — เป็น container ที่เป็นกลาง ไม่มีความหมายในตัวเอง HTML ยังมีชุดของ container ที่ มี ความหมายให้คุณด้วย container กลุ่มนี้เรียกว่า semantic element และจับคู่ได้แทบจะสมบูรณ์แบบกับ region ที่คุณกำหนดไว้อยู่แล้วในดีไซน์ Figma ของคุณ

“Semantic” แปลว่า “มีความหมาย” นั่นแหละ เมื่อคุณใช้ <header> แทน <div class="header"> ทั้ง browser screen reader และ search engine ต่างเข้าใจว่า region นั้น คืออะไร — ไม่ใช่แค่ว่าหน้าตาเป็นอย่างไร

region หลัก ๆ

HTML element	ความหมาย	สิ่งที่เทียบเท่าใน Figma
`<header>`	เนื้อหาเกริ่นนำของหน้าหรือ section — มักเป็นโลโก้ ชื่อเว็บไซต์ และ nav ด้านบน	frame ระดับบนสุดที่มี branding
`<nav>`	บล็อกของลิงก์ navigation	frame ของ navigation component
`<main>`	เนื้อหาหลักที่ไม่ซ้ำใครของหน้า (ใช้ครั้งเดียว)	frame ของพื้นที่เนื้อหาหลัก
`<section>`	กลุ่มเนื้อหาตามธีม โดยทั่วไปมี heading ของตัวเอง	frame ของ section บน canvas
`<article>`	เนื้อหาชิ้นหนึ่งที่อ่านได้อย่างมีความหมายในตัวเอง — บล็อกโพสต์ การ์ด ข่าว	การ์ดหรือ component ของโพสต์
`<aside>`	เนื้อหาที่เกี่ยวข้องทางอ้อมกับเนื้อหาหลัก — sidebar หรือ callout	frame ของ sidebar
`<footer>`	เนื้อหาปิดท้าย — ลิขสิทธิ์ ลิงก์รอง ข้อมูลติดต่อ	frame ด้านล่าง

ทำไมถึงสำคัญ

Screen reader ใช้ landmark เหล่านี้เพื่อให้ผู้ใช้กระโดดตรงไปยังเนื้อหา <main> ได้เลย โดยข้าม header และ nav ในทุกหน้า นั่นคือการปรับปรุง usability ครั้งใหญ่สำหรับผู้ใช้ที่ตาบอด
Search engine เข้าใจว่าเนื้อหาใน <article> คือข้อความหลักของหน้า และให้น้ำหนักตามนั้น
ทีมของคุณเอง สามารถอ่าน HTML แล้วเข้าใจ layout ของหน้าได้ในพริบตา โดยไม่ต้องไปถอดรหัสจากชื่อ class

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h1>Selected Work</h1>
    <article>
      <h2>Fintech Dashboard</h2>
      <p>A data-heavy interface redesigned for clarity.</p>
    </article>
    <article>
      <h2>E-commerce Checkout</h2>
      <p>Reducing drop-off with a streamlined flow.</p>
    </article>
  </section>
</main>

<footer>
  <p>&copy; 2024 Studio Name</p>
</footer>

ดูสิว่าแต่ละ region จับคู่กับ element ที่มีชื่อได้ชัดเจนแค่ไหน ลองเปลี่ยน <section> เป็น <div> ดู — หน้าเว็บจะดูเหมือนเดิมเป๊ะ แต่ความหมายหายไปแล้ว ความแตกต่างที่มองไม่เห็นนี่แหละคือหัวใจของ semantics

💡 คิดเป็น landmark ไม่ใช่แค่กล่อง

เวลาคุณออกแบบหน้าใน Figma คุณก็แบ่งหน้าออกเป็น region ที่มีชื่ออยู่แล้ว เช่น header, hero, feature section, testimonials, footer เมื่อคุณส่งดีไซน์นั้นต่อให้นักพัฒนา — หรือเขียน HTML เอง — เป้าหมายคือแปล region เหล่านั้นให้เป็น semantic element โดยตรง ไม่ใช่กอง <div> ทั่ว ๆ ไป แต่เป็น container ที่มีชื่อและมีจุดประสงค์ ที่ตรงกับสิ่งที่แต่ละ region เป็น จริง ๆ

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใช้ <div> ทุกที่แทน <header>/<nav>/<main>/<footer>
ใส่ heading (h1-h6) ตาม “ขนาดตัวอักษรที่อยากได้” แทนตาม hierarchy จริงของเนื้อหา

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “ส่วนบน ส่วนกลาง ส่วนล่าง” แต่ developer เห็นว่า semantic tag ให้ screen reader และ SEO เข้าใจโครงสร้างเพจได้โดยไม่ต้องอ่าน CSS เลย

💡 ตัวอย่างจากของจริง

Medium ใช้ <article> และ <header> ที่ชัดเจน ทำให้ browser reader mode ดึงเนื้อหาบทความออกมาแสดงได้อัตโนมัติ