HTML, CSS & JS — แต่ละอย่างทำอะไร

ทุกหน้าเว็บถูกสร้างด้วยภาษาสามภาษาเท่านั้น ภาษาเหล่านี้มีมาตั้งแต่ยุคแรกของเว็บ และยังคงเป็นพื้นฐานของทุกเว็บที่คุณเปิดอยู่ทุกวันนี้ — ตั้งแต่ blog เล็กๆ ไปจนถึง web app ที่ซับซ้อน แต่ละภาษามีหน้าที่ที่ชัดเจนหนึ่งอย่าง

HTML — โครงสร้าง

HTML (HyperText Markup Language) กำหนด ว่ามีอะไรบนหน้า ข้อความ, heading, รูปภาพ, ปุ่ม, ลิงก์ — ทั้งหมดนั้นคือ HTML ไม่มีสี ไม่มี font ไม่มี layout มีแต่ content และความหมายล้วนๆ

ถ้าคุณกำลังออกแบบใน Figma HTML ก็คือ layer wireframe — frame, placeholder, และ text block ที่กำหนดว่ามีอะไรอยู่บ้านก่อนที่จะใส่ visual treatment ใดๆ

CSS — การออกแบบ

CSS (Cascading Style Sheets) กำหนด ทุกอย่างดูเป็นอย่างไร สี, typography, spacing, layout, shadow, rounded corner — ทั้งหมดนั้นคือ CSS CSS อ่าน element ของ HTML แล้วใส่ visual style ให้

ในแง่ของ Figma CSS คือทุกอย่างใน Design panel ด้านขวา: fill, stroke, border radius, spacing, font size, color ทั้งหมดนี้คือ visual layer

JavaScript — พฤติกรรม

JavaScript คือภาษาโปรแกรมที่ทำให้สิ่งต่างๆ interactive และ dynamic การคลิกปุ่มแล้วมีเมนูขึ้นมา, พิมพ์ในช่องค้นหาแล้วเห็นผลลัพธ์กรอง, การ drag card ไปยังตำแหน่งใหม่ — ทั้งหมดนั้นคือ JavaScript

ในแง่ของ Figma JavaScript ใกล้เคียงที่สุดกับ Prototype interactions: การเชื่อมต่อและ trigger ที่ทำให้สิ่งต่างๆ ตอบสนองต่อการกระทำของผู้ใช้

เห็นความแตกต่างด้วยตัวเอง

Editor ด้านล่างเริ่มต้นด้วย HTML และ CSS ด้วยกัน ลบ CSS ทั้งหมดออก (เลือกทุกอย่างใน CSS tab แล้วกด Delete) แล้วดูว่าเกิดอะไรขึ้น content ยังคงอยู่ — โครงสร้างยังอยู่ — แต่การออกแบบ visual ทั้งหมดหายไป นั่นคือการแยก HTML และ CSS ในทางปฏิบัติ

<article class="card">
  <span class="tag">UI Design</span>
  <h2>The three layers of every web page</h2>
  <p>HTML is the structure. CSS is the design. JavaScript is the behaviour.</p>
  <a class="btn" href="#">Read more</a>
</article>

คลิก tab CSS แล้วลบเนื้อหาออกเพื่อดู HTML เปล่าๆ แล้ว paste กลับมาเพื่อกู้คืนการออกแบบ นี่คือสิ่งที่ browser ทำอัตโนมัติ — browser วาง CSS ทับ HTML ทุกครั้งที่หน้าโหลด

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

ใส่ style ปนอยู่ใน HTML แทนแยกไปที่ CSS ทำให้ maintain ยาก
คิดว่า JavaScript จำเป็นสำหรับทุกอย่างที่ดู interactive ทั้งที่ CSS ทำได้เยอะกว่าที่คิด
ลืมว่า content (HTML) ต้องมาก่อน style เสมอ

มุมมองของ developer

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

Designer เห็น “หน้าเดียวที่สวยครบ” แต่ developer แยกงานเป็น 3 ไฟล์คนละหน้าที่ (structure/style/behavior) เพื่อให้แก้ไขทีละส่วนได้โดยไม่กระทบส่วนอื่น

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

Stripe docs แยก content (HTML) จาก theme (CSS) อย่างชัดเจน ทำให้สลับ dark mode ได้โดยไม่ต้องแก้ HTML แม้แต่บรรทัดเดียว