ในการสร้างข้อความตัวหนาใน HTML คุณสามารถใช้ <b> แท็ก <strong> แท็ก หรือ font-weight ใน CSS
เมื่อคุณออกแบบหน้าเว็บ คุณอาจต้องการเน้นข้อความที่เฉพาะเจาะจง
ตัวอย่างเช่น สมมติว่าคุณมีรายการคำแนะนำเกี่ยวกับวิธีการใช้เทคโนโลยีชิ้นใหม่ และมีประกาศด้านความปลอดภัยที่มีความสำคัญอย่างยิ่งต่อผู้ใช้ในการอ่าน คุณอาจต้องการเน้นย้ำการแจ้งเตือนนั้นเพื่อให้แน่ใจว่าผู้ใช้จะไม่พลาดเมื่ออ่านคำแนะนำ
ใน HTML มีฟังก์ชันในตัวที่ช่วยให้ผู้เขียนโค้ดสามารถเน้นข้อความเฉพาะได้ ในบทช่วยสอนนี้ เราจะอธิบายวิธีทั่วไปสามวิธีในการทำให้ข้อความเป็นตัวหนาใน HTML :<b> แท็ก <strong> และ font-weight Cascading Style Sheets (CSS) พารามิเตอร์
HTML แท็ก
วิธีทั่วไปที่สุดที่นักพัฒนาสร้างข้อความที่เป็นตัวหนาใน HTML คือผ่านการใช้ <b> แท็ก <b> tag ทำงานเพื่อสร้างองค์ประกอบที่แสดงข้อความตัวหนาบน HTML หน้าเว็บ. ตัวอย่างเช่น <b> แท็กสามารถเน้นหัวข้อย่อยในบทความออนไลน์ได้
นี่คือตัวอย่างของ HTML <b> แท็กในการดำเนินการ:
<b>This text is bold</b>
มันง่ายมาก หากคุณต้องการทำให้ส่วนใดส่วนหนึ่งของข้อความเป็นตัวหนาแต่ปล่อยส่วนที่เหลือของย่อหน้าไว้ คุณสามารถใส่ <b> แท็กในส่วนที่เราทำด้านล่าง:
<p>This text is not bold. <b>But this text is bold!</b></p>
นี่คือผลลัพธ์ของรหัสของเรา:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
จุดเริ่มต้นของย่อหน้าของเราดูเหมือนปกติ และข้อความภายใน <b> . ของเรา แท็กได้รับการกล้า
HTML แท็ก
นอกจากนี้ คุณสามารถใช้ <strong> แท็กเพื่อสร้างข้อความตัวหนาใน HTML . <strong> แท็กจะเหมือนกับ <b> . ทุกประการ แท็ก โดยมีความแตกต่างเพียงอย่างเดียว:แท็กที่รัดกุมระบุว่าเนื้อหาต้องการความสนใจเป็นพิเศษ นี่คือตัวอย่าง <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> tag ถูกใช้เพื่อบ่งบอกว่าคำว่า Attention ควรได้รับความสนใจเป็นพิเศษจากผู้อ่าน ที่กล่าวว่านอกเหนือจากความแตกต่างนี้ <b> และ <strong> แท็กเหมือนกัน
คุณสมบัติ CSS font-weight
<strong> และ <b> แท็กที่ใช้ในวานิลลา HTML องค์ประกอบเพื่อระบุว่าข้อความมีความสำคัญและควรอ่าน อย่างไรก็ตาม ยังมี CSS คุณสมบัติที่ช่วยให้เราควบคุมลักษณะที่ปรากฏของข้อความได้มากขึ้น: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;
} รหัสของเราส่งคืนดังต่อไปนี้:
ในตัวอย่างของเรา เรากำหนดคลาสที่เรียกว่า thick ซึ่งกำหนด font-weight คุณสมบัติสำหรับข้อความของเราถึง 900 หมายความว่าข้อความที่เราอ้างอิงคลาส thick จะปรากฏกล้าแสดงออก เป็นที่น่าสังเกตว่าเราปรับแต่งตัวเลข “900” ได้ ขึ้นอยู่กับว่าเราต้องการให้ข้อความดูสว่างขึ้นหรือโดดเด่นขึ้น
อีกทางหนึ่ง เราสามารถระบุ font-weight . ของเรา โดยใช้สไตล์ font-weight แอตทริบิวต์ตัวหนา เช่น:
<p>This is an example paragraph.</p> <p style="font-weight:900;">This is a bold example paragraph.</p>
บทสรุป
ข้อความตัวหนาเป็นส่วนสำคัญของการจัดรูปแบบข้อความใน HTML . หากคุณต้องการดึงความสนใจไปที่ข้อความบรรทัดใดบรรทัดหนึ่งหรือสองสามคำ คุณอาจต้องการสร้างความโดดเด่นให้กับข้อความนั้น ในบทช่วยสอนนี้ เราได้แบ่งวิธีหลักสามวิธีในการทำให้ข้อความเป็นตัวหนา:<b> , <strong> และ font-weight . ตอนนี้คุณพร้อมที่จะสร้างข้อความที่เป็นตัวหนาอย่างผู้เชี่ยวชาญแล้ว!
