Bold (Boldface) ถือเป็นการเน้นแบบ Strong ใน Typography ใน HTML สมัยใหม่ มี 2 Element ที่โดยค่าเริ่มต้นใช้ Bold Font-weight (Boldface) กับ Element ข้อความ (ในเบราว์เซอร์ส่วนใหญ่)
คุณสามารถใช้แท็ก <strong> หรือ <b> ได้:
<p>The strong tag is used to <strong>emphasize</strong> text.</p> <p>The b tag is used to <b>emphasize</b> text.</p>ใน HTML สมัยใหม่ (HTML5) <strong> และ <b> ทั้งคู่ถือว่า Semantic และ Valid แม้ทั้งคู่จะได้ Boldface เหมือนกันในเบราว์เซอร์สมัยใหม่ แต่ ความหมายและวัตถุประสงค์ต่างกัน
ความแตกต่างคืออะไร และควรใช้ตัวไหนสำหรับอะไร?
- Element
<strong>ใช้สำหรับเนื้อหาที่มีความสำคัญมาก (เช่น คำเตือน) - Element
<b>ใช้ดึงดูดความสนใจ โดยไม่บ่งชี้ความสำคัญ
ตัวอย่างการใช้ <b>:
The Spanish word <b>idioma</b> means "language". It originates from Greek.ในตัวอย่าง ผมในฐานะนักพิมพ์ ตัดสินใจเน้นคำว่า idioma ไม่ใช่เพราะมี ความสำคัญมาก แต่เพราะเป็นคำต่างภาษาที่ต้องการให้โดดจากข้อความรอบข้าง มากกว่าคือการตัดสินใจด้านสไตล์ ไม่ใช่บังคับเพื่อสื่อความหมาย
ดังนั้น หากต้องการดึงดูดความสนใจโดยไม่มีความหมายเชิงความหมายเฉพาะ <b> จะถูกต้องในอดีต (ก่อน HTML5) แต่ในปัจจุบัน เราไม่ใช้ HTML สำหรับ Presentation ใช้ CSS แทน จึงไม่ใช้ <b>
ตัวอย่างการใช้ <strong>:
In 2020, <strong>security</strong> and <strong>performance</strong> are are crucial for your SEO.ในตัวอย่าง ผมเน้น Security และ Performance เพราะหัวข้อเหล่านี้มีความสำคัญมากต่อ SEO (และ UX) ของเว็บไซต์
โดยค่าเริ่มต้น <strong> และ <b> ใช้ Boldface เหมือนกันในเบราว์เซอร์ส่วนใหญ่ ซึ่งก่อให้เกิดความสับสน เขาทำไมให้ดูเหมือนกันเมื่อเป็นเครื่องมือต่างกันสำหรับกรณีใช้งานต่างกัน?
ผมเห็นด้วย มันรบกวน
นี่คือเหตุผลที่คุณอาจอยากอัปเดตค่าเริ่มต้นของเบราว์เซอร์ และใช้สไตล์ต่างกัน
วิธีแยก <strong> และ <b> ด้าน Presentation คือ ใช้ Font Weight 500-900 (ขึ้นกับ Font Family) กับ <strong> ผ่าน CSS:
strong { font-weight: 700; }และใช้สไตล์ต่างกันสำหรับ <b> เช่น:
b { font-weight: 400; color: green; }ข้างต้นไม่ใช่คำแนะนำสไตล์ แต่นิทรรศการวิธีทำให้จำง่ายว่าตัวไหนใช้ไหน เมื่อดูหน้าที่ Render ในเบราว์เซอร์
หากคุณใช้ Markdown
หากลองแปลง <b> หรือ <strong> เป็น Markdown ใน Converter เช่น Browserling จะเห็นว่าทั้งคู่ได้ ** ** เดียวกัน — ซึ่ง Render เป็น <strong> ในเบราว์เซอร์
ทำไมถึงเป็น这样?
ไม่แน่ใจ ไม่พบคู่มือ Markdown ใดที่แสดงวิธี Render <b> ในเบราว์เซอร์ด้วย Syntax Markdown
ไม่ต้องกังวล ยังคงใช้ HTML Syntax โดยตรงใน Markdown Files ได้ (เว้นแต่ใช้เวอร์ชันเก่า) หากต้องการ <b> แทน <strong> ใส่ได้เลย:
Here is a line of text inside a <b>markdown</b> file which automatically gets wrapped by paragraph tagsผมเขียนบทความนี้ใน Markdown ตอนนี้จะเน้น this text ด้วย Element <b> หาก Highlight ย่อหน้านี้คลิก Inspect จะเห็นว่าใช้ <b> จริงๆ
มันสำคัญจริงไหมที่จะใช้ตัวไหน?
ชัดเจนว่าไม่ใช่เรื่องชีวิตตาย หรือเบราว์เซอร์สมัยใหม่จะไม่ Render <b> และ <strong> ด้วย Boldface เดียวกัน
อย่างไรก็ตาม ด้าน Semantic มีความแตกต่าง ซึ่งเป็นข้อความที่ผมอยากสื่อ ถ้าคุณไปสัมภาษณ์งานที่ใส่ใจ Semantic Markup มาก การรู้ความแตกต่างจึงสำคัญ
สรุป:
<b>ใช้ดึงดูดความสนใจข้อความเฉพาะ<strong>ใช้สำหรับข้อความสำคัญ- เมื่อไม่แน่ใจ ใช้
<strong>
กฎทั่วไป: หลีกเลี่ยงการใช้เน้นมากเกินไป เมื่อพยายามเน้นทุกอย่าง เน้นแล้วไม่มีอะไรถูกเน้นจริงๆ If you emphasize everything you emphasize nothing (มองดูที่คุณ Generic Marketing Landing Page Sites)
