bold, italic, strong and em

ผมเชื่อว่าหลาย ๆ คนที่เขียนเว็บคงจะต้องสงสัย และอาจจะยังใช้ tag <b> กับ <strong> หรือ <i> กับ <em> ปน ๆ กันอยู่ เพราะว่าหน้าตาที่ได้ออกมา <b> กับ <strong> นั้นได้ตัวเข้มตัวหนาเหมือนกัน ส่วน <i> กับ <em> ก็ดันได้เป็นตัวเอียงเหมือนกัน

แล้วทำไมเราต้องใช้ให้ถูกต้อง

ในเมื่อเราเขียน <b> หรือ <strong> ก็ได้ตัวเข้มหมือนกัน เราจะเขียน <strong> ทำไมในเมื่อ <b> นั้นเขียนสั้นกว่า เพราะว่าเดี๋ยวนี้เรามี search engine เช่น Google, Bing และอื่น ๆ หรือแม้แต่โปรแกรมช่วยอ่านออกเสียง หรือจะเป็นโปรแกรมที่ประมวลผลด้านภาษาต่าง ๆ เข้ามาร่วมด้วย ซึ่งสิ่งเหล่านี้จะไม่สามารถแยกแยะความสำคัญของข้อมูลได้เหมือนกับเรา เพื่อให้สิ่งเหล่านี้สามารถนำข้อมูลไปใช้ประโยชน์ได้มากขึ้น เรามาดูความแตกต่างและการสื่อความหมายของ tag เหล่านี้กันดีกว่า

<b> กับ <strong>

เราจะใช้ <b> สำหรับการทำข้อความให้เห็นเป็น ตัวหนา หรือตัวเข้ม แต่เราจะใช้ <strong> ในการเน้นความสำคัญของข้อความ ซึ่งโดยปกติ เว็บเบราวเซอร์จะแสดงออกเป็นตัวหนา หรือตัวเข้ม ผลที่ได้คือ เมื่อเรามองปกติ เราจะได้ข้อความที่เป็นตัวหนา เหมือนกัน ตัวอย่างที่จะเห็นได้อย่างชัด ๆ ที่เราจะใช้ <b> แทนที่จะใช้ <strong> คือ ประโยคเปิดในงานเขียน ดังภาพ

ประโยคเปิด

ตัวอย่างประโยคเปิดจาก html5doctor.com

จะเห็นได้ว่า ตัวข้อความนั้นไม่ใช่ส่วนที่สำคัญเพราะแม้ว่าเราจะไม่เน้นส่วนดังกล่าวก็จะไม่ได้ทำให้ความหมายที่ต้องการสื่อสารเปลี่ยนแปลงไป เพียงแต่เราใช้ <b> ในการดึงสายตาการมองของผู้อ่าน

<i> กับ <em>

ในกรณีของ <i> จะเหมือนของ <b> คือเราจะใช้ในการนำสายตาการมอง โดยที่ไม่ได้ทำให้ความสำคัญของเนื้อหาเปลี่ยนแปลงไป เพียงแต่ต่างกันแค่ว่า <i> ใช้ทำข้อความให้เอียง ส่วน <b> ทำข้อความให้หนาเท่านั้น

เรามักจะใช้ <i> กับชื่อทางวิทยาศาสตร์ คำทับศัพท์ เช่น


ไทแรนโนซอรัส หรือ ทิแรนโนซอรัส (ชื่อวิทยาศาสตร์: Tyrannosaurusเสียงอ่านภาษาอังกฤษ: /tɨˌrænɵˈsɔrəs หรือ taɪˌrænɵˈsɔrəs/; แปลว่า กิ้งก่าทรราชย์ มาจากภาษากรีก) เป็นสกุลหนึ่งของไดโนเสาร์ประเภทเทอโรพอด

หรือ

We ate unagiaburi-zake, and tako sushi last night, but the toro sushi was all fished out.


ส่วน <em> ในปัจจุบันจะใช้กับการเน้นเสียงของภาษา (stress)
(ถ้าเน้นความสำคัญเราจะใช้ <strong>) เช่น

  • Call a doctor now!
  • Call a doctor now!

อันแรกเป็นการเน้นย้ำว่าเรียกหมอ ส่วนอันที่สองคือให้เรียกเดี๋ยวนี้

สรุป

  • <b> กับ <i> ใช้เพื่อนำสายตาการมอง โดยไม่ได้เน้นหรือให้ความสำคัญกับข้อมูล ซึ่งในกรณีของ search engine จะมองเห็นเป็นข้อความธรรมดา
  • <strong> กับ <em> ใช้ในการให้ความสำคัญของข้อมูล หรือคำ ๆ นั้น ซึ่งปัจจุบัน <em> จะเป็นการเน้น stress ของภาษา

อ้างอิง:
<strong> vs. font-weight:bold & <em> vs. font-style:italic
HTML Text Formatting
<html> Topic 4 What’s the Difference?
The i, b, em, & strong elements

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s