เพื่อทำข้อความตัวหนาใน HTML คุณสามารถใช้แท็ก <b> แท็ก <strong> หรือ font-weight ใน CSS
เมื่อคุณออกแบบหน้าเว็บ คุณอาจต้องการเน้นข้อความเฉพาะบางส่วน
ตัวอย่างเช่น สมมติคุณมีรายการคำแนะนำวิธีใช้เทคโนโลยีชิ้นใหม่ และมีข้อความแจ้งเตือนด้านความปลอดภัยที่สำคัญมากสำหรับผู้ใช้ที่จะต้องอ่าน คุณอาจต้องการเน้นข้อความแจ้งเตือนนั้นเพื่อให้แน่ใจว่าผู้ใช้ไม่พลาดเมื่ออ่านคำแนะนำ
ใน HTML มีฟังก์ชันในตัวที่ช่วยให้นักเขียนโค้ดทำข้อความเฉพาะให้ตัวหนาได้ ในบทช่วยสอนนี้ เราจะแยกวิเคราะห์ 3 วิธีที่พบบ่อยที่สุดในการทำข้อความตัวหนาใน HTML: แท็ก <b>, แท็ก <strong> และพารามิเตอร์ font-weight Cascading Style Sheets (CSS)
HTML <b> Tag
วิธีที่พบบ่อยที่สุดที่นักพัฒนาสร้างข้อความตัวหนาใน HTML คือการใช้แท็ก <b> แท็ก <b> ทำงานเพื่อสร้าง element ที่แทนข้อความตัวหนาบนหน้าเว็บ HTML ตัวอย่างเช่น แท็ก <b> สามารถเน้นหัวข้อย่อยในบทความออนไลน์ได้
นี่คือตัวอย่างแท็ก HTML <b> ในการทำงาน:
<b>This text is bold</b>
ง่ายแค่นี้ ถ้าคุณต้องการทำให้ส่วนเฉพาะของข้อความตัวหนาแต่ทิ้งส่วนที่เหลือของย่อหน้า คุณสามารถใส่แท็ก <b> ในส่วนนั้นได้ nhưเราทำด้านล่าง:
<p>This text is not bold. <b>But this text is bold!</b></p>
นี่คือผลลัพธ์ของโค้ดของเรา:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
ต้นหนาของย่อหน้าของเราปรากฏปกติ และข้อความภายในแท็ก <b> ของเราถูกทำให้ตัวหนา
HTML <strong> Tag
นอกจากนี้ คุณยังสามารถใช้แท็ก <strong> เพื่อสร้างข้อความตัวหนาใน HTML แท็ก <strong> ใช้งานในลักษณะเดียวกันกับแท็ก <b> มีความแตกต่างหนึ่ง: แท็ก strong บ่งชี้ว่าเนื้อหาของมันต้องการความสนใจพิเศษ นี่คือตัวอย่างการใช้แท็ก <strong>:
<p>Your username for your new computer is <b>JohnAppleseed</b></p> <p><strong>Attention!</strong> You must change your password after logging in.</p>
โค้ดของเราคืนค่าดังนี้:
ตามที่เห็น แท็ก <b> ถูกใช้เพื่อเน้นข้อความที่ผู้อ่านอาจต้องการอ่าน แท็ก <strong> ถูกใช้เพื่อบ่งชี้ว่าคำว่า Attention ควรได้รับความสนใจพิเศษจากผู้อ่าน ถ้าพูดนอกจากความแตกต่างนี้ แท็ก <b> และ <strong> เหมือนกัน
CSS font-weight Property
แท็ก <strong> และ <b> ใช้ใน HTML ธรรมดา เพื่อบ่งชี้ว่าข้อความสำคัญและควรอ่าน อย่างไรก็ตาม ยังมี CSS property ที่ให้เราควบคุมลักษณะข้อความได้มากขึ้น: font-weight
font-weight อนุญาตให้นักเขียนโค้ดกำหนดว่าส่วนข้อความเฉพาะจะปรากฏหนาหรือบาง — ตัวหนาแค่ไหน นี่คือตัวอย่างแท็ก font-weight ที่ใช้กับย่อหน้าที่มีแท็ก thick:
HTML:
<p>This is an example paragraph.</p> <p class="thick">This is a bold example paragraph.</p>
CSS:
p.thick { font-weight: 900; } โค้ดของเราคืนค่าดังนี้:
ในตัวอย่างของเรา เรากำหนด class ชื่อ thick ซึ่งตั้งค่า property font-weight สำหรับข้อความของเราเป็น 900 หมายความว่าข้อความที่เราอ้างอิง class thick จะปรากฏตัวหนา สังเกตว่าคุณสามารถปรับตัวเลข "900" ได้ ขึ้นอยู่กับว่าคุณต้องการข้อความให้ปรากฏบางหรือหนากว่า
หรือเราสามารถระบุ font-weight โดยใช้ attribute style font-weight bold แบบนี้:
<p>This is an example paragraph.</p> <p style="font-weight:900;">This is a bold example paragraph.</p>
สรุป
ข้อความตัวหนาเป็นส่วนสำคัญของการจัดรูปแบบข้อความใน HTML หากคุณต้องการดึงดูดความสนใจไปยังบรรทัดข้อความเฉพาะหรือคำไม่กี่คำ คุณอาจต้องการทำให้มันตัวหนา ในบทช่วยสอนนี้ เราแยกวิเคราะห์ 3 วิธีหลักในการทำข้อความตัวหนา: <b>, <strong> และ font-weight ตอนนี้คุณพร้อมที่จะสร้างข้อความตัวหนาเหมือนมืออาชีพแล้ว!
