Text & Headings

ทุกดีไซน์มี type scale — ชุดของขนาดข้อความที่บ่งบอกถึงความสำคัญ หัวข้อใหญ่ตัวหนา หัวข้อรองที่เล็กลงมา และ body copy อยู่ด้านล่าง HTML ก็มีแนวคิดแบบเดียวกันเป๊ะ ติดตั้งมาให้ในตัวเลย

Heading element — <h1> ไปจนถึง <h6> — ช่วยให้คุณบอก browser (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวกและ search engine) ว่าลำดับความสำคัญของข้อความเป็นอย่างไร ลองนึกว่าเป็น outline ของเอกสาร ไม่ใช่แค่ scale เชิงภาพ

Heading h1 ถึง h6

<h1> คือ heading ที่สำคัญที่สุดในหน้าเว็บ — เป็นชื่อหลักของหน้า ส่วน <h2> คือ heading ของ section ใหญ่ และ <h3> คือ section ย่อย ไล่ลงไปเรื่อย ๆ จนถึง <h6> หน้าเว็บส่วนใหญ่ในทางปฏิบัติจะใช้แค่ <h1> ถึง <h3> เท่านั้น

heading element มีสไตล์เริ่มต้นจาก browser ติดมาด้วย (ใหญ่กว่า = สำคัญกว่า) แต่สไตล์เหล่านั้นจะถูก CSS override อยู่ดี สิ่งที่สำคัญจริง ๆ คือ ความหมายเชิง semantic — สัญญาณบอกลำดับชั้น

ย่อหน้า

<p> คือย่อหน้า browser จะเพิ่ม margin เล็กน้อยด้านบนและด้านล่างของแต่ละย่อหน้าโดยอัตโนมัติ ถ้าต้องการเริ่มย่อหน้าใหม่ ให้เปิด <p> element ใหม่ — อย่าใช้ tag <br> เพียงเพื่อเพิ่มช่องว่างระหว่างบรรทัด (นั่นเหมือนการใช้ text layer เปล่าใน Figma เพื่อสร้างระยะห่าง แทนที่จะใช้ padding ของ auto-layout)

การเน้นข้อความแบบ inline

มีสอง element ที่ช่วยให้คุณเน้นคำ ภายใน ย่อหน้าได้ โดยไม่ต้องขึ้นบล็อกใหม่:

<strong> — ตัวหนา หมายถึงเนื้อหาที่สำคัญหรือวิกฤต
<em> — ตัวเอียง หมายถึงการเน้นย้ำ หรือการเน้นเสียงเล็กน้อยในการอ่าน

สองตัวนี้เป็น inline element คือจะอยู่ภายในกระแสของข้อความ แทนที่จะขึ้นบรรทัดใหม่

<h1>My Design Process</h1>
<h2>Research</h2>
<p>I start every project by talking to <strong>real users</strong>. Their needs drive every decision.</p>
<h2>Design</h2>
<p>I move from low-fidelity sketches to <em>high-fidelity</em> prototypes in Figma.</p>
<h3>Iteration</h3>
<p>Good design is never done on the first try. I test, learn, and refine.</p>

ลองเพิ่ม <h4> ใต้ <h3> ดู แล้วลองห่อคำสักคำด้วย <strong> หรือ <em> สังเกตว่าทั้งสองอันไม่ทำให้ขึ้นบรรทัดใหม่ — ข้อความยังคงอยู่ในประโยคเดิม

💡 หนึ่ง h1 ต่อหนึ่งหน้า

search engine และ screen reader ถือว่า <h1> คือชื่อของทั้งหน้าเว็บ ให้ใช้เพียงครั้งเดียวเท่านั้น — สำหรับหัวข้อหลัก จากนั้นใช้ <h2> สำหรับ section ระดับบนสุด <h3> สำหรับ section ย่อย ไล่ตามลำดับไปเรื่อย ๆ การข้ามระดับ (กระโดดจาก <h1> ไป <h3>) ก็เหมือนการข้ามระดับในลำดับชั้น component ของ Figma — ในทางเทคนิคก็ยังทำงานได้ แต่ทำลายโครงสร้างที่ทั้งคน (และเครื่องมือ) พึ่งพา

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

ข้าม heading level (h1 ไป h3 เลย) เพียงเพราะต้องการขนาดที่เล็กลง
มี <h1> มากกว่าหนึ่งอันในหน้าเดียว
ใช้ bold text แทน heading จริง

มุมมองของ developer

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

Designer เห็น “ขนาด font” เท่านั้น แต่ developer เห็นว่า heading level คือ outline ของเพจที่ screen reader ใช้ navigate (เหมือน table of contents)

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

บทความบน Dev.to และ Medium ใช้ heading hierarchy ที่ถูกต้อง ทำให้ auto-generate table of contents ได้จาก HTML ตรง ๆ โดยไม่ต้องทำมือ