Elements & Tags

เนื้อหาทุกชิ้นบนหน้าเว็บ — ไม่ว่าจะเป็นหัวข้อ ย่อหน้า รูปภาพ หรือปุ่ม — ล้วนถูกห่อหุ้มอยู่ใน element ลองนึกถึง element เหมือนกล่องที่มีป้ายกำกับ ป้ายนั้นบอก browser (รวมถึง screen reader และ search engine) ว่า เนื้อหาข้างในเป็นชนิดไหน

คุณเขียน element โดยใช้ tag ซึ่งก็คือป้ายกำกับคู่หนึ่งที่อยู่ในเครื่องหมายมุม (angle bracket) ห่อเนื้อหาของคุณเอาไว้ element ส่วนใหญ่มี opening tag และ closing tag (closing tag จะเพิ่มเครื่องหมาย slash เข้าไป) บาง element พิเศษ เช่น รูปภาพ เป็นแบบ self-closing — เพราะไม่มีเนื้อหาข้อความให้ห่อ จึงไม่มีอะไรต้องครอบ

Tag และ attribute

<tagname attribute="value">Content goes here</tagname>

opening tag สามารถพกพาข้อมูลเพิ่มเติมที่เรียกว่า attribute ได้ — ลองนึกว่าเป็นการตั้งค่าหรือ property ของ element นั้น เช่น ลิงก์จำเป็นต้องรู้ว่าจะ ไปที่ไหน และรูปภาพจำเป็นต้องรู้ว่า ไฟล์อยู่ที่ไหน ค่าพวกนี้อยู่ใน attribute

<a href="https://example.com">Visit this site</a>
<img src="photo.jpg" alt="A description of the photo" />

สังเกตว่า tag ของรูปภาพลงท้ายด้วย /> — เป็นแบบ self-closing เพราะไม่มีเนื้อหาข้อความให้ห่อ

โครงกระดูกของหน้าเว็บ

เอกสาร HTML ทุกฉบับทำตามโครงสร้างมาตรฐานเดียวกัน เหมือนเทมเพลตของไฟล์ดีไซน์ — กรอบนอกชุดเดิมทุกครั้ง แล้วใส่เนื้อหาเฉพาะของคุณเข้าไปข้างใน

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page title shown in the browser tab</title>
  </head>
  <body>
    Everything visible goes here.
  </body>
</html>

<!doctype html> — คำสั่งบรรทัดเดียวที่บอก browser ว่า “นี่คือไฟล์ HTML สมัยใหม่” ต้องอยู่บรรทัดแรกสุดเสมอ
<html> — container นอกสุด เหมือน canvas ใน Figma
<head> — metadata ที่มองไม่เห็น เช่น ชื่อหน้าเว็บ, character encoding, ลิงก์ไปยังไฟล์ CSS ลองนึกว่าเป็นแผง “document settings”
<body> — ทุกอย่างที่ผู้ใช้ มองเห็น จริง ๆ อยู่ตรงนี้

การซ้อน (Nesting)

element สามารถอยู่ภายใน element อื่นได้ — เรียกว่าการ nesting กฎนั้นง่ายมาก คือต้องปิด element ด้านในให้เรียบร้อยก่อนปิด element ด้านนอกเสมอ พูดในภาษา Figma ก็คือ text layer ต้องอยู่ภายใน parent frame ของตัวเองทั้งหมด คุณจะปล่อยให้เหลื่อมออกไปบางส่วนไม่ได้

<div>
  <h2>My design portfolio</h2>
  <p>I create <strong>bold</strong> and <em>elegant</em> interfaces.</p>
</div>

ลองเปลี่ยน <h2> เป็น <h3> หรือเพิ่ม <p> อีกอันใต้อันแรก สังเกตว่า browser เรียง block element ซ้อนต่อกันลงมา เหมือน auto-layout ใน frame แนวตั้งเลย

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

ใช้ <div> แทน element ที่มีความหมาย เช่นใช้ div ทำปุ่มแทน <button>
เปิด tag แต่ลืมปิด
nest element ผิดกฎ (เช่น <p> ซ้อนใน <p>)

มุมมองของ developer

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

Designer เห็น “กล่องสี่เหลี่ยม” ธรรมดา แต่ developer เห็นว่า tag ที่ถูกต้องให้ default behavior มาฟรี (button กด Enter ได้, รับ keyboard focus ได้) โดยไม่ต้องเขียน code เพิ่ม

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

Linear ใช้ semantic <button> ทุกที่ที่ควรเป็นปุ่ม ทำให้ keyboard shortcut ทำงานได้ทันทีโดยไม่ต้องเขียน JavaScript เพิ่ม